CSSギャップ装飾モジュール レベル 1

1. 導入

このセクションは規定的ではありません。

CSS Multicol 1 § 4 列のギャップとルールは、 multicolコンテナ内の列間にルール（線）を描画できることを許可しています。 本仕様は column-rule-width、column-rule-style、およびcolumn-rule-colorプロパティを拡張し、行方向の同等物を追加し、 他のコンテナレイアウトへの適用範囲を広げ、ギャップ装飾が描画される場所や方法を高度に制御できるようにします。

1.1. 値の定義

この仕様は、CSSプロパティ定義の慣例（[CSS2]）に従い、 値の定義構文（[CSS-VALUES-3]）を使用します。 本仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。

各プロパティ定義に記載された値に加えて、 本仕様で定義される全てのプロパティは、CSS全体キーワードもプロパティ値として受け付けます。 可読性のため、ここでは繰り返し記載していません。

2. ギャップ装飾

CSSの様々なレイアウト、例えばmulticolコンテナ、 flexコンテナ、 gridコンテナ、 masonryコンテナでは、 子ボックス同士を隣接して配置し、その間にギャップ（ガターとも呼ばれる）を設けます。 それぞれのギャップにはギャップ装飾を含めることができ、 これは隣接するボックス間に描画される可視セパレーター（線など）です。

.grid-with-spans {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

2.1. レイアウトと描画

この仕様は、一般的にコンテナレイアウトのギャップの形状を定義しません。 それは他の仕様に委ねられています。 CSS Box Alignment 3 § 8 箱間のギャップ を参照してください。ここでmulticolコンテナ、 flexコンテナ、 gridコンテナに関する定義が示されています。

ギャップ装飾はスペースを占有しません。 つまり、ギャップ装飾の有無や幅は、他の要素の配置に影響しません。 ギャップ装飾がそのギャップよりも広い場合、隣接するボックスがその装飾と重なることがあり、 場合によっては装飾がコンテナの枠外にまで広がることもあります。ギャップ装飾はコンテナのボーダーのすぐ上に描画されます。 スクロール可能なコンテナの場合、コンテナのボーダーや背景はスクロールされませんが、 装飾はコンテナ内のアイテムと共にスクロールする必要があります。

ギャップ交点は、次の各場所に存在すると定義されます：

• ギャップとコンテナの内容端との交点の中心。
• 異なる方向のギャップ同士の交点の中心。

以下の例は、ギャップ交点の位置を示しており、 各ケースでマゼンタ色の+でマークされています。

.grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  background: rgb(255 255 128);
}
.grid > * {
  border: 1px dashed black;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  background: rgb(255 255 128);
}
.flex > * {
  border: 1px dashed black;
}

注: CSS Box Alignment 3 § 8.1 行と列のガター：row-gapおよびcolumn-gapプロパティは、 フレックスコンテナ内の交差方向ギャップを、同じ行内の隣接するフレックスアイテムの間と定義しています。 したがって、上記の例では、#4と#7の右端が揃っていたり、#5と#8の左端が揃っていても、 それら2組のアイテム間の空間は異なる2つのギャップであり、異なる行にあるためです。 このため、#4、#5、#7、#8の間の交点には、位置が一致する2つのギャップ交点が存在します： #4と#5の間のギャップの下端と、#7と#8の間のギャップの上端です。

ギャップ装飾は、 対応するギャップの中心で、両端にあるギャップ交点のペアに沿って、エッジと平行に描画されます。

2.2. ギャップ装飾をセグメントに分割する：column-rule-break、row-rule-break、およびrule-break プロパティ

コンテナ内のギャップ装飾を、アイテムによって形成される可視の「T字」や「十字」交点で分割してセグメント化する動作を設定します。 これらの値をどのように適用するかの詳細は、ギャップ装飾端点のペア決定手順で示されています。

none

ギャップ装飾は可視の「T字」や「十字」交点で開始・終了しません。 代わりに、ギャップの端から端まで単一の連続した装飾が描画されます。

spanning-item

ギャップ装飾は可視の「T字」交点で開始・終了しますが、可視の「十字」交点は貫通します。

