Bootstrap 4で、Sticky Footerを実現する

Sticky Footerについて

SNSやオンラインショッピングサイトなどにはページの最下部にフッターを構えるケースが多いですよね。「利用規約」や「お問い合わせ」など、メインサービスからは少し外れる内容を掲載することが多い箇所です。
今回はそんなサイト最下部のフッターを実現する方法について書いていきます。 特に、フッターといってもSticky Footer ((最下部に)くっ付くフッター)について。
なお、Sticky Footerについてですが、以下の特性を持ったフッターのことを言います。

  • 十分にコンテンツがある場合、最下部までスクロールした時に、最下部にフッターがくっ付いている
  • 十分にコンテンツがない場合、コンテンツのすぐ下にフッターがくるのではなく、ブラウザの最下部にフッターがくっ付いている

f:id:yyUX:20170419004804p:plain

このSticky Footerを実現するためにはHTMLやCSSに少しテクニックが必要なのですが、今回は昨今よく利用されているCSSフレームワークのBootstrapを用いて実現したいと思います。特に現時点（2017年4月）で最新のBootstrap v4.0.0-alpha.6での実現方法について紹介していきます。

Sticky Footerの実現方法

Sticky Footerの実現方法はいくつかあるのですが、今回はflexレイアウトボックスモデルを用いた方法を採用します。（flexboxを利用すると、フッターの高さが不確定でも想定通りのSticky Footerを実現できます。）

なお、その他の方法も紹介されている記事としては以下が参考になりました。気になる方はチェックしてみてください。

coliss.com

そもそもflexレイアウトボックスモデルがよくわからないよ！って方は以下の記事がとてもわかりやすいと思います。 liginc.co.jp

Bootstrap 4 (v4.0.0-alpha.6)による実現方法

では早速サンプルコードと共に実現方法を見て行きましょう。ポイントは以下になります。

  • ビューポートの高さをブラウザの高さとします。今回はbodyのstyle属性としてmin-height: 100vh;をあてています。（もちろんhead要素にstyle要素として外だしするのでもOK）
  • bodyをflexコンテナとします。bootstrapのクラスとしてclass="d-flex"を設定しています。
  • bootstrapのflexの軸はデフォルトでは行（横）方向のため、class="flex-column"として軸を縦に変更します。
  • main属性の下マージンをautoとすることでフッターを最下部にくっつけます。bootstrapのクラスとしてclass="mb-auto"を設定しています。（footer属性側にclass="mt-auto"としても同様のことができます。）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <style>
    /*例のため背景色付け*/
    body {background-color: silver;}
    header {background-color: green;}
    main {background-color: pink;}
    footer {background-color: red;}
  </style>
  <title>Sticky Footer</title>
</head>
<body class="d-flex flex-column" style="min-height: 100vh">
  <header>
    header
  </header>
  <main class="mb-auto">
    main
  </main>
  <footer>
    footer
  </footer>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
</html>

なお、ビューポートやflexbox、マージンなど、CSS初心者には難しい部分もあると思いますが、どれも大事な要素なのでこの機会に是非学習してみてください。

最後に宣伝です！ 私たちはyyUXというUXレビューサイトを運営しています。あらゆるサービスのUX改善を目指しています。一度のぞいてみて下さい。よろしくお願いします。

www.yyux.jp