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

生徒

「Webサイトを作っているのですが、中身の文章が少ない時にフッターが画面の真ん中あたりまで浮き上がってきてしまいます。どうすれば一番下に固定できますか？」

先生

「それはWeb制作初心者の方が必ず直面する悩みですね。最新のCSS Grid（グリッド）を使えば、たった数行で解決できるんですよ。」

生徒

「グリッドレイアウトって、複雑な表を作るためのものだと思っていました。フッターの固定にも使えるんですね！」

先生

「はい！画面全体の『高さ』をコントロールして、余ったスペースを自動で埋める仕組みを作れば、どんな画面サイズでもきれいに表示されます。具体的な方法を見ていきましょう！」

1. なぜフッターが浮き上がってしまうのか？

Webサイトの画面は、上から「ヘッダー（頭）」「メイン（中身）」「フッター（足）」という順番で構成されるのが一般的です。しかし、パソコンやスマートフォンの画面は、中身の文章量よりも縦に長いことがよくあります。

ブラウザの仕組みとして、要素は上から順番に詰めて配置されます。そのため、メイン部分の文章が一行しかないような場合、そのすぐ下にフッターが配置され、画面の下側に大きな空白（隙間）ができてしまうのです。これでは格好悪いですよね。理想は、中身が少なくてもフッターが常に「画面の一番下」にいてくれる状態です。これを実現するために、画面全体のレイアウトを管理する魔法のルールを作ります。

2. CSS Gridで画面全体の「高さ」を定義する

フッターを下に押し出すためには、ページ全体の箱に対して「最低でも画面いっぱいの高さを持ってください」と命令する必要があります。ここで使うのが min-height: 100vh; という指定です。 vh とは「表示領域の高さ（Viewport Height）」のことで、 100vh は画面の高さ100％を意味します。

この画面いっぱいの箱を display: grid; でグリッドレイアウトにします。そして、行（縦方向）の分割ルールを決めます。ヘッダーとフッターは中身に合わせた高さにし、メイン部分だけが「余ったスペースをすべて使い切る」ように設定します。これだけで、メイン部分がフッターを画面の一番下まで押し下げてくれるようになります。


