CSS Gridテンプレート集！よく使うWebレイアウトの作り方

1. 定番中の定番！聖杯レイアウトのテンプレート

1. 定番中の定番！聖杯レイアウトのテンプレート

Webデザインの世界には「聖杯（Holy Grail）レイアウト」と呼ばれる、非常に人気のある形があります。これは、上にヘッダー、下にフッター、そして真ん中に「左サイドバー・メインコンテンツ・右サイドバー」の3つが並ぶ構成のことです。一見すると複雑そうですが、CSS Gridを使えばパズルのように簡単に組み立てられます。

プログラミング未経験の方にとって、これまでの手法では左右の高さがズレたりと大変でしたが、グリッドなら「ここからここまではヘッダー」と指定するだけで、ピシッと整ったデザインが完成します。まずはこの最もバランスの取れた形からマスターしましょう。

<style>
	.holy-grail {
		display: grid;
		grid-template-columns: 150px 1fr 150px;
		grid-template-rows: auto 1fr auto;
		min-height: 100vh;
	}
	header, footer {
		grid-column: 1 / 4;
		background: #333;
		color: #fff;
		padding: 10px;
		text-align: center;
	}
	.nav { background: #ffd6a5; padding: 10px; }
	.main { background: #fdffb6; padding: 10px; }
	.aside { background: #caffbf; padding: 10px; }
</style>

<div class="holy-grail">
	<header>ヘッダー（共通メニュー）</header>
	<div class="nav">左メニュー</div>
	<div class="main">メイン記事エリア</div>
	<div class="aside">右広告エリア</div>
	<footer>フッター（コピーライト）</footer>
</div>

2. タイル状に並べる！カードギャラリーのテンプレート

2. タイル状に並べる！カードギャラリーのテンプレート

次に、商品一覧や写真ギャラリーでよく使われる「タイル状（グリッド状）」のレイアウトです。これは、同じ大きさの箱を縦横にきれいに並べるデザインです。ここでのポイントは repeat(auto-fit, minmax(200px, 1fr)) という魔法の合言葉を使うことです。

この言葉を使うと、画面が広いときはたくさん並び、画面が狭くなると自動で数を減らして折り返してくれます。これを「レスポンシブデザイン」と呼びますが、難しい計算なしでブラウザが勝手に調整してくれるので、パソコン操作に不慣れな方でもプロのようなギャラリーサイトが作れます。

<style>
	.gallery {
		display: grid;
		/* 最小200px、最大1frで自動で詰め込む設定 */
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
		padding: 10px;
	}
	.card {
		background: white;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
		text-align: center;
	}
	.card img { width: 100%; height: auto; }
	.card p { padding: 10px; margin: 0; }
</style>

<div class="gallery">
	<div class="card"><img src="/img/sample150-100.jpg"><p>作品 1</p></div>
	<div class="card"><img src="/img/sample150-100.jpg"><p>作品 2</p></div>
	<div class="card"><img src="/img/sample150-100.jpg"><p>作品 3</p></div>
</div>

3. 雑誌のようなオシャレ感！不規則なグリッド配置

3. 雑誌のようなオシャレ感！不規則なグリッド配置

全ての箱が同じ大きさである必要はありません。グリッドレイアウトでは「1番目の箱だけ2マス分使う」といった指定も自由自在です。これにより、雑誌の誌面のような動きのあるオシャレなレイアウトが可能になります。これを「エリアの結合」と呼びます。

例えば、最新のニュースを大きく見せたいときなどに、特定の要素だけを grid-column や grid-row で広げます。まるで、方眼紙のマス目をペンで囲って大きな枠を作るような感覚です。この自由度の高さこそが、CSS Gridが多くのデザイナーに愛されている理由の一つです。

<style>
	.magazine {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	.item { background: #a0c4ff; padding: 20px; text-align: center; border: 1px solid #333; }
	/* 1番目の要素だけ横に2マス分広げる */
	.item-featured {
		grid-column: span 2;
		background: #ffadad;
		font-weight: bold;
	}
</style>

<div class="magazine">
	<div class="item item-featured">注目の記事（2マス使用）</div>
	<div class="item">記事A</div>
	<div class="item">記事B</div>
	<div class="item">記事C</div>
	<div class="item">記事D</div>
</div>

4. 名前で指定する直感的なレイアウト設計

4. 名前で指定する直感的なレイアウト設計

コードの中に数字が出てくると混乱してしまう方には、grid-template-areas を使った方法がおすすめです。これは、レイアウトの構成を「名前」で指定する方法です。例えば、CSSの中に「ここにはヘッダー、ここにはサイド、ここにはメイン」と文字で地図を描くように記述します。

この方法の素晴らしい点は、コードを読んだだけでどこのパーツがどこに配置されるかが一目でわかることです。プログラミング初心者の方でも、地図を書き換える感覚でレイアウトを調整できるので、ミスが少なくなります。特に大規模なサイトを作るときに、非常に管理がしやすくなるテクニックです。

5. サイドバー付きブログ形式のテンプレート

5. サイドバー付きブログ形式のテンプレート

個人ブログや企業のニュースサイトで最も多く使われる「2カラム」の形式です。左側にメインの記事、右側にプロフィールやカテゴリーなどのサイドバーを置く形です。ここでは、サイドバーの幅を「300px」に固定し、メイン記事の部分を「残りの幅全部（1fr）」にする設定がよく使われます。

この設定の利点は、画面が広いときでもサイドバーが必要以上に大きくならず、読みやすさを保てることです。逆に、スマホで見たときの設定（レスポンシブ）については後の学習で学びますが、まずはこの「比率を変えた横並び」を自分のものにしましょう。非常に汎用性が高く、どんなサイトにも応用できます。

<style>
	.blog-layout {
		display: grid;
		/* メインを広く(1fr)、サイドバーを300pxに固定 */
		grid-template-columns: 1fr 200px;
		gap: 30px;
		max-width: 1000px;
		margin: 0 auto;
	}
	.content { background: #fff; border: 2px solid #eee; padding: 20px; }
	.sidebar { background: #f9f9f9; border: 1px solid #ddd; padding: 15px; }
</style>

<div class="blog-layout">
	<div class="content">
		<h2>記事のタイトル</h2>
		<p>ここにブログの本文が入ります。メインエリアは広く確保されます。</p>
	</div>
	<div class="sidebar">
		<h3>プロフィール</h3>
		<p>管理人の紹介など。</p>
	</div>
</div>

6. テンプレートを上手に使うための学習のコツ

6. テンプレートを上手に使うための学習のコツ

今回紹介したテンプレートは、そのままコピーして使うだけでもWebサイトとして機能します。しかし、一番の上達法は「数字や色を少しだけ変えてみること」です。例えば、 gap: 20px; を 50px; に変えて、隙間がどう広がるかを確認してみてください。

パソコンの操作に慣れていないと「コードを壊してしまったらどうしよう」と不安になるかもしれませんが、CSSは何回書き直しても大丈夫です。むしろ、失敗して表示が崩れる経験こそが、グリッドの仕組みを深く理解するための貴重な一歩になります。まずはテンプレートをベースに、自分好みのデザインにカスタマイズする楽しさを味わってください。これらの基礎が、将来的にオリジナルの素晴らしいWebサイトを作るための強力な武器になります！

7. 余白（Gap）と整列（Align）でプロの仕上がりに

7. 余白（Gap）と整列（Align）でプロの仕上がりに

最後に、テンプレートをより美しく見せるための「仕上げ」についてお話しします。グリッドには gap プロパティ以外にも、中身の要素を「上下左右のどこに寄せるか」を決めるプロパティがあります。例えば、 align-items: center; を使うと、背の高さが違う箱同士をきれいに中央で揃えることができます。

Webデザインの良し悪しは、こういった細かい「整列」で決まります。テンプレートを使って大まかな配置ができたら、次は中身の文字や画像が美しく並んでいるかを確認してみましょう。CSS Gridは、単に箱を並べるだけでなく、その中の美しさを保つための機能もたくさん備わっています。一つ一つの設定が、あなたのサイトを訪問する人にとっての「見やすさ」に直結します。ぜひ、優しさとこだわりを持って、グリッドを使いこなしてみてくださいね。