intersection

ギャップ装飾は可視の「T字」および「十字」交点で開始・終了します。

これらの値についてBikeshedしてください。

column-rule-break および row-rule-break プロパティに同じ値を設定します。

2.2.1. ギャップ交点をセグメントにペア化する

上記の手順で識別された各端点のペア間に ギャップ装飾が描画されます。

以下の例は、*-rule-break プロパティの様々な設定を示します。 違いをより明確にするために、*-rule-outset プロパティは 0 に設定されています。

.break-none-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
  rule-outset: 0px;
}

.break-spanning-item-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: spanning-item;
  rule-outset: 0px;
}

.break-intersection-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
  rule-outset: 0px;
}

.break-none-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
  rule-outset: 0px;
}

注: フレックスボックスにはスパンアイテムの概念がないため、 spanning-item の指定は none と同じ効果になります。

.break-intersection-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
  rule-outset: 0px;
}

2.3. ギャップ装飾端点の調整：column-rule-outset、row-rule-outset、およびrule-outsetプロパティ

これらのプロパティは、通常は端点を決定するギャップ装飾の端点をギャップ交点に対してオフセットするために使用できます。 50%の初期値では、ギャップ装飾の端点が交点の中央に配置されます。 0の値では、ギャップ装飾の端点が交点の端と一致します。 正の値は交点の中心方向へ伸ばし、負の値は中心から離します。 これらのオフセットはコンテナの端にも適用され、正の値はコンテナの内容範囲外に伸びることがあります。

column-rule-outset および row-rule-outset プロパティに同じ値を設定します。

.outset-0px {
  column-rule-outset: 0px;
  column-rule-break: intersection;
}

.outset-5px {
  column-rule-outset: 5px;
  column-rule-break: intersection;
}

.outset-50percent {
  column-rule-outset: 50%;
  column-rule-break: intersection;
}

.outset-negative-5px {
  column-rule-outset: -5px;
  column-rule-break: intersection;
}

指定されたギャップ内のギャップ交点を考慮する場合、 各点には交差ギャップ幅が割り当てられ、次のように定義されます：

コンテナの内容端の場合

交差ギャップ幅は0です。

他のギャップとの交差の場合

交差ギャップ幅は、該当するギャップに対するcolumn-gapまたはrow-gapプロパティの使用値です。

offsetの適用方法については、ギャップ装飾端点のペアを決定する手順を参照してください。

2.4. ギャップ装飾の描画順序：rule-paint-order プロパティ

二次元コンテナ内のギャップ装飾の描画順序を設定します。

以下の例は、rule-paint-orderプロパティによるギャップ装飾の描画順序の調整を示します。