<style>
	/* 画面全体のレイアウト設定 */
	.site-container {
		display: grid;
		/* 画面いっぱいの高さを確保 */
		min-height: 100vh;
		/* 縦の並び：ヘッダー(自動)、メイン(余り全部)、フッター(自動) */
		grid-template-rows: auto 1fr auto;
	}
	header { background: #ffadad; padding: 20px; text-align: center; }
	main { background: #fdffb6; padding: 20px; }
	footer { background: #a0c4ff; padding: 20px; text-align: center; }
</style>

<div class="site-container">
	<header>ヘッダー部分</header>
	<main>中身が少ないですが、メイン部分が伸びてフッターを押し下げます。</main>
	<footer>フッター部分（常に一番下）</footer>
</div>

ブラウザ表示

3. 魔法の単位「1fr」がフッター固定の鍵

先ほどのコードに出てきた 1fr という単位について詳しく解説します。これは「余ったスペースをどれくらいの割合で分け合うか」を決める、グリッド専用の単位です。 grid-template-rows: auto 1fr auto; と書くことで、ヘッダーとフッターに必要な分だけ場所を渡し、残されたすべての縦のスペースをメイン部分（中央）に割り当てています。

メイン部分がどれだけ内容がなくても、この 1fr という指定のおかげで、メイン部分は画面下まで目一杯広がろうとします。その結果、一番下に配置されたフッターが、自動的に画面の最下部にピタッとくっつくのです。計算機でピクセル数を計算する必要はありません。すべてブラウザにお任せできるのがグリッドレイアウトの素晴らしい点です。

4. 文章が長くなっても大丈夫！自動調整の仕組み

「画面の下に固定」と聞くと、文章が長くなった時に文字がフッターに重なってしまうのではないかと心配になるかもしれません。しかし、CSS Gridの素晴らしいところは、中身が増えた時には自動的に枠が広がってくれる点です。

メイン部分の文章が画面の高さを超えるほど長くなった場合、 min-height（最低限の高さ）のルールが働き、全体の高さが文章に合わせて伸びていきます。フッターは常にメイン部分の「次」に配置されるルールなので、文章の最後まできちんとスクロールした一番下に出てきます。つまり、「中身が少ない時は画面の下に、多い時は文章の最後に」という、Webサイトとして理想的な動きをたった一つの設定で実現できるのです。


<style>
	.site-layout-long {
		display: grid;
		min-height: 100vh;
		grid-template-rows: auto 1fr auto;
	}
	.header-box { background: #ffc6ff; padding: 15px; }
	.content-box { background: #f0f0f0; padding: 20px; }
	.footer-box { background: #9bf6ff; padding: 15px; }
</style>

<div class="site-layout-long">
	<div class="header-box">ロゴやメニュー</div>
	<div class="content-box">
		<p>ここには長い文章が入ります。</p>
		<p>（ここにたくさんのテキストが続くと仮定してください）</p>
		<img src="/img/sample150-100.jpg" alt="サンプル画像">
		<p>文章が長くなっても、フッターはこの下に正しく表示されます。</p>
	</div>
	<div class="footer-box">© 2026 プログラミング初心者ガイド</div>
</div>

ブラウザ表示

5. サイドバーがある場合のフッター固定設計

次に、Webサイトによくある「サイドバー」が含まれるレイアウトでフッターを固定する方法を考えてみましょう。この場合は、縦方向の分割だけでなく、横方向の分割も組み合わせます。グリッドレイアウトを使えば、複雑な構造も「どのマス目に何を置くか」を決めるだけで簡単に組み立てられます。

全体の親要素で grid-template-areas という機能を使うと、まるで地図を描くように名前でレイアウトを指示できます。ヘッダーを一番上に、真ん中にサイドバーとメインを横並びにして、一番下にフッターを配置します。この時も全体の高さを 100vh に設定し、真ん中の行を 1fr にすることで、サイドバーとメインが協力してフッターを下に押し下げてくれます。


<style>
	.full-page-grid {
		display: grid;
		min-height: 100vh;
		grid-template-columns: 150px 1fr;
		grid-template-rows: auto 1fr auto;
		/* 名前で場所を指定する「地図」の設計 */
		grid-template-areas:
			"head head"
			"side main"
			"foot foot";
	}
	.site-header { grid-area: head; background: #e2e2e2; padding: 10px; }
	.site-sidebar { grid-area: side; background: #ffd6a5; padding: 10px; }
	.site-main { grid-area: main; background: #fdffb6; padding: 10px; }
	.site-footer { grid-area: foot; background: #caffbf; padding: 10px; }
</style>

<div class="full-page-grid">
	<header class="site-header">Webサイトのヘッダー</header>
	<nav class="site-sidebar">メニュー</nav>
	<main class="site-main">サイドバーがあってもフッターは下に固定されます。</main>
	<footer class="site-footer">便利なフッター</footer>
</div>

ブラウザ表示

6. 注意！親要素の高さ設定を忘れずに

「コードを真似したのにフッターが浮いたままになる」というトラブルで一番多い原因は、親要素の高さを指定し忘れていることです。 site-container などの親要素に対して、必ず min-height: 100vh; を書き込むようにしましょう。これがないと、親要素自体が中身に合わせて短くなってしまい、グリッドの魔法が効かなくなります。

また、ブラウザによっては最初から body タグに余計な余白（マージン）がついていることがあります。これもレイアウト崩れの原因になるため、CSSの冒頭で body { margin: 0; } と書いて、余白をリセットしておくと安心です。パソコン操作に慣れていない方は、まずはお手本通りのコードをそのまま貼り付けてみて、少しずつ自分好みの色や幅に変えていくのが上達への近道です。

7. スマートフォンでの見え方（レスポンシブ）を確認

最近はパソコンよりもスマートフォンでWebサイトを見る人の方が多いです。今回のグリッドを使ったフッター固定方法は、スマホでもそのまま威力を発揮します。画面が狭いスマホでは、 grid-template-columns: 1fr; （1列にする）という設定に変えるだけで、縦にきれいに並んだまま、フッターを一番下に置くことができます。

CSS Gridは、このような画面サイズに合わせた変更（レスポンシブデザイン）も得意としています。まずは基本の固定方法をマスターして、どんな端末で見ても美しい、プロのような仕上がりを目指しましょう。一度この「1fr」の便利さを知ってしまうと、もう古い方法には戻れなくなるはずです。プログラミングは難しく感じることもありますが、こうした便利な道具を使いこなすことで、あなたのやりたいことがどんどん形になっていきますよ！

8. 最後にコードを清書して完成させよう

ここまでの知識を詰め込んだ、最終的な完成版コードを作成します。これがあなたのWebサイトの「土台（テンプレート）」になります。ヘッダー、メイン、フッターの3つの要素をしっかり分け、全体の高さをコントロールする。この基本を忘れずに、素敵なWebページを制作してみてください。CSSの世界は奥深いですが、基本さえ押さえれば自由自在にデザインを操れるようになります！


<style>
	/* 基本のリセット設定 */
	body { margin: 0; padding: 0; }

	/* ページ全体の構造 */
	.wrapper {
		display: grid;
		min-height: 100vh;
		grid-template-rows: auto 1fr auto;
		font-family: "Meiryo", sans-serif;
	}

	header { background: #333; color: white; padding: 1rem; text-align: center; }
	main { padding: 2rem; line-height: 1.6; }
	footer { background: #eee; padding: 1rem; text-align: center; font-size: 0.8rem; }
</style>

<div class="wrapper">
	<header>
		<h1>マイ・ウェブサイト</h1>
	</header>
	<main>
		<h2>ようこそ！</h2>
		<p>CSS Gridを使えば、レイアウトがとっても簡単になります。</p>
		<p>このメインコンテンツの量が少なくても、フッターは一番下に留まります。</p>
	</main>
	<footer>
		<p>Copyright © 2026 My Website. All rights reserved.</p>
	</footer>
</div>

ブラウザ表示