CSS

CSSグリッド完全ガイド！自由自在なレイアウトを作る方法

Webページを作るとき、「この部分を左に」「この要素を大きく」など、レイアウトを細かく調整したいと思ったことはありませんか？

そんなときに便利なのが CSSグリッド（CSS Grid）です！

Flexboxが「横並び・縦並び」を簡単にするのに対し、CSSグリッドは2次元（行×列）のレイアウトを直感的に組める 仕組みです。

この記事では、CSSグリッドの基本から応用まで、未経験者でも迷わず使えるように解説していきます！

CSSグリッドとは？

CSSグリッドは、要素を行（row）と列（column）に分けて配置するレイアウト方法です。

例えば、次のようなレイアウトを簡単に作ることができます。

┌────────────────────────┐
│    ヘッダー(header)     
├────────────────────────┤
│ サイド │    メイン       │
│ バー       コンテンツ    
│(aside)│    (main)      │
├────────────────────────┤
│        フッター       　 
└────────────────────────┘

このようなレイアウトをたった数行のCSSで作ることができます！

CSSグリッドの基本

グリッドレイアウトを作成するには、親要素（コンテナ）に display: grid; を指定します。

試してみよう！

次のコードを index.html と style.css にコピペして試してみましょう！

1. HTMLファイル（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSグリッドの基本</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid-container">
        <header>ヘッダー</header>
        <aside>サイドバー</aside>
        <main>メインコンテンツ</main>
        <footer>フッター</footer>
    </div>
</body>
</html>

2. CSSファイル（style.css）

.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
}

header, aside, main, footer {
    background-color: lightgray;
    padding: 20px;
    text-align: center;
    font-weight: bold;
}

このCSSを適用すると、次のように並びます。

┌───────────────┐
│    ヘッダー    
├───────────────┤
│ サイド │ メイン  
│ バー    
├───────────────┤
│    フッター    
└───────────────┘

grid-template-columns（列の幅を指定）

grid-template-columns は、列の幅を指定するプロパティです。

例：2列のレイアウト

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr;
}

これを適用すると、1列目が固定幅（200px）、2列目が残りのスペースを自動で調整するレイアウトになります。

fr（比率で幅を指定）

fr（フレクション）は、スペースの割合を指定する単位です。

例：3等分のレイアウト

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

これを適用すると、すべての列が均等な幅になります。

読みやすいレイアウトの考え方

Webサイトのレイアウトには、「読みやすさ」を考慮する必要があります。

特に、以下の2つの視線の流れを意識すると、情報を適切に整理できます。

1. Z型レイアウト

視線がZの形に動くレイアウト。ランディングページなどでよく使われます。

┌────────────────────────┐
│ ① タイトル → ② 画像
│           
│ ③ 説明    → ④ ボタン
└────────────────────────┘

2. F型レイアウト

左上から順に読み進めるレイアウト。ブログ記事やニュースサイトでよく使われます。

① 見出し──────────
② リード文────────
③ 本文の段落───
④ 本文の段落───
⑤ 画像─────────

情報の優先度を考えたデザイン

重要な情報を目立たせるには、面積や配置を工夫することが大切です。

例：メインコンテンツを大きくする

.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

これを適用すると、メインコンテンツがサイドバーより広くなり、優先度の高い情報が目立つレイアウトになります。

まとめ

  • CSSグリッドは2次元レイアウトを作るのに最適
  • grid-template-columns で列幅を指定
  • fr を使うとスペースを柔軟に調整できる
  • Z型・F型レイアウトを意識すると読みやすいデザインになる

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。