CSSフレックスボックスでフッターをページ下部に固定する方法｜初心者でもわかるFlexboxレイアウト

Flexboxでフッターをページ下部に固定するテクニック

先生と生徒の会話形式で理解しよう

生徒

「ページの内容が少ないと、フッターが途中に表示されてしまいます。下に固定できますか？」

先生

「CSSのフレックスボックスを使うと、自然な形でフッターをページ下部に配置できます。」

生徒

「難しい指定や計算は必要ですか？」

先生

「画面全体を一つの箱として考えるだけなので、初心者でも大丈夫です。」

1. フッターが途中に表示される理由

Webページを作っていると、内容が少ないページでフッターが画面の途中に表示されることがあります。これは、HTMLが上から順番に要素を並べているだけだからです。ブラウザは、画面の高さを気にせず、書かれている順に表示します。

初心者の方は「なぜ下に行かないのか」と不思議に思うかもしれませんが、実はとても正直な動きをしているだけです。この問題を解決するために、CSSフレックスボックスを使います。

2. フレックスボックスでページ全体を考える

フッターをページ下部に固定するためには、画面全体を一つの大きな箱として考えることが大切です。その箱の中に、ヘッダー、メイン、フッターを縦に並べます。

イメージとしては、お弁当箱です。上におかず、真ん中にご飯、下にデザートを入れると、中身が少なくてもデザートは一番下に来ます。これと同じ考え方をCSSで実現します。

3. 縦方向のフレックスボックスを使う

フッター固定では、縦方向のフレックスボックスを使います。これは、上から下へ要素を並べる指定です。画面の高さをすべて使うことで、フッターを下まで押し下げられます。

ポイントは、親要素に画面いっぱいの高さを持たせることです。そうすることで、内容が少なくても余白が生まれ、フッターが自然に下に配置されます。

4. フッターを下部に配置する基本コード

ここでは、フレックスボックスを使ってフッターをページ下部に固定する基本例を紹介します。全体を包む要素を縦並びにするのがポイントです。


<style>
	body {
	    margin: 0;
	}
	.wrapper {
	    display: flex;
	    flex-direction: column;
	    min-height: 100vh;
	}
	main {
	    flex: 1;
	    padding: 16px;
	}
	footer {
	    background: #333;
	    color: #fff;
	    padding: 16px;
	    text-align: center;
	}
</style>

<div class="wrapper">
	<main>
		<p>ここにページの内容が入ります。</p>
	</main>
	<footer>
		<p>フッターエリア</p>
	</footer>
</div>

ブラウザ表示

mainに指定しているflexは、「余ったスペースを広げて使う」という意味です。この設定があることで、フッターは常にページの一番下に配置されます。