2025 年版displayマルチキーワード構文超入門ガイド

本記事は備忘録として記録した内容です（2025年7月時点）。
可能な限り正確を期していますが、仕様やブラウザの更新により結果が異なることがあります。実装の最終判断は公式仕様・MDN などの一次情報と実機検証に基づいて行ってください。

• display: block grid; など “2 語” 指定の読み解き方
• 3 語になる特別ケース ‑ list-item の正体
• flow‑root・contents など、今どき必須の特殊値
• 2025 年7月現在のブラウザ対応状況と安全なフォールバック

.card { display: block; }      /* 要素じたいはブロック */
.card__items { display: grid; }/* 子どもはグリッドで並べる */

.card { display: block; }      /* 要素じたいはブロック */
.card__items { display: grid; }/* 子どもはグリッドで並べる */

.card {
  display: block grid;         /* ← 1 行で完結！ */
}

.card {
  display: block grid;         /* ← 1 行で完結！ */
}

• 1 語目＝外側 (outer)
  その要素じたいが文書内でどう並ぶ？（block / inline など）
• 2 語目＝内側 (inner)
  要素の中で子どもをどう並べる？（flex / grid / flow など）

• CSS1の時代は、レイアウトモデルが少なく「外側だけ」分かれば十分でした（block / inline など）。
• CSS2の時代 で table が登場し、内側のモデルという考え方が広がります。
• Flexbox / Grid の普及で「外側」と「内側」を明示しないと表現できない場面が増え、2 値構文が主流に。

つまり、設計の意図を 1 行でハッキリ書けるようになった、が最大のメリットです。

※ run-in は仕様上の値ですが主要ブラウザでは未実装です。

<span class="price">¥9,800 <span class="tax">税込</span></span>

<span class="price">¥9,800 <span class="tax">税込</span></span>

.price{
  display: inline flex;      /* outer: inline / inner: flex */
  gap: .25em;
  align-items: baseline;
}

.price{
  display: inline flex;      /* outer: inline / inner: flex */
  gap: .25em;
  align-items: baseline;
}

.div{
  display: block flow-root;  /* margin のはみ出しを防止 */
}

.div{
  display: block flow-root;  /* margin のはみ出しを防止 */
}

/* PC 幅では .card__body のボックスを作らず、子だけ並べる */
@media (min-width: 800px){
  .card__body{ display: contents; }
}

/* PC 幅では .card__body のボックスを作らず、子だけ並べる */
@media (min-width: 800px){
  .card__body{ display: contents; }
}

3つ目の語が付いて3値になるのは、list-item を使うときだけです。
flow-root は内側（inner）で使う2値構文、contents は単独キーワード（外側・内側を持たない）です。

/* 自動で ::marker（番号・黒丸など）が付く */
h2.section-title{
  display: block flow list-item;  /* 3 語 */
}

/* 省略形（内部的には上と同義）*/
h2.section-title{
  display: list-item;             /* = block flow list-item */
}

/* 自動で ::marker（番号・黒丸など）が付く */
h2.section-title{
  display: block flow list-item;  /* 3 語 */
}

/* 省略形（内部的には上と同義）*/
h2.section-title{
  display: list-item;             /* = block flow list-item */
}

フォーム要素（label / fieldset など）の親や、位置計算に依存する場面では display: contents を避けるのが安全です。

• Chrome / Edge / Firefox / Safari（デスクトップ・モバイル）
  … 2 値構文・list-item・flow-root・contents は概ね対応済み
• IE11 など旧環境
  … 非対応。フォールバックが必要

/* 1) まず旧式（シングル値）を書く */
.list{ display: grid; }

/* 2) すぐ下で 2 値を上書き（モダン環境が勝つ） */
.list{ display: block grid; }

/* 1) まず旧式（シングル値）を書く */
.list{ display: grid; }

/* 2) すぐ下で 2 値を上書き（モダン環境が勝つ） */
.list{ display: block grid; }

WEBさん

WordPressの不具合をなおす人

XInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。