ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSギャッププロパティの使用方法

CSSギャッププロパティの使用方法

Christopher Nolanオリジナル: 2025-02-08 08:39:09575ブラウズ

cssgap属性：要素間隔を簡単に制御

How to Use the CSS gap Property

コアポイント

cssgapプロパティにより、開発者は要素間の水平と垂直の間隔を簡単に制御し、多くのレイアウトの問題を解決し、マージン管理を簡素化することができます。グリッドレイアウト、フレックスボックスレイアウト、マルチコラムレイアウトと互換性があります。
gapプロパティは、行間隔と列間隔の2つの値を受け入れることができます。 1つの値のみが指定されている場合、値は行と列の両方に適用されます。間隔値は、calc()関数を使用して計算された長さ、パーセンテージ、または値の単位でもあります。
gapプロパティは、CSSグリッド、フレックスボックス、およびマルチカラムレイアウトに適しています。レスポンシブレイアウトでシームレスに動作し、ボックスの配置に応じて間隔の方向が自動的に調整されます。また、テキストコンテナをdisplay: gridに設定し、gap値を追加することにより、テキスト要素の間隔を設定することもできます。
プロパティはもともとgapと呼ばれていましたが、グリッド、フレックスボックス、マルチコラムレイアウトに適しているため、grid-gapに固執するのが最善です。ただし、場合によっては、gapやjustify-contentなどのアライメントプロパティにより、align-content値を超えてアイテムを間隔を置く可能性があります。また、gapは負の値を受け入れないことに注意してください。 gap

属性の使用について詳細に検討します。これにより、要素間隔を簡単に追加し、長年にわたって開発者を悩ませてきた多くのレイアウト問題を解決できます。

gap

属性の使用

gap

属性により、要素間に水平と垂直の間隔を追加できます。もちろん、これを達成するためにいつでも

を使用できます。ただし、最後のプロジェクトには常に余分なマージンがあるため、gapを使用するには、特にプロジェクトラップの場合は、プロジェクト間隔を設定することは面倒です。 margin margin次の画像は、左右のマージンを使用して間隔を設定する4つのDIVを示しています。

codepenの例を確認してください：

cssギャッププロパティ：ギャップの代わりにマージンを使用

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

容器の背景が右下に強調表示されていることに注意してください。

属性は、アイテム間に間隔を追加する

のみであるため、レイアウトは非常に簡単になります。以下は上記と同じレイアウトですが、今回は

の代わりにgapを使用します。 codepenの例を確認してください：cssギャッププロパティ：ギャップの速記の間隔gap margin今、右と下部に醜い余分な間隔がありません。現在、間隔はプロジェクト間のみであり、プロジェクトはコンテナ内に密接に配置されています。

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

グリッド、フレックスボックス、マルチコラムの3つの異なるレイアウトモードで

を使用できます。以下のシーケンスで各モードを紹介します。プロパティを使用するためのガイド

gapを使用するのは、gap: 10pxと同じくらい簡単です。（上記のデモでこれを行う結果を見ました。）しかし、これが何を意味するのか見てみましょう。

gap属性は、行間隔（つまり、要素の行間の間隔）と列間隔（つまり、要素列間の間隔）の2つの値を受け入れることができます。 gap: <row-gap> <column-gap></column-gap></row-gap>

How to Use the CSS gap Property

1つの値のみを指定すると、すべての行

および列に適用されます。

プロパティと

プロパティを使用して、それぞれ列間隔または行間隔を指定することもできます。 row-gap column-gap

の値は、任意の長さ（px、em、vwなど）、パーセンテージ単位、または

関数を使用して計算された値の単位にすることができます。 gap CSSグリッドでcalc()プロパティの使用方法

プロパティ

gapグリッドレイアウトを使用して

を使用して上記の例が表示されます。別のユニットを使用して別の例を試してみましょう：

gap

codepenの例を確認してください：

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

cssギャッププロパティ：グリッドでギャップを使用してください

今回は、行と列に異なるユニットを使用しました。

<p></p>の追加の利点は、レスポンシブレイアウトでシームレスに動作することです。 2つのアイテムの間に間隔を設定すると、以下の例に示すように、アイテムが並んで配置されているか、上下に配置されているかに関係なく、その間隔が適用されます。

gap codepen：

untitled

の例を確認してください上記のCodepenの下部にある0.5xボタンを押すか、ブラウザでCodepenを開き、ビューポートを広げて絞り込み、ボックスの配置に従って間隔の方向がどのように調整されるかを確認します。ここでは、行と列に適用できる

プロパティの単一の値から利益を得ます。小さな画面にライン間隔が必要ない場合は、代わりに

を設定できます。上記のCodepenでこれを試してください。 gap column-gap: 10px

グリッドレイアウトの使用方法の詳細については、CSSグリッドレイアウトガイドをご覧ください。

FlexBoxでプロパティ

の使用方法

方法 gap FlexBoxが最初に表示されたとき、

属性がなかったので、

を使用するための古くて痛い方法に目を向ける必要がありました。ありがたいことに、最新のブラウザでgapを使用することが主流であり、よくサポートされています。 margin gapグリッドで行うように使用できます：

codepenの例を確認してください：

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

CSSギャッププロパティ：flexboxでギャップを使用

Flex Project Responsive Line Breaksの場合、必要に応じて再調整され、以下の例に示すように、通常は垂直方向と水平方向の両方に整列しません。 gap

codepenの例を確認してください：

CSSギャッププロパティ：レスポンシブFlexboxレイアウトでギャップを使用