.row-over-coulumn {
  rule-paint-order: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

rule-paint-order: column-over-row;
row-rule: 6px solid red;
column-rule: 6px solid blue;

3. 色、スタイル、および幅

このセクションのプロパティ定義は、[CSS-MULTICOL-1]で同じ名前のプロパティ定義より優先されます。

3.1. ギャップ装飾の色：column-rule-color および row-rule-color プロパティ

<line-color-list>          = [ <line-color-or-repeat> ]+

<auto-line-color-list>     = [ <line-color-or-repeat> ]*
                             <auto-repeat-line-color>
                             [ <line-color-or-repeat> ]*

<line-color-or-repeat>     = [ <color> | <repeat-line-color> ]

<repeat-line-color>        = repeat( [ <integer [1,∞]> ] , [ <color> ]+ )

<auto-repeat-line-color>   = repeat( auto , [ <color> ]+ )

<color>

ギャップ装飾の色を設定します。

3.2. ギャップ装飾のスタイル：column-rule-style および row-rule-style プロパティ

<line-style-list>          = [ <line-style-or-repeat> ]+

<auto-line-style-list>     = [ <line-style-or-repeat> ]*
                             <auto-repeat-line-style>
                             [ <line-style-or-repeat> ]*

<line-style-or-repeat>     = [ <line-style> | <repeat-line-style> ]

<repeat-line-style>        = repeat( [ <integer [1,∞]> ] , [ <line-style> ]+ )

<auto-repeat-line-style>   = repeat( auto , [ <line-style> ]+ )

これらのプロパティはギャップ装飾のスタイルを設定します。 <line-style> の値は collapsing border modelと同様に解釈されます。

3.3. ギャップ装飾の幅：column-rule-width および row-rule-width プロパティ

<line-width-list>          = [ <line-width-or-repeat> ]+

<auto-line-width-list>     = [ <line-width-or-repeat> ]*
                             <auto-repeat-line-width>
                             [ <line-width-or-repeat> ]*

<line-width-or-repeat>     = [ <line-width> | <repeat-line-width> ]

<repeat-line-width>        = repeat( [ <integer [1,∞]> ] , [ <line-width> ]+ )

<auto-repeat-line-width>   = repeat( auto , [ <line-width> ]+ )

このプロパティはギャップデコレーションの幅を設定します。負の値は許可されません。

算出値 column-rule-style が none または hidden の場合、 column-rule-width の算出値は 0 になります。 この挙動はCSS Multicol 1 § 4.4 カラムルールの幅: column-rule-width プロパティとの後方互換性のためです。

"0に強制"する挙動は値のリストにも適用されるべきか？ もしそうなら、整列していないリストの場合どのように扱うべきか？

3.4. 値のリストと repeat() 記法

このセクションの各プロパティは、スペース区切りの値リストを受け付けます。 このように複数の値を設定することで、コンテナ内のギャップデコレーションを変化させることができます。

column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: red blue;

このようなリストには repeat() 記法を含めることができます。 CSS Grid Layout 1 § 7.2.3 行と列の繰り返し: repeat() 記法と同様に、これらの記法はギャップデコレーションの繰り返しパターンをよりコンパクトに記述できます。

repeat() 構文の一般形は、概ね次のようになります。

repeat( [ <integer [1,∞]> | auto ] , <value>+ )

repeat() の第1引数は繰り返し回数を指定します。

<integer>

整数リピーター を指定します。 整数リピーターは、第2引数の値リストを 第1引数で指定された回数だけ展開します。

著者は次のように記述できます:

column-rule-color: gray red blue red blue red blue gray;

あるいは次のように短縮でき、同じ色の並びになります:

column-rule-color: gray repeat(3, red blue) gray;

auto

自動リピーターを指定します。 自動リピーターは 他のリスト部分から値が割り当てられないギャップに値を埋めるために使われます。 1つの値リスト内で repeat() による 自動リピーター は最大1つのみ指定可能です。

前の例に続き、著者が最終レイアウトのカラム数を知らない場合、次のように記述できます:

column-rule-color: gray repeat(auto, red blue) gray;

この場合、最初と最後のカラムギャップにgrayが入り、間のギャップには赤と青が交互に割り当てられます。

repeat() の第2引数は、プロパティが受け付ける値のスペース区切りリストです。

3.5. ギャップデコレーションのショートハンド: column-rule および row-rule プロパティ

<gap-rule-list>        = <gap-rule-or-repeat>#

<gap-auto-rule-list>   = <gap-rule-or-repeat>#? ,
                         <gap-auto-repeat-rule> ,
                         <gap-rule-or-repeat>#?

<gap-rule-or-repeat>   = <gap-rule> | <gap-repeat-rule>

<gap-repeat-rule>      = repeat( <integer [1,∞]> , <gap-rule># )

<gap-auto-repeat-rule> = repeat( auto , <gap-rule># )

<gap-rule>             = <line-width> || <line-style> || <color>

これらのショートハンドは、対応する幅・スタイル・色プロパティをまとめて設定します。

3.6. 双方向ギャップデコレーションのショートハンド: rule-color, rule-style, rule-width, および rule プロパティ

これらのショートハンドは、対応するカラムおよびロー（行）プロパティに同じ値を設定します。

プライバシーに関する考慮事項

この仕様に関して新たなプライバシー考慮事項は報告されていません。

セキュリティに関する考慮事項

この仕様に関して新たなセキュリティ考慮事項は報告されていません。