こんにちは、さち です。
今回は、ウェブサイトを作る時に、CSS だけで「フッター」をウィンドウの下部に追従する（貼り付くようにする）方法について書いていきます。
常に追従するのは簡単です。しかし、ウィンドウのサイズが大きい時だけに限定しようとすると、CSS をちゃんと理解していないと意外と難しいです……。
サンプル・完成予想図
このような HTML を準備しました。
<div id="wrapper">
<header>header</header>
<main>
ここから<br>
main<br>
ここまで<br>
</main>
<footer>footer</footer>
</div>
ウィンドウのサイズがページの全長より大きい時に、「フッター（footer）」がウィンドウの下部に追従するようにしてみましょう。
イメージとしてはこんな感じ。（ウィンドウのサイズの変化を再現するため、body の高さを動かしています）
ウィンドウのサイズがページの全長（header，main，footer の高さの合計値）より大きくなると、「フッター」がウィンドウの下部に追従します。
逆に、ウィンドウのページの全長より小さくなると、「フッター」は「メイン」のデフォルトの高さで止まり、ウィンドウにスクロールバーが表示されます。
これを CSS だけで実装してみましょう。
CSS だけで実装する方法
position: sticky; ではできない
サンプルの HTML のフッターがウィンドウの下部に追従するように、実際に CSS を書いてみます。
最初、position: sticky; でできるかなと思ったんですが、動きが似ているだけで別物なんですよね。こちらは、「スクロール」に追従するものです。
CSS だけで実装するには、「フレックスボックス」を使います。
フレックスボックスの使い方
フレックスボックスは、display: flex; を記述することで利用できます。
これを適用した要素は「フレックスコンテナ」となり、直下の子要素は幅・高さが連動して整列されるようになります。
実際にフレックスボックスを使って「フッター」をウィンドウ下部に追従させてみましょう。
今回の場合、CSS はこんな感じになります。
html, body, #wrapper {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: column;/* 子要素を縦に整列 */
}
header {
background-color: red;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
main {
background-color: orange;
flex: 1 0 auto;
}
footer {
background-color: green;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
ハマりやすいポイントは、子要素の「伸び縮み」です。
子要素の伸び縮みの調整は、flex-grow（伸び率）・flex-shrink（縮み率） プロパティを子要素に設定することで行います。
これら2つのプロパティを複数ある子要素に設定するのは面倒なので、flex-grow（伸び率）・flex-shrink（縮み率） に flex-basis（基本幅） を加えた3つのプロパティは、flex でまとめて指定できるようになっています。border で、border-width・border-style・border-color をまとめて設定できるのと似たような感じです。
この flex を適切に設定しないと、「フッター」はウィンドウ下部に追従してくれません。
具体的に見ていきましょう。
header と footer に設定した flex: none; は、伸びない・縮まない・基本幅はおまかせという状態です。ちなみに、flex: none; は、flex: 0 0 auto; と記述するのと同じ意味で、flex-grow: 0;・flex-shrink: 0;・flex-basis: auto; という状態です。
header {
background-color: red;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
/* 省略 */
footer {
background-color: green;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
そして、一番重要なのは main に設定した flex: 1 0 auto; です。これは、伸びる・縮まない・基本幅はおまかせという状態です。これによって main が伸びるようになるため、「フッター」がウィンドウ下部に追従するようになります。
main {
background-color: orange;
flex: 1 0 auto;
}
main に flex: 1 0 auto; の代わりに margin-bottom: auto; を設定する方法もありますが、この方法だと「メイン」と「フッター」の間にすき間ができてしまいます。例の場合、main のオレンジと footer の緑の間にすき間ができてしまい、body の白い背景が見えてしまいます。なので、おすすめしません。
「flex」の値と効果 まとめ
最後に、「flex」の値と効果を表にまとめておきます。
flex は地味な設定ですが、子要素の見た目に大きく関わるプロパティです。しっかりと効果を覚えて使いこなしましょう。
ちなみに、子要素に min-height や min-width などで最小値を設定している場合は、flex-shrink（縮み率） を設定しても最小値より小さくなることはありません。
コメント