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

生徒

「Webサイトを作るとき、サイドバーの幅は固定して、メインの記事部分は画面の大きさに合わせて伸び縮みさせたいのですが、どうすればいいですか？」

先生

「それは『CSS Grid』の得意分野ですね！固定の長さ、中身に合わせる自動の長さ、そして余った分を分け合う割合の長さを自由に組み合わせることができます。」

生徒

「いろいろな単位を混ぜても大丈夫なんですか？計算が大変そうに見えますが……。」

先生

「大丈夫ですよ。ブラウザが自動で計算してくれる魔法のような書き方があるんです。まずは基本の考え方から解説しますね！」

1. CSS Gridで使われる3つの長さの考え方

Webページのレイアウトを設計する際、マス目の幅を決める方法は大きく分けて3つあります。1つ目は「絶対にこの幅！」と決める固定幅、2つ目は「入っている文字や画像の大きさに合わせる」自動幅、3つ目は「画面の余ったスペースを分け合う」割合幅です。

プログラミング未経験の方にとって、これらを使い分けるのは難しく感じるかもしれませんが、料理の盛り付けをイメージしてみてください。お皿のサイズ（画面幅）が変わっても、メインのハンバーグの大きさ（固定幅）は変えず、添え物の野菜（自動幅）は量に合わせて調整し、ソース（割合幅）で余白を埋める、といった具合に役割を分担させるのです。これらを「grid-template-columns」というプロパティ一つで設定できるのが、現代のCSSの凄いところです。

2. 固定幅（px）で絶対に動かないエリアを作る

まずは固定幅です。これは「px（ピクセル）」という単位を使って指定します。ピクセルとは、パソコンの画面を構成する最小の点のことです。例えば「200px」と指定すれば、パソコンで見てもスマホで見ても、そのエリアは必ず200ピクセルの幅になります。

サイドバーの広告枠や、決まったサイズのロゴを表示したいときに非常に便利です。周囲がどれだけ伸び縮みしても、ここだけは頑固にサイズを守り続けます。初心者の方は、まず「動かしたくないもの」を見つけて、そこにpxを割り当てることから始めてみましょう。


<style>
    .fixed-container {
        display: grid;
        /* 左側を200px固定、右側を残りの全幅にする */
        grid-template-columns: 200px 1fr;
        gap: 10px;
        background-color: #f8f9fa;
    }
    .fixed-side {
        background-color: #ffadad;
        padding: 20px;
    }
    .flexible-main {
        background-color: #ffd6a5;
        padding: 20px;
    }
</style>

<div class="fixed-container">
    <div class="fixed-side">200px固定</div>
    <div class="flexible-main">ここは画面幅に合わせて伸びます</div>
</div>

ブラウザ表示

3. 自動幅（auto）で中身にピッタリ寄り添う

次に、自動幅（auto）について説明します。 auto という指定を使うと、そのマス目の中に入っている文字や画像の大きさに合わせて、ブラウザが勝手に幅を調整してくれます。

例えば、短い単語のときは細いマスになり、長い文章のときは広いマスになります。無駄な余白を作りたくないときや、ボタンの文字数に合わせて枠の大きさを変えたいときに重宝します。ただし、中身が何もないと幅が消えてしまったり、逆に中身が多すぎると広がりすぎてしまったりすることもあるので、使い所が肝心な「気配り上手」な設定です。


<style>
    .auto-container {
        display: grid;
        /* 1つ目は中身に合わせる、2つ目は余った分すべて */
        grid-template-columns: auto 1fr;
        gap: 15px;
        border: 2px solid #333;
    }
    .auto-label {
        background-color: #caffbf;
        padding: 10px;
        white-space: nowrap; /* 改行させない */
    }
    .content-area {
        background-color: #9bf6ff;
        padding: 10px;
    }
</style>

<div class="auto-container">
    <div class="auto-label">ラベル</div>
    <div class="content-area">ラベルの長さに左側が自動で合わさります</div>
</div>

ブラウザ表示

4. 割合幅（fr）で余白を柔軟に分け合う

一番の魔法の単位が fr（エフアール） です。これは「Fraction（分数、比率）」の略で、「余っているスペースをどれくらいの割合で分けるか」を決めます。

