もっと CSS を使いこなすための応用編（中編）

前編では、カスタムプロパティとアニメーションについて学びました。中編では、Flexbox と Grid レイアウトについて、さらに詳しく見ていきましょう。これらの機能を使いこなせば、複雑なレイアウトも柔軟に実現できるようになります。

3. Flexbox を極めよう

「Flexbox レイアウト入門」では、Flexbox の基本的な使い方を紹介しました。ここでは、Flexbox の理解をさらに深め、より実践的に使いこなすためのプロパティやテクニックを紹介します。

`flex-grow`, `flex-shrink`, `flex-basis`

flex-grow、flex-shrink、flex-basis は、Flex アイテムの伸縮やサイズを制御するプロパティです。

flex-grow：Flex アイテムの伸び率を指定します。コンテナに余白がある場合、flex-grow の値に応じて Flex アイテムが伸び、余白を埋めます。値が大きいほど、他のアイテムより大きく伸びます。デフォルト値は 0 で、伸びません。
flex-shrink：Flex アイテムの縮み率を指定します。コンテナが狭くなり、アイテムが収まりきらない場合、flex-shrink の値に応じて Flex アイテムが縮みます。値が大きいほど、他のアイテムより大きく縮みます。デフォルト値は 1 で、縮みます。
flex-basis：Flex アイテムの基準サイズを指定します。flex-grow や flex-shrink による伸縮が行われる前の、基準となるサイズです。デフォルト値は auto で、width や height の値が使われます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flexbox の応用</title>
    <style>
        .container {
            display: flex;
            width: 600px;
            border: 1px solid black;
        }
        .item {
            flex-basis: 100px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid red;
        }
        .item1 {
            flex-grow: 1;
        }
        .item2 {
            flex-grow: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

この例では、3 つの Flex アイテムがあり、それぞれの flex-basis は 100px です。.item1 は flex-grow: 1;、.item2 は flex-grow: 2; となっています。コンテナの幅は 600px なので、余白が 300px あります。この余白が flex-grow の値に応じて分配され、.item1 は 100px、.item2 は 200px 伸びます。

`order` で順番を自由自在に！

order プロパティを使うと、Flex アイテムの表示順序を自由に変更することができます。デフォルトでは、Flex アイテムは HTML のソースコードに記述された順序で表示されますが、order プロパティを使うと、この順序を変更できます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flexbox の order</title>
    <style>
        .container {
            display: flex;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid red;
        }
        .item1 {
            order: 3;
        }
        .item2 {
            order: 1;
        }
        .item3 {
            order: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>
</html>

この例では、.item1、.item2、.item3 の order 値がそれぞれ 3、1、2 となっています。そのため、Flex アイテムは .item2、.item3、.item1 の順に表示されます。

4. Grid を極めよう

「Grid レイアウト入門」では、Grid レイアウトの基本的な使い方を紹介しました。ここでは、Grid レイアウトの理解をさらに深め、より実践的に使いこなすためのプロパティやテクニックを紹介します。

`grid-template-areas` で名前を付けて配置

grid-template-areas プロパティを使うと、グリッドエリアに名前を付けて、レイアウトをより直感的に指定することができます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Grid の応用</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px 200px 100px;
            grid-template-areas:
                "header header header"
                "sidebar main main"
                "footer footer footer";
            gap: 10px;
        }
        .header {
            grid-area: header;
            background-color: lightblue;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: lightgreen;
        }
        .main {
            grid-area: main;
            background-color: lightyellow;
        }
        .footer {
            grid-area: footer;
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">ヘッダー</div>
        <div class="sidebar">サイドバー</div>
        <div class="main">メインコンテンツ</div>
        <div class="footer">フッター</div>
    </div>
</body>
</html>

この例では、grid-template-areas プロパティを使って、グリッドエリアに header、sidebar、main、footer という名前を付けています。そして、それぞれの要素に grid-area プロパティを使って、どのグリッドエリアに配置するかを指定しています。

`grid-gap` で余白を簡単に

grid-gap プロパティを使うと、グリッドアイテム間の余白を簡単に指定できます。

css

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 20px; /* 行と列の両方に 20px の余白 */
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    row-gap: 30px; /* 行に 30px の余白 */
    column-gap: 10px; /* 列に 10px の余白 */
}

`repeat()` や `minmax()` などの便利関数

Grid レイアウトには、repeat() や minmax() など、レイアウト指定を簡略化するための便利な関数が用意されています。

repeat()：繰り返し回数を指定できます。例えば、grid-template-columns: repeat(3, 1fr); は grid-template-columns: 1fr 1fr 1fr; と同じ意味です。
minmax()：最小値と最大値を指定できます。例えば、grid-template-columns: 1fr minmax(200px, 1fr); は、最初の列は 1fr、2 番目の列は最低 200px、最大 1fr になります。

css

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 つの列を均等幅で作成 */
    grid-template-rows: repeat(2, 100px); /* 2 つの行を 100px で作成 */
    gap: 10px;
}

.container {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 1fr); /* 最初の列は 1fr、2 番目の列は最低 200px、最大 1fr */
    grid-template-rows: 100px 200px;
    gap: 10px;
}