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

利用可能性は限定的

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

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

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

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

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

試してみましょう

column-rule-visibility-items: all;

column-rule-visibility-items: around;

column-rule-visibility-items: between;

column-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;
  column-rule: solid 5px red;
  gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
cite {
  grid-row: 3;
  grid-column: 3;
}

構文

css

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

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

値

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

解説

column-rule-visibility-items プロパティは、段組みおよびグリッドコンテナーで複数の列がある場合、空の領域に隣接する列の隙間に列・段間罫線の区間を描画するかどうかを定義します。

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

形式文法

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

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

css

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

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

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

結果

仕様書

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

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

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

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

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

試してみましょう

構文

値

解説

公式定義

形式文法

例

基本的な例

HTML

CSS

結果

仕様書

ブラウザーの互換性

関連情報

MDN の改良に協力

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

HTML

CSS

結果

MDN の改良に協力

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