CSS `row-rule-visibility-items` プロパティ

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more browser support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

row-rule-visibility-items は CSS のプロパティで、空の領域に隣接する隙間に、行・段間の罫線の区間を描画するかどうかを定義します。

試してみましょう

row-rule-visibility-items: all;

row-rule-visibility-items: around;

row-rule-visibility-items: between;

row-rule-visibility-items: normal;

<section id="default-example">
  <section id="example-element">
    <p>One fish</p>
    <p>Two fish</p>
    <p>Red fish</p>
    <p>Blue fish</p>
    <cite>-- Dr. Seuss</cite>
  </section>
</section>

#example-element {
  display: grid;
  row-rule: solid 5px red;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
cite {
  grid-column: 3;
  grid-row: 3;
}

構文

css

/* キーワード */
row-rule-visibility-items: all;
row-rule-visibility-items: around;
row-rule-visibility-items: between;
row-rule-visibility-items: normal;

/* グローバル値 */
row-rule-visibility-items: inherit;
row-rule-visibility-items: initial;
row-rule-visibility-items: revert;
row-rule-visibility-items: revert-layer;
row-rule-visibility-items: unset;

値

all: 隣接する領域にアイテムが含まれているかどうかに関わらず、すべての隙間の区間に行・段間の罫線を引きます。
around: 隣接する 2 つの領域のうち、少なくとも 1 つがアイテムで占められている場合、その隙間の区間には行・段間の罫線を引きます。
between: 隣接する 2 つの領域が両方ともアイテムで占められている場合のみ、その間の区間には行・段間の罫線を引きます。
normal: all と同じ動作をします。これがデフォルトの設定です。

解説

row-rule-visibility-items プロパティは、段組みおよびグリッドコンテナー内で、複数の行があり、隣接する領域のいずれか一方または両方が空の場合、それらの領域間の隙間に行・段間罫線の区間を描画するかどうかを定義します。

row-rule-visibility-items と column-rule-visibility-items プロパティの両方を rule-visibility-items 一括指定を使用して同じ値に設定することができます。

形式文法

row-rule-visibility-items = 
  all      |
  around   |
  between  |
  normal

例

基本的な例

この例では、隣接するグリッド領域のうち少なくとも 1 つにグリッドアイテムが含まれている場合、2 つのグリッド領域の間に罫線が描画されるよう行間罫線を定義します。

HTML

ここでは、ダイナミックなスポーツ・デュオの一覧を記載しています。

html

<ol>
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
  <li>Kerri Walsh + Misty May Treanor</li>
</ol>

CSS

順序付きリスト (<ol>) をグリッドコンテナーとして定義し、grid-template-rows および grid-template-columns プロパティの両方を repeat(4, 1fr) に設定して 4 行 4 列のグリッドを生成し、grid-row および grid-column プロパティを使用して、最後のアイテムを右下のグリッド領域に移動させます。gap を 20px に指定し、5px の破線の罫線が収まるよう、行間に十分な空間を提供します。

最後に、row-rule-visibility-items を around に設定しました。これにより、隣接するグリッド領域のいずれか一方、あるいは両方にグリッドアイテムが含まれている場合にのみ、行間罫線が描画されるようになります。

css

ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;

  row-rule: dashed 5px blue;
  row-rule-visibility-items: around;
}
li:last-child {
  grid-column: 4;
  grid-row: 4;
}

li {
  margin-left: 1em;
}
@layer no-support {
  @supports not (row-rule-visibility-items: around) {
    body::before {
      content: "このブラウザーは row-rule-visibility-items プロパティに対応していません。";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

結果

仕様書

仕様書
CSS Gaps Module Level 1 # propdef-row-rule-visibility-items

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年7月30日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS `row-rule-visibility-items` プロパティ

試してみましょう

構文

値

解説

公式定義

形式文法

例

基本的な例

HTML

CSS

結果

仕様書

ブラウザーの互換性

関連情報

MDN の改良に協力

CSS row-rule-visibility-items プロパティ

HTML

CSS

結果

MDN の改良に協力

CSS `row-rule-visibility-items` プロパティ