例えば 1fr 2fr と書けば、余った場所を「1：2」の比率で分け合います。画面が大きくなればその分だけ両方とも広がり、画面が小さくなれば比率を保ったまま縮みます。パーセント（%）計算と違って、pxでの固定幅を引いた後の「本当の余り」を計算してくれるので、複雑な計算を人間がする必要がありません。現代のWeb制作では欠かせない、レスポンシブデザイン（画面サイズに合わせる設計）の強力な味方です。

5. 実践！固定・自動・割合を全部組み合わせる

いよいよ、これらを一つのレイアウトに盛り込んでみましょう。左側に「固定サイズのアイコン」、真ん中に「文字数に合わせるラベル」、右側に「広く伸びる詳細説明」を並べる3カラム（3列）構成です。このようにバラバラな単位を混ぜて書くだけで、ブラウザが瞬時に計算してくれます。


<style>
    .mix-layout {
        display: grid;
        /* 固定 50px、自動、割合 1 */
        grid-template-columns: 50px auto 1fr;
        gap: 10px;
        align-items: center;
        padding: 10px;
        border: 1px dashed #666;
    }
    .icon { background: #bdb2ff; height: 50px; text-align: center; line-height: 50px; }
    .tag { background: #ffc6ff; padding: 5px 15px; border-radius: 20px; }
    .desc { background: #e2e2e2; padding: 10px; }
</style>

<div class="mix-layout">
    <div class="icon">★</div>
    <div class="tag">新着</div>
    <div class="desc">ここは余ったスペースをすべて使って表示されます。</div>
</div>

ブラウザ表示

6. レイアウト崩れを防ぐための注意点

初心者がよくやってしまうミスに、 auto を多用しすぎて中身がはみ出してしまうことがあります。 auto は非常に便利ですが、中身が巨大な画像だったり、長すぎる英単語（URLなど）が入ったりすると、親の枠を突き抜けて広がる性質があります。

これを防ぐためには、「ここは絶対にこれ以上広げたくない」という場所に固定幅（px）を使い、逆に「余った分で何とかしてほしい」という広い場所には割合幅（fr）を割り当てるのがコツです。それぞれの単位が持つ「性格」を理解して、適材適所に配置してあげましょう。もし表示がおかしくなったら、まずはどれか一つの単位を 1fr に変えてみると、解決の糸口が見つかることが多いですよ。

7. px・auto・frの使い分け黄金比

実際のWebサイト制作では、どのような組み合わせが一般的でしょうか？よく使われる「黄金比」のような組み合わせがあります。それは 200px 1fr という、固定サイドバーと可変メインコンテンツのセットです。これだけで、今の時代に合ったスマホ対応の基礎が出来上がります。

また、ナビゲーションメニューなどの場合は repeat(3, auto) を使って「文字数に合わせて3つ並べる」という使い方も人気です。最初は難しく考えず、この「黄金比」をテンプレートとして自分のコードに書き込んでみることからスタートしましょう。実際に数字をいじって画面がどう変わるかを見るのが、一番の上達法です。

8. 自由自在なグリッド設計を目指して

固定幅、自動幅、割合幅をマスターすれば、あなたのWebデザインの幅は一気に広がります。まるで積み木を組み立てるように、思い通りの場所に思い通りのサイズの箱を作れるようになるからです。パソコンに慣れていない方でも、この3つの単位の違いさえ覚えれば、プロのようなレイアウトが数行のCSSで作れるようになります。

「この部分は画面が小さくなっても形を保ちたいからpxかな？」「ここは文章がたくさん入るからfrで広げておこう」と、パーツの役割を考えながら設計を楽しんでみてください。Gridレイアウトは、あなたの想像力を形にする最高のツールです。次のステップでは、これらをさらに便利にする関数も学んでいきますが、まずはこの3つの組み合わせをしっかりと手に馴染ませていきましょう！


<style>
    /* おまけ：さらに高度な4カラムレイアウト */
    .expert-grid {
        display: grid;
        /* 左から：固定、自動、割合、割合 */
        grid-template-columns: 80px auto 1fr 2fr;
        gap: 20px;
        padding: 15px;
        background: white;
    }
    .grid-box { border: 2px solid #ddd; padding: 10px; text-align: center; }
</style>

<div class="expert-grid">
    <div class="grid-box" style="background:#ffadad">写真</div>
    <div class="grid-box" style="background:#ffd6a5">カテゴリ名</div>
    <div class="grid-box" style="background:#fdffb6">短い紹介</div>
    <div class="grid-box" style="background:#caffbf">非常に長い本文がここに入ります</div>
</div>

ブラウザ表示