間隔を水平および垂直に整列させたい場合は、グリッドを使用するのが最善です。

グリッドと同様に、列

または

行の間の間隔を設定したい場合は、それぞれとを使用できます。 column-gap row-gapマルチコラムレイアウトで

プロパティを使用する方法

gapマルチコラムレイアウトはコンテンツを列に整理しますが、デフォルトでは、これらの列にはブラウザによって1EM間隔が設定されます。

プロパティを使用して、優先間隔幅を設定できます。

gap codepenの例を確認してください：

CSSギャッププロパティ：マルチコラムレイアウトでのギャップの使用

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

（上記のCodepenから属性を削除して、何が起こるかを確認してみてください。）

ここでは列のみを処理するため、この値を適用できる行がないため、列間隔値のみを適用します。 gap

楽しみのために、これらの列間に垂直線を追加します：

codepenの例を確認してください：

CSSギャッププロパティ：マルチコラムレイアウトでのギャップと列ルールの使用

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

は

、、column-ruleの略語であることに注意してください。 column-rule-widthcolumn-rule-style column-rule-color属性に関する有用な情報についてグリッドレイアウトの

属性はもともと

と呼ばれ、その完全なフォームはgapおよび

と呼ばれます。これらのプロパティは依然として有効ですが、グリッド、フレックスボックス、マルチカラムレイアウトに適しているため、

に固執することが最善です。 gap grid-gapマルチコラムレイアウトには、古いgrid-row-gapプロパティがありますが、これも有効です。しかし、繰り返しになりますが、すべての場合にgrid-column-gapを覚えておくのが簡単です。 gap

間隔はパーセンテージ値として設定できますが、パーセンテージは何パーセントに関連していますか？実際には多くの要因に依存しており、予測するのが難しい場合があります。仕様でこれをさらに探索できます。一般的なルールとして、自分が何をしているのか本当にわからない限り、

でパーセンテージを使用することを避けることが最善です。 column-gap gap

や~~値を超えてアイテムを間隔を空けます。ただし、小さな画面上の要素間の最小gap間隔を提供するため、~~

値は依然として便利です。 <p></p>

すべての要素の間隔を設定するために`gap`を使用してみませんか？

上記のように、

gapは、マージン間隔に関連するいくつかの迷惑な問題を解決します。これらのマージンの問題は、テキストやその他のコンテンツにも影響を与える可能性があります。たとえば、下のマージンを使用してテキスト要素（段落やタイトルなど）の間隔を設定すると、最後の要素の後に余分なマージンがあります。マージン。 CSSでこの問題を解決する簡単な方法がいくつかありますが、それでも面倒であり、一部の開発者は代わりにgapを使用することにしました。

gapを使用して、テキスト要素の間隔を設定するには、テキストコンテナをdisplay: gridに設定し、gap値を追加するだけです。

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

<p></p>、<p></p>、<h1></h1>、および<h2></h2>要素は、グリッドアイテムになりました。 Codepenの例を確認してください：<hr>CSS GAPプロパティ：GAPを使用したテキストコンテンツの間隔しかし、私たちはこれをすべきですか？ 1つの欠点は、すべての要素が同じ間隔であることであり、特にタイトル周辺の要素間の間隔を変更することが視覚的に魅力的である可能性があることです。ただし、これにを使用することは、まだ興味深いアイデアです。これをさらに探索するには、

を使用してテキスト間隔の設定に関するKevin Powellの非常に興味深いビデオをご覧ください。 gap gap要約

<p></p>プロパティは、グリッド、フレックスボックス、およびマルチカラムレイアウトを使用するときにプロジェクト間隔を設定するための便利なツールです。これにより、古い厄介な

メソッドを使用する必要がなくなります。それはデザインの創造的な方法で使用できますが、それを使いすぎないでください！ gap marginさらに読み取り

CSSグリッドレイアウトの詳細

FlexBoxレイアウトの詳細
CSSマルチカラムレイアウトの詳細
CSSボックスアライメントモジュールレベル3の仕様または
gap

プロパティfaq

gap CSS

プロパティとは何ですか？

`gap`css

属性は、

およびgapの略語属性です。グリッド、フレックス、またはマルチカラムレイアウトの行と列の間の間隔サイズを指定します。このプロパティは、視覚的に魅力的でよく構造化されたCSSレイアウトを作成するのに特に役立ちます。設計要素の一貫した間隔とアラインメントを維持するのに役立ちます。 row-gap column-gapcss

属性はどのように機能しますか？

`gap` css

プロパティは、行と列の間に間隔（スペース）サイズを設定することにより機能します。最初に提供する値は行間隔を設定し、2番目の値は列間隔を設定します。 1つの値のみを提供する場合、行と列の両方の間隔をその値に設定します。たとえば、

は行の間隔を10pxに、列の間隔を20pxに設定します。 gap

flexboxでcss`gap`属性を使用できますか？

はい、FlexBoxでCSSgap属性を使用できます。フレックスプロジェクト間で間隔を作成することができます。ただし、この機能はすべてのブラウザ、特に古いブラウザではサポートされていない場合があります。使用する前に、常にブラウザの互換性を確認してください。

と`gap`の違いは何ですか？ `grid-gap`

属性は、グリッドレイアウト専用のgrid-gapおよびgrid-row-gapの略式属性です。ただし、CSSグリッドレイアウトモジュールレベル2は、grid-column-gapをgrid-gapに置き換えました。これで、グリッド、フレックス、およびマルチカラムレイアウトにgapを使用できます。 gap

レスポンシブデザインでCSS