CSS の gap でスペースを追加して Web レイアウトを強化する方法

概要

CSS の gap は、要素間のスペースを定義する汎用的なプロパティです。
gap は、行と列のギャップを定義するために 2 つの値をとることができるショートカットプロパティです。
gap は、フレックスボックス、グリッド、複数列レイアウトで使用できます。

CSS は、絶対配置からグリッドベースのデザインまで、Web ページ上の要素をレイアウトする方法を数多く提供しています。要素の周囲と要素間のスペースも同様に重要であり、ここでも多くのオプションがあります。gap プロパティは空白を導入するのに便利で汎用的な方法であり、いくつかの異なるレイアウトスキームで使用できます。

gap とは

CSS のgapは、デザインレイアウトのスペースを定義するのに役立つ、シンプルだが不可欠なスタイルプロパティです。要素にスペースを与えることは、満足のいく効果的なグラフィックデザインを適用するために適用すべき、構図の黄金律の 1 つです。

このプロパティを使用すると、次の 3 つのレイアウト形式で項目間のギャップのサイズを指定できます。

フレキシブルボックスレイアウト（「フレックスボックス」）
グリッドレイアウト
複数列レイアウト

最新のブラウザはすべて、marginやpaddingなどのボックスモデルプロパティを補完する gap プロパティをサポートしています。

CSS の gap プロパティの書き方

gap プロパティの基本的な構文は次のとおりです。

gap: <row-gap> <column-gap>;

各値は長さまたはパーセンテージをとることができ、column-gapは省略可能です。省略すると、単一の値が行と列の両方に適用されます。つまり:

gap: 10em;

...は行と列の両方が現在のフォントサイズの 10 倍のギャップを持つことを意味し、一方:

gap: 20px 10%;

...は、行のギャップが 20 ピクセル、列のギャップが親要素の幅の 1/10 になります。

gapは、コンテナ内の要素ではなく、レイアウトを定義するコンテナ要素で使用します。このプロパティは、より複雑で可変的なスペースではなく、項目間の均一なスペースを作成することを目的としています。

gap をフレックスボックスで使用

gapを使用して、フレックスレイアウトによって作成された行と列の間のスペースを制御できます。レイアウトで使用される flex-direction によって、行ギャップまたは列ギャップが適用されるかどうかが決まります。

デフォルトでは、通常の行方向では、フレックスコンテナ内の項目が隣り合って表示されます。したがって、この単純な CSS は次のようになります。

.flex-layout {
display: flex;
}
.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}

このレイアウトを生成します:

コンテナ内の各項目は、スペース設定にクラシックなボックスモデルプロパティ（パディングとマージン）を使用することに注意してください。ギャップを追加:

.flex-layout { gap: 20px; }

フレックス項目の間のスペースは増えますが、その周囲のスペースは増えません:

フレックスレイアウトが項目を列と行の両方で表示する場合（たとえば、項目を折り返す場合）:

.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}

両方のギャップの効果が表示されます:

marginやjustify-contentなどの他のプロパティが、項目間のスペースに影響を与える可能性があることに常に注意してください。スペースに影響を与える可能性のある他のすべてのプロパティを明示的に制御しない限り、gap は最小値であると考えてください。

gap をグリッドで使用

gap はグリッドレイアウトでも使用できます。主な違いは、グリッドは 2 次元レイアウトに適しているため、通常は行と列の両方のギャップを指定したいと思うことです。

フレックスレイアウトと同様に、グリッドはデフォルトで項目を隣接して表示しますが、パディングとマージンを使用して各項目の周囲のスペースを制御できます:

.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}
.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}

結果は、典型的なグリッドレイアウトです:

ギャップを追加:

.grid-layout {
gap: 80px 40px;
}

各項目の間にスペースが挿入されます:

行と列の個別の値がここでどのように適用され、列の間のギャップ（40px）の 2 倍のサイズの行間のギャップ（80px）が作成されることに注意してください。単一の値を使用する場合、行と列の間に同じギャップを定義することになることを忘れないでください。

gap を複数列レイアウトで使用

gap プロパティは列レイアウトでも使用できますが、この場合は単一の値のみが関連します。行はありません。複数列レイアウトにはデフォルトのギャップがあります:

.column-layout {
column-count: 3;
}

しかし、それは非常に小さく、1emのサイズです:

これは、フォントを変更する場合、特にテキストを調整する場合に特に顕著です。

.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}

gap を指定することで、列の間のスペースを増やし、より余裕を持たせることができます。

.column-layout {
gap: 2em;
}

列の幅などの他の要素によっては、2em または 3em でもより読みやすい結果が得られる場合があります。

Google Chrome の Dev Tools などのブラウザユーティリティを使用してレイアウトを確認し、gap や margin などのプロパティがレイアウトにどのように影響するかを確認できます。

gap に 2 つの値を使用する場合は、正しい順序になっていることを確認してください。「行、列」の順序は直感的ではないかもしれませんが、パディングやマージンなどの他のショートカットプロパティの順序と一致します。

gap の正確な使い方は、適用するレイアウトスキームによって異なります。ただし、一般的には、項目の周りにではなく、項目間に一定の間隔が必要な場合に gap を使用します。

パソコンの友達