このページは Cloud Translation API によって翻訳されました。

CSS でギャップのスタイルを設定する新しい方法

Sam Davis Omekara

Patrick Brosset

公開日: 2025 年 6 月 11 日

境界と疑似要素のハックに別れを告げ、CSS のギャップ装飾にようこそ。

Microsoft Edge チームは、CSS ギャップ装飾（フレックス、グリッド、マルチ列レイアウト内のアイテム間のギャップにスタイルを適用する新しい方法）が、Chrome と Edge 139 でデベロッパー向けトライアルとして利用可能になったことをお知らせいたします。

ぜひお試しになり、フィードバックをお寄せください。この API の今後の開発に役立てさせていただきます。

役に立つリンク

問題

カレンダー、カード、データグリッドなどの UI コンポーネントのギャップをスタイル設定すると、読みやすさが大幅に向上し、全体的な美しさが増します。ただし、グリッドレイアウトと Flexbox レイアウトでこの効果を実現するには、従来、境界、疑似要素、背景のトリックを使った厄介な回避策が必要でした。これらの回避策には、いくつかの理由で問題が生じる可能性があります。

直感的でない: 視覚的なスタイル設定に構造的な依存関係を導入するため、セマンティック HTML の原則に反しています。
ユーザー補助に不利: 多くの場合、追加の DOM 要素が必要になり、スクリーンリーダーなどの支援技術の妨げになる可能性があります。
メンテナンスが難しい: 複雑なレイアウトロジックが必要になり、コンポーネント間で一貫したスタイル設定が難しくなります。
パフォーマンスに悪影響: これらの回避策では、不要な要素が DOM に追加され、パフォーマンスの問題につながる可能性があります。

ウェブプラットフォームでは、column-rule プロパティによるギャップのスタイル設定はすでにサポートされていますが、現在のところ、マルチカラムレイアウトにのみ限定されています。ウェブデベロッパーは、グリッドや Flexbox など、他の関連するレイアウトタイプ全体でギャップのスタイルを設定するための一貫した方法を長い間求めてきました。

解決策: CSS のギャップ装飾

ギャップ装飾は、column-rule プロパティを拡張して、グリッドや Flexbox などの他のレイアウトタイプで動作するようにし、それを補完する新しい row-rule プロパティを導入します。これにより、さまざまなレイアウトタイプでギャップのスタイル設定に一貫性が生まれ、新しいカスタマイズが可能になります。

CSS のギャップ装飾には次のような利点があります。

レイアウトへの影響なし: 装飾は純粋に視覚的なものです。レイアウトや間隔には影響しないため、既存のデザインを損なうことを恐れずに導入できます。
繰り返し構文: CSS グリッドと同様に、repeat() 構文を使用してコンテナのさまざまな部分に装飾パターンを作成できます。これにより、最小限の CSS で豊かで一貫性のあるデザインを実現できます。
クリーンなマークアップ: 余分な要素や疑似要素は必要ありません。ギャップを直接スタイル設定するだけです。
カスタマイズ性: *rule-break、*rule-outset、gap-rule-paint-order などの新しい CSS プロパティを使用すると、幅、スタイル、色の従来のルールスタイルを超えて、より多くのカスタマイズオプションを利用できます。

CSS のギャップ装飾を使用すると、視覚的に区別でき、メンテナンス可能なページレイアウトをこれまで以上に簡単に作成できます。

ギャップ装飾の例

現在、CSS ギャップ装飾を試すには、Edge または Chrome（バージョン 139 以降）などの対応ブラウザを使用し、edge://flags または chrome://flags に移動して [Enable Experimental Web Platform Features] フラグを切り替えます。

インタラクティブなデベロッパープレイグラウンド

CSS ギャップ装飾がサポートされているさまざまなタイプのレイアウトと、すべての新しいプロパティを試すには、インタラクティブなデベロッパープレイグラウンドをお試しください。

遊び場。

ハンバーガーメニュー

セクション間に線があるバーガーをカスタマイズするための UI。

バーガーメニューのデモでは、column-rule-break: intersection プロパティを使用して、行ギャップと表示される交差点ごとに列ギャップ装飾を分割する方法を示しています。

このデモでは、column-rule-offset: -15px を使用してデコレーションの長さを調整し、各交差点の端から離しています。

ノートブック

線が引かれたノートブックのページのようなデモ。

ノートブックのデモでは、row-rule-break: none により、行の装飾が交差点で中断されず、コンテナの左から右に連続して実行されます。一方、column-rule-break: spanning-item では、列の装飾がスパニングアイテムの背後に描画されません。スパニングアイテムで始まり、スパニングアイテムで終わるため、視認可能な T 型の交差点が形成されます。

row-rule プロパティは、repeat() 関数を使用して、レイアウトのさまざまなセクションにギャップ装飾を適用する方法を正確に制御します。これにより、行ルールがヘッダーとフッターに隠され、メインコンテンツの周囲では太くなり、他の部分ではより微妙になるスタイル設定パターンが可能になります。

毎日の CSS ニュース

マガジンスタイルのレイアウト。

Daily CSS News デモでは、雑誌スタイルのレイアウトを使用し、複数のグリッドコンテナと Flexbox コンテナに CSS ギャップ装飾を定義しています。

右側の Sudoku ゲームでは、9x9 のグリッドと繰り返しパターンを使用して、行と列の間に細い線と太い線を描画しています。

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

フィードバックの呼びかけ

CSS ギャップ装飾をぜひお試しください。この機能は一般的な問題を解決できると考えています。皆様のニーズに合わせて機能を改良できるよう、ぜひフィードバックをお寄せください。

CSS ギャップ装飾機能は、Chromium でまだ実装中です。テストする場合は、現在も開発中であり、想定どおりに動作しないケースがあることにご注意ください。現在の制限事項には、ギャップ装飾のアニメーション化や、非常に多数のグリッドトラックの使用が含まれます。

バグを見つけた場合は、新しい Chromium バグを開いてフィードバックを共有してください。

CSS でギャップのスタイルを設定する新しい方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。