1. ウェブ
  2. CSS
  3. リファレンス
  4. プロパティ
  5. rule-visibility-items

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS rule-visibility-items プロパティ

利用可能性は限定的

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

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

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

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

構成要素のプロパティ

このプロパティは、以下の CSS プロパティの一括指定です。

試してみましょう

rule-visibility-items: all;

rule-visibility-items: around;

rule-visibility-items: between;

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;
  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
/* キーワード */
rule-visibility-items: all;
rule-visibility-items: around;
rule-visibility-items: between;
rule-visibility-items: normal;

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

値

このプロパティは、以下のキーワード値のいずれかで指定します。

all

隣接する領域にアイテムが含まれているかどうかに関わらず、すべての隙間の区間に罫線を引きます。

around

隣接する 2 つの領域のうち、少なくとも 1 つがアイテムで占められている場合、その隙間の区間には罫線を引きます。

between

隣接する 2 つの領域が両方ともアイテムで占められている場合のみ、その間の区間には罫線を引きます。

normal

グリッドコンテナーの場合、all と同じ動作をします。段組みレイアウトの場合は、between と同じ動作をします。これがデフォルトの設定です。

解説

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

この値は、column-rule-visibility-items プロパティと row-rule-visibility-items プロパティの両方に同じ値を設定する単一のキーワードです。

公式定義

DB に値が見つかりません！

形式文法

rule-visibility-items = 
  <'column-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 の破線の罫線が収まるよう、列間に十分な空間を提供します。列の罫線を dashed に、行の罫線を solid に設定しました。

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

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

  column-rule: dashed 5px blue;
  row-rule: solid 5px red;

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

結果

仕様書

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

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

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

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