4年前、私は「Minding the Gap」というタイトルの記事を書きました。ここでは、CSS Gapプロパティについて話しました。

當時、GAPプロパティを使用して、フレックス、グリッド、またはマルチカラムレイアウトで均等にスペースアイテムを出力するのがどれほど簡単かを説明しました。しかし、私はまた、ギャップエリアをスタイリングすることははるかに困難であると言い、回避策を共有しました。

ただし、余分なHTML要素、擬似エレメント、または境界を使用してセパレーターラインを描くなどの回避策、特にレイアウトサイズに影響を與えるもの、支援技術(shù)に干渉する、またはスタイルのみの要素でマークアップを汚染するものです。

今日、I＆https：//www.miracleart.cn/link/93ac0c550dd620dc7b88e5fe05c70e15b8217; mレイアウトギャップについて再び書いていますが、今回は、新しいエキサイティングなCSS機能についてすべてを伝えるために＆https：//www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; sすべてを変更します。以前に回避策を使用する必要がありましたが、すぐに、レイアウトアイテム間にスタイルのセパレーターを表示するために簡単でありながらも柔軟にするいくつかの単純なCSSプロパティを使用することができます。

https：//www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; s既に熟読できる機能の仕様ドラフトがあります。 I＆https：//www.miracleart.cn/link/93ac0c0c50dd620dc7b88e5fe05c70e15b8217; mこれを書くと、旗の後ろでChromeとEdge 139で利用可能です。しかし、私はそれが勝ったと信じています＆https：//www.miracleart.cn/link/93ac0c05dd620dc7b88e5fe05c70e15b8217;そのフラグをオンにするまでには。他のブラウザも非常に受容的でエンゲージしていると思います。

レイアウトのアイテム間に裝飾ラインを表示すると、大きな違いが生じる可能性があります。よく使用すると、これらのラインはレイアウトにより多くの構(gòu)造をもたらし、ユーザーにページのさまざまな領(lǐng)域がどのように整理されているかについてより多くの感覚を與えます。

CSSギャップの裝飾の紹介

列幅のプロパティを使用するなど、マルチカラムレイアウトを使用したことがある場合は、Gap Decorationsに既に精通している可能性があります。列ルールプロパティを使用して、マルチカラムレイアウトの列間に垂直線を描畫できます。

記事 {
  列幅：20REM;
  カラムルール：1pxソリッドブラック。
}

CSS Gap Decorationsはこれに基づいて構(gòu)築されており、他のレイアウトタイプでセパレーターラインを簡単に描畫できるようにする、より包括的なシステムを提供します。

たとえば、ドラフトの仕様には、列ルールのプロパティもFlexBoxおよびグリッドレイアウトで機能していると述べています。

 .my-grid-container {
  ディスプレイ：グリッド;
  ギャップ：2px;
  カラムルール：2pxソリッドピンク。
}

余分な要素や境界線は必要ありません！ここでの重要な利點は、裝飾がCSSのみで発生し、それが屬し、セマンティックマークアップに影響を與えないことです。

CSS Gap Decorations機能は、行間に線を描くための新しいRow-Ruleプロパティも導入します。

 .my-flex-container {
  ディスプレイ：Flex;
  ギャップ：10px;
  row-rule：10pxの點線ライムグリーン。
  柱ルール：5pxの破線のサンゴ。
}

しかし、それだけではありません。上記の構(gòu)文では、複數(shù)のコンマ區(qū)切りのラインスタイルの値を定義し、CSSグリッドが既に行および列テンプレートに使用しているのと同じ繰り返し（）関數(shù)を使用することもできます。これにより、単一のレイアウトでさまざまなスタイルのラインデコレーションを定義し、未知の數(shù)のギャップに適応することが可能になります。

 .My Container {
  ディスプレイ：グリッド;
  ギャップ：2px;
  row-rule：
    繰り返し（2、1pxダッシュレッド）、
    2pxソリッドブラック、
    繰り返し（自動、緑色の1pxを點線）;
}

最後に、CSS Gap Decorationsの機能には、Row-Rule-Rule-break、column-rule-rule-rule-rule-rule-rule-rule-rule-rule-rule-rule-rule-paint-ordなどの追加のCSSプロパティが付屬しています。

そしてもちろん、これらはすべて、Grid、FlexBox、Multi-Column、そしてすぐにMasonryを越えて機能します！

ブラウザのサポート

現(xiàn)在、CSS Gap Decorations機能は、Chromiumベースのブラウザでのみ利用できます。

この機能はまだ早い段階であり、皆さんがそれを試してみて、機能をより良くし、より適応させるのに役立つフィードバックを提供する時間があります。

今日機能を試してみたい場合は、バージョン139（またはこれらのバージョンに一致する別のクロムベースのブラウザ）から始めて、EdgeまたはChromeを使用して、次の手順に従ってフラグを有効にしてください。

1. ChromeまたはEdgeで、artount：// flagsに移動します。
2. 検索フィールドで、実験的なWebプラットフォーム機能を有効にする検索を行います。
3. フラグを有効にします。
4. ブラウザを再起動します。

これをすべて実踐するには、＆https：//www.miracleart.cn/link/93ac0c0c0dd620dc7b88e5fe05c70e15b8217; s新しいCSSギャップデコリエーション機能を使用する例を一緒に歩いてください。デモができる最後の例もあります。

CSSギャップの裝飾を使用します

シンプルなWebページを作成して、機能の使用方法を?qū)Wびましょう。これが私たちが構(gòu)築するものです：

