スポンサーリンク

CSS:ウィンドウが大きい時だけフッターを下部に追従させる

この記事は約5分で読めます。

コーディングのイメージ

こんにちは、さち です。

今回は、ウェブサイトを作る時に、CSS だけで「フッター」をウィンドウの下部に追従する(貼り付くようにする)方法について書いていきます。

常に追従するのは簡単です。しかし、ウィンドウのサイズが大きい時だけに限定しようとすると、CSS をちゃんと理解していないと意外と難しいです……。

スポンサーリンク

サンプル・完成予想図

このような HTML を準備しました。

<div id="wrapper">
	<header>header</header>
	<main>
		ここから<br>
		main<br>
		ここまで<br>
	</main>
	<footer>footer</footer>
</div>

ウィンドウのサイズがページの全長より大きい時に、「フッター(footer)」がウィンドウの下部に追従するようにしてみましょう。

イメージとしてはこんな感じ。(ウィンドウのサイズの変化を再現するため、body の高さを動かしています)

サンプル

ウィンドウのサイズがページの全長(headermainfooter の高さの合計値)より大きくなると、「フッター」がウィンドウの下部に追従します。

逆に、ウィンドウのページの全長より小さくなると、「フッター」は「メイン」のデフォルトの高さで止まり、ウィンドウにスクロールバーが表示されます。

これを CSS だけで実装してみましょう。

CSS だけで実装する方法

サンプルの 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-widthborder-styleborder-color をまとめて設定できるのと似たような感じです。

この flex を適切に設定しないと、「フッター」はウィンドウ下部に追従してくれません。

具体的に見ていきましょう。

headerfooter に設定した 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;
}

mainflex: 1 0 auto; の代わりに margin-bottom: auto; を設定する方法もありますが、この方法だと「メイン」と「フッター」の間にすき間ができてしまいます。例の場合、main のオレンジと footer の緑の間にすき間ができてしまい、body の白い背景が見えてしまいます。なので、おすすめしません。

「flex」の値と効果 まとめ

最後に、「flex」の値と効果を表にまとめておきます。

flex の値と効果 まとめ 表

flex は地味な設定ですが、子要素の見た目に大きく関わるプロパティです。しっかりと効果を覚えて使いこなしましょう。

ちなみに、子要素に min-heightmin-width などで最小値を設定している場合は、flex-shrink(縮み率) を設定しても最小値より小さくなることはありません。

コメント

タイトルとURLをコピーしました