CSSグリッドレイアウト完全入門！display: grid の基本と使い方を初心者向けにやさしく解説
生徒
「Webページって、文字や画像がきれいに並んでますよね。どうやって配置しているんですか？」
先生
「CSSのレイアウト機能を使っています。その中でも、gridという仕組みがとても便利です。」
生徒
「gridって難しそうな名前ですが、初心者でも使えますか？」
先生
「大丈夫です。マス目に並べるイメージで考えると、とても分かりやすいですよ。」
1. CSSグリッドレイアウトとは何か
CSSグリッドレイアウトは、Webページの中身をきれいに整列させるための配置方法です。 display: grid を指定すると、画面を縦と横の線で区切ったマス目のような構造を作れます。
例えるなら、ノートに引いた方眼紙の上に文字や写真を置く感覚です。 どこに何を置くかが一目で分かり、ズレにくいのが特徴です。
CSS、グリッドレイアウト、display grid、レイアウト方法、初心者向けCSSといったキーワードは、 Web制作を始めると必ず目にします。
2. display: grid を指定する基本
グリッドレイアウトを使うには、まず親となる要素に display: grid を指定します。 親とは、中に他の要素が入っている箱のようなものです。
<style>
.container {
display: grid;
}
</style>
<div class="container">
<div>箱1</div>
<div>箱2</div>
<div>箱3</div>
</div>
この時点では、まだ縦に並ぶだけですが、グリッドの準備は整っています。
3. grid-template-columnsで横の並びを決める
grid-template-columns は、横方向のマスの数と幅を決める設定です。 難しく聞こえますが、「横にいくつ並べるか」を決めるだけです。
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
</style>
<div class="container">
<div>箱1</div>
<div>箱2</div>
<div>箱3</div>
</div>
fr は、残っている幅を均等に分ける単位です。 ここでは横に三つ、同じ大きさの箱が並びます。
4. grid-template-rowsで縦の並びを考える
縦方向のマスを決めたい場合は、grid-template-rows を使います。 これは縦に何段作るかを指定するものです。
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
}
</style>
<div class="container">
<div>箱1</div>
<div>箱2</div>
<div>箱3</div>
<div>箱4</div>
</div>
このように、表のようなレイアウトを簡単に作れるのがCSSグリッドの強みです。
5. gapで箱と箱のすき間を調整する
グリッドでは、箱同士のすき間も簡単に調整できます。 gap は、マス目とマス目の間の距離を指定するプロパティです。
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
</style>
<div class="container">
<div>箱1</div>
<div>箱2</div>
<div>箱3</div>
</div>
余白を意識することで、読みやすく見やすいWebページになります。
6. CSSグリッドが初心者におすすめな理由
CSSグリッドレイアウトは、全体の構造を最初に決められるため、 ページ作りで迷いにくいという利点があります。
パズルを組み立てるように、決まった枠に要素を置いていくだけなので、 パソコンに慣れていない方でも安心して使えます。
display grid、CSSレイアウト、初心者、Webデザイン、HTML CSSといった言葉と一緒に覚えておくと、 学習を進める際に役立ちます。
まとめ
この記事では、現代のウェブ制作において欠かすことのできないCSSグリッドレイアウト（CSS Grid Layout）の基本について詳しく解説してきました。これまで主流だったレイアウト手法と比較しても、display: grid を活用した設計は、直感的かつ強固な構造を持たせることができるため、初心者からプロのエンジニアまで幅広く支持されています。
ウェブデザインの現場では、複雑な多段組みレイアウトや、要素が規則正しく並ぶタイル状のデザインが頻繁に求められます。こうした要望に対して、以前は非常に複雑な計算やコードが必要でしたが、グリッドレイアウトの登場によって、驚くほどシンプルな記述で実現可能となりました。特に、親要素に display: grid を一行書くだけで、その中にある子要素たちが自動的に「グリッドアイテム」として整列の準備を始めるという仕組みは、効率的な制作を可能にする最大のメリットです。
また、今回の学習で重要なポイントとなった grid-template-columns や grid-template-rows は、画面を縦横に分割するための設計図のような役割を果たします。これに fr という柔軟な単位を組み合わせることで、画面サイズに応じて伸縮するレスポンシブなデザインも容易に作成できます。さらに、gap プロパティによる余白の管理は、デザインの視認性を高める上で非常に重要な役割を担っています。適切な余白があることで、ユーザーは情報を整理して受け取ることができ、結果としてウェブサイトの使いやすさ（UX）向上にも繋がるのです。
実践的なレイアウト構築の例
ここでは、これまでの復習として、画像とテキストを組み合わせた「サービス紹介セクション」のような実戦形式のコードを確認してみましょう。複数のプロパティを組み合わせることで、より実用的なウェブパーツを作成することができます。
<style>
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 20px;
background-color: #fcfcfc;
}
.service-card {
background-color: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
overflow: hidden;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.service-card img {
width: 100%;
height: 120px;
object-fit: cover;
}
.service-card-body {
padding: 15px;
}
.service-title {
font-weight: bold;
color: #333333;
margin-bottom: 10px;
display: block;
}
</style>
<div class="service-grid">
<div class="service-card">
<img src="/img/sample150-100.jpg" alt="サービス1">
<div class="service-card-body">
<span class="service-title">デザイン制作</span>
<p class="small text-muted">美しく機能的な外観をグリッドで構築します。</p>
</div>
</div>
<div class="service-card">
<img src="/img/sample150-100.jpg" alt="サービス2">
<div class="service-card-body">
<span class="service-title">コーディング</span>
<p class="small text-muted">最新のHTMLとCSSを駆使して実装を行います。</p>
</div>
</div>
<div class="service-card">
<img src="/img/sample150-100.jpg" alt="サービス3">
<div class="service-card-body">
<span class="service-title">運用保守</span>
<p class="small text-muted">公開後のサイトも大切にメンテナンスします。</p>
</div>
</div>
</div>
このように、グリッドレイアウトをマスターすれば、ウェブサイトの主要なパーツであるカード型リストやヘッダー、フッターなどの配置を自由自在に操ることができます。プログラミングやデザインの学習において、最初の一歩としてこのグリッドの仕組みを理解しておくことは、将来的に高度なフレームワークやライブラリを扱う際にも必ず大きな財産となります。
最後に、グリッドレイアウトを使いこなすためのコツは「恐れずに色々な数値を試してみること」です。最初は思い通りに並ばないこともあるかもしれませんが、ブラウザの検証ツールでグリッドの線を視覚化しながら調整を繰り返すことで、必ず感覚が身についてきます。この記事が、皆さんの素晴らしいウェブサイト制作の助けになれば幸いです。
生徒
「先生、最後まで読んでグリッドレイアウトの便利さが本当によく分かりました！あんなに複雑そうに見えていたサイトの構成も、実はシンプルなマス目の組み合わせだったんですね。」
先生
「その通りです。どんなに大きなウェブサイトも、基本は縦と横の線で分けられた区画の集合体なんですよ。グリッドの考え方を使えば、頭の中にあるイメージをそのまま形にできるようになります。」
生徒
「特に fr という単位が面白かったです。パーセント計算をしなくても、自動的に余った場所を等分してくれるなんて、計算が苦手な僕には救世主のようです！」
先生
「ははは、そうですね。以前のやり方だと余白の分を引いてから計算するなど大変でしたが、fr や gap を使えばそうした煩わしさから解放されます。これが今の時代の標準的な書き方なんですよ。」
生徒
「もっと練習して、スマホで見ても崩れないようなカッコいいサイトを作ってみたいです。まずは今回のサンプルコードを少し改造して、自分のオリジナルの並び方に挑戦してみます！」
先生
「素晴らしい意気込みですね。実際に手を動かして失敗したり成功したりすることが、一番の近道です。もし分からなくなったら、またいつでも聞いてください。楽しみながら進めていきましょうね！」
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