上記のレイアウトには、タイトル付きのヘッダーセクション、いくつかのリンクを備えたナビゲーションメニュー、テキストと寫真の短い段落のシリーズを備えたメインセクション、フッターが含まれています。

次のマークアップを使用します。

<header>
  <h1>私の個人的なサイト</h1>
</header>
<nav>
  <ul>
    <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">家</a></li>
    <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">ブログ</a></li>
    <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">について</a></li>
    <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">リンク</a></li>
  </ul>
</nav>
<main>
  <article>
    <p>...</p>
  </article>
  <article>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175141927923313.jpg" class="lazy" alt="ギャップが逆立ちます：今はスタイル可能です">
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175141928053919.jpg" class="lazy" alt="ギャップが逆立ちます：今はスタイル可能です">
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175141928010441.jpg" class="lazy" alt="ギャップが逆立ちます：今はスタイル可能です">
  </article>
</main>
<footer>
  <p>?2025 Patrick Brosset</p>
</footer>

まず、要素をグリッドコンテナにすることから始めます。これにより、スペースを出すことができます

體 {
  ディスプレイ：グリッド;
  ギャップ：4rem;
  マージン：2REM;
}

次に、CSSギャップ裝飾機能を使用して、定義したギャップ內(nèi)に水平分離線ラインを表示しましょう。

體 {
  ディスプレイ：グリッド;
  ギャップ：4rem;
  マージン：2REM;
 
  row-rule：1REMソリッドhttp://www.miracleart.cn/link/93ac0c0dd620dc7b88e5fe05c70e15befef;
}

これにより、次の結(jié)果が得られます。

最初の水平線を他の2つの線とは異なるように見えることで、少し良くなり、Repeat（）構(gòu)文を使用してRow-Rule値を簡素化できます。

體 {
  ディスプレイ：グリッド;
  ギャップ：4rem;
  マージン：2REM;
 
  row-rule：
    1REMソリッドhttp://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15befefef、
    繰り返し（2、2px Solid http://www.miracleart.cn/link/93ac0c0dd620dc7b88e5fe05c70e15befefef）;
}

この新しいRow-Ruleプロパティ値を使用すると、ブラウザに最初の水平セパレーターを1レムの厚さのラインとして描畫し、次の2つのセパレーターを2pxの厚さのラインとして描畫するように指示しています。

それでは、ナビゲーション要素とそのリンクのリストに注意を向けましょう。 FlexBoxを使用して、1つの行にリンクを表示します。各リンクは、ギャップと垂直線によって他のリンクから分離されます。

 nav ul {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  ギャップ：2レム;
  列rule：2pxダッシュhttp://www.miracleart.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b666;
}

以前のRow-Ruleプロパティの使用方法と非常に同様のことで、列ruleプロパティを使用して、リンク間に厚さ2pxの破壊されたセパレーターを表示しています。

私たちの例のWebページは今、次のようになります：

変更する必要がある最後のことはです

主要 {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  ギャップ：4rem;
}


Main> * {
  フレックス：1 1 200px;
}


主な記事：has（p）{
  フレックスベイズ：400px;
}

上記のコードスニペットでは、設(shè)定しています

CSSギャップの裝飾を使用して、レイアウトの行と列の間に2pxの厚さセパレーターラインを描畫することにより、レイアウトにもう少し構(gòu)造をもたらしましょう。

主要 {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  ギャップ：4rem;
  row-rule：2px solid http://www.miracleart.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b999;
  列rule：2px solid http://www.miracleart.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b999;
}

これにより、次の結(jié)果が得られます。これは、予想されるデザインに非常に近いものです。

変更したい最後の詳細は、垂直線に関連しています。フレックスラインの高さ全體にまたがるのではなく、コンテンツが起動して停止する場所を開始して停止することを望みません。

CSSギャップの裝飾を使用すると、カラムルールアウトセットプロパティを使用して、ギャップエリアに対して裝飾がどこから始まり、終了するかを正確に微調(diào)整することで、これを簡単に実現(xiàn)できます。

主要 {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  ギャップ：4rem;
  row-rule：2px solid http://www.miracleart.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b999;
  列rule：2px solid http://www.miracleart.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b999;
  列ルールアウトセット：0;
}

上の列ルールの出版物プロパティにより、垂直柱セパレーターは各行の高さに及びます。ギャップエリアを除く。これは私たちが望むものです。

そして、それで、私たちは例を挙げています。ライブの例とソースコードをご覧ください。

もっと詳しく知る

この機能にはもっとありますが、以前にさらにいくつかのCSSプロパティについて言及しました

• Gap-Rule-Paint-Orderは、裝飾、列、または柱のどれを制御できるようにすることができます。
• 交差點で裝飾ラインの動作を設(shè)定するRow-rule-break / column-rule-break 。特に、交差點で開始および終了する複數(shù)のセグメントで作られているか、単一の連続線で作られているかどうか。

この機能は新しいため、MDNドキュメントはまだありません。詳細については、チェックしてください。

• CSSギャップ裝飾モジュールレベル1（最初の公開ドラフト）
• Microsoft Edge説明者

Edgeチームは、視覚コントロールを使用してギャップの裝飾を構(gòu)成できるインタラクティブな遊び場も作成しました。

そして、もちろん、これがすべてフラグの背後に実裝されている理由は、あなたのような開発者からのフィードバックを引き出すことです！この機能に関するフィードバック、質(zhì)問、またはバグがある場合は、Chromium Issueトラッカーに新しいチケットを開くことをお勧めします。

以上がギャップが逆立ちます：今はスタイル可能ですの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。