CSSのgapでフレックスボックスやグリッドレイアウトの要素間の余白を簡単に設定する方法をわかりやすく解説

2024.09.14
スポンサーリンク

CSSのgapプロパティは、主にフレックスボックスやグリッドレイアウトにおける要素間の余白を簡単に設定するためのプロパティです。以下に主要な値とその効果をリストでまとめ、その後に各値についての表示例を詳しく解説します。

スポンサーリンク

gapプロパティの値とその効果の一覧

  • gap: 10px – 要素間に10pxのスペースを設定します。
  • gap: 20px – 要素間に20pxのスペースを設定します。
  • gap: 0px – 要素間のスペースをゼロにします。
  • gap: 0 30px – 列間に30pxのスペースを設定しますが、行間にはスペースを設定しません。
  • gap: 50px 0 – 行間に50pxのスペースを設定しますが、列間にはスペースを設定しません。

注意点や関連情報

gapプロパティは、フレックスボックスやグリッドコンテナ内でのみ機能します。通常のブロック要素には効果がありません。また、従来のmarginやpaddingで設定する余白と異なり、要素間のみに影響します。従って、gapはレイアウト全体の調整を行うために使用されますが、個別の要素には影響を与えません。

gapプロパティが効かない時の原因と対策

gapプロパティがサポートされていないレイアウトを使用している

gapプロパティは、CSSグリッドレイアウトやフレックスボックスレイアウトにおいて、子要素間の間隔を指定するために使用されますが、これら以外のレイアウトでは効果がありません。
対策: gapプロパティが適用されるレイアウトか確認してください。グリッドレイアウト（display: grid;）やフレックスボックスレイアウト（display: flex;）で使用することで、gapが正しく適用されます。

共通するCSSコード

<style>
    .css-sample-container {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
    }

    .css-sample-item {
      background-color: #cce7ff;
      border: 1px solid #99ccff;
      padding: 20px;
      margin: 0px;
      width: 100px;
      text-align: center;
    }
  </style>

gap: 10px

要素間に10pxのスペースを設定することで、要素同士が程よい間隔で並びます。デフォルトのスペースより少し広めで、見やすいレイアウトを作るのに適しています。

HTMLコード

<div class="css-sample-container css-sample-gap-10px">
    <div class="css-sample-item">1</div>
    <div class="css-sample-item">2</div>
    <div class="css-sample-item">3</div>
    <div class="css-sample-item">4</div>
  </div>

CSSコード

<style>
    .css-sample-gap-10px {
      gap: 10px;
    }
  </style>

表示結果

1
2
3
4

gap: 20px

20pxのスペースは、より余裕のあるレイアウトを作成します。特に多くの要素を並べた場合に、見やすさが向上します。

HTMLコード

<div class="css-sample-container css-sample-gap-20px">
    <div class="css-sample-item">1</div>
    <div class="css-sample-item">2</div>
    <div class="css-sample-item">3</div>
    <div class="css-sample-item">4</div>
  </div>

CSSコード

<style>
    .css-sample-gap-20px {
      gap: 20px;
    }
  </style>

表示結果

1
2
3
4

gap: 0px

スペースをゼロにすることで、要素同士が密接に並びます。この設定は、デザイン上スペースを取りたくない場合に使います。

HTMLコード

<div class="css-sample-container css-sample-gap-0px">
    <div class="css-sample-item">1</div>
    <div class="css-sample-item">2</div>
    <div class="css-sample-item">3</div>
    <div class="css-sample-item">4</div>
  </div>

CSSコード

<style>
    .css-sample-gap-0px {
      gap: 0px;
    }
  </style>

表示結果

1
2
3
4

gap: 0 30px

列間に30pxのスペースを設け、行間にはスペースを設けません。この設定は横方向のスペースを強調したい場合に有効です。

HTMLコード

<div class="css-sample-container css-sample-gap-column-30px">
    <div class="css-sample-item">1</div>
    <div class="css-sample-item">2</div>
    <div class="css-sample-item">3</div>
    <div class="css-sample-item">4</div>
  </div>

CSSコード

<style>
    .css-sample-gap-column-30px {
      gap: 0 30px;
    }
  </style>

表示結果

1
2
3
4

gap: 50px 0

行間に50pxのスペースを設け、列間にはスペースを設けません。この設定は縦方向のスペースを強調したい場合に有効です。

HTMLコード

<div class="css-sample-container css-sample-gap-row-50px">
    <div class="css-sample-item">1</div>
    <div class="css-sample-item">2</div>
    <div class="css-sample-item">3</div>
    <div class="css-sample-item">4</div>
  </div>

CSSコード

<style>
    .css-sample-gap-row-50px {
      gap: 50px 0;
    }
  </style>

表示結果

1
2
3
4

まとめ

  • gapプロパティは、要素間の余白を簡単に調整するために使用されます。
  • フレックスボックスやグリッドレイアウト内で使用されることが主です。
  • gapは要素の外側ではなく、要素間のスペースを設定します。
  • 数値を指定することで、行や列ごとにスペースを調整することができます。
スポンサーリンク