Documentation CSS

この記事で学べること

  • gapプロパティの概念と目的
  • px、%、em、remなどの各単位の使い分け
  • GridとFlexboxでの活用方法
  • row-gapとcolumn-gapの個別設定
  • レスポンシブデザインでの応用

概要

gapは、CSSのGridやFlexboxレイアウトでアイテム間のスペースを簡単に調整するためのプロパティです。このプロパティを使用すると、行間（row-gap）とカラム間（column-gap）を一括で設定できるため、コードがシンプルになります。要素同士が密集しすぎないようにしたり、余白を均等に設定して視覚的なバランスを保つ際に非常に便利です。

gapの基本

構文

.container {
display: grid; /* または flex */
gap: <長さ>;
}
  • <長さ>：要素間のスペースを指定する値です。px、%、em、remなどの単位が使用できます。

主な単位

  1. px（ピクセル） 固定幅のスペースを指定します。
  2. %（パーセント） コンテナのサイズに対する割合でスペースを指定します。
  3. em / rem フォントサイズに基づいてスペースを指定し、文字の大きさに応じた隙間を設定できます。
  4. その他の単位 vh、vw（ビューポートの高さ・幅）や、ex、ch（フォントに関連する単位）も使用可能です。

各単位の詳細と使用例

ピクセル（px）による固定幅

ピクセル単位は、具体的な数値で固定されたスペースを作成します。視覚的に一貫した隙間を保つのに最適です。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* 各アイテム間に20pxのスペース */
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

この例では、各アイテム間に20pxのスペースが設定されます。

パーセント（%）による割合指定

パーセント単位を使うと、コンテナ全体のサイズに応じてスペースが変動し、レスポンシブデザインに適しています。

.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5%; /* コンテナのサイズの5%を各アイテム間のスペースとして設定 */
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>

この場合、要素間のスペースはコンテナのサイズに比例して変わります。

em / remによるフォント基準のスペース設定

emやremは、フォントサイズを基準にスペースを設定でき、文字の大きさに応じて自動的に調整されます。

.container {
display: flex;
gap: 1.5em; /* フォントサイズの1.5倍のスペースを設定 */
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
</div>

この例では、各アイテム間にフォントサイズの1.5倍のスペースが設けられます。

gridとflexでのgapの適用例

gapプロパティは、GridだけでなくFlexboxレイアウトでも使用できます。以下の例では、フレックスボックスのアイテム間にスペースを設定しています。

.container {
display: flex;
gap: 10px; /* Flexboxでのアイテム間の隙間 */
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

この設定により、各アイテム間に10pxのスペースが適用されます。

使用シーンと注意点

  • カードやギャラリーのレイアウト
    gapを使用することで、アイテム同士の距離が均等になり、見た目が整ったレイアウトを簡単に作成できます。
  • ナビゲーションメニュー: メニュー項目の間にスペースを設けることで、項目同士が視覚的に分離され、読みやすさが向上します。
  • レスポンシブデザイン
    %やemなどの相対単位を使用することで、異なるデバイスに適応した柔軟なレイアウトが実現できます。

注意点

  • 旧ブラウザでのサポート
    gapプロパティは古いブラウザではサポートされていない場合があるため、レガシーサポートが必要な場合は互換性に注意が必要です。
  • 適切なスペースの確認: 視覚的なバランスを確認しながらスペースを設定することが重要です。特にレスポンシブなデザインでは、画面サイズごとに調整することをおすすめします。

まとめ

gapプロパティは、CSSのGridおよびFlexboxレイアウトで要素間の隙間を調整するための便利なツールです。様々な単位を使用することで、視覚的に美しく、使いやすいレイアウトを簡単に実現できます。従来のgrid-row-gapやgrid-column-gapのように個別の設定をする必要がなく、コードの簡素化にも役立ちます。デザインに応じた隙間を適切に設定し、より洗練されたWebデザインを作成してみてください。

ポイントの振り返り

値説明使用例
px固定幅のスペース一貫したデザイン
%コンテナ比率レスポンシブ対応
em/remフォント基準文字サイズ連動
row-gap行間のみ指定個別制御
column-gap列間のみ指定個別制御

関連プロパティ

プロパティ説明
row-gap行間のスペース
column-gap列間のスペース
grid-gapgapの旧名称

参考文献

円