✌️

【CSS】displayの2つの役割と2値構文

2022/12/16に公開約1,600字

displayの振る舞いに疑問を持ったことはありませんか?

CSSについて調べているときに、偶然知った2値構文についてまとめてみました。
https://developer.mozilla.org/ja/docs/Web/CSS/display/two-value_syntax_of_display#2_値の構文を使い始めることはできるのか?

displayとは

そもそもdisplayとは、その要素をブロック要素として扱うかインライン要素として扱うかを設定します。また、その要素の子に使用されるレイアウト(flowgridflex)なども設定できる2つの性質を持っています。
例えば、よく使われるキーワード値として次のようなものがあります。

  • block
  • inline
  • flex
  • grid
  • inline-block
  • inline-flex
  • inline-block

この他にもいくつかあり、特にcontentsなどは面白い振る舞いをするのですが、ここでは2値構文にフォーカスを当てていきます。

displayの2値構文

結論から話すと、2値構文とは新しい何かをもたらすものではなく、既存の表記方法を置き換えるものです。

displayの効果

冒頭でも述べた通りdisplayには2種類の効果があります。

  1. その要素がinlineblockなのかを設定する
  2. その要素の子要素をどのようにレイアウトするかを設定する

例えば、元々inline要素である<span>display:flexを指定すると、子要素はもちろんフレックスレイアウトになるのですが、その<span>自体はblock要素となります。
次の例は、四番目の<span>display:flexを与えたものです。
display:blockを指定した時と同じ様に、横並びではなく縦並びになっていることが分かります。

.flex_span {
  display:flex;
}

2値構文とは

2値構文とは、今まで1単語で表されていたdisplayの効果を、その要素自体の振る舞いと子要素の振る舞いの2つに分けて表す構文です。
よって、既存の単語は次の2単語に対応づけられます。

既存の値 2値構文での値
block block flow
inline inline flow
flex block flex
grid block grid
inline-block inline flow-root
inline-flex inline flex
inline-grid inline grid

完全な対応表はこちらです→ https://drafts.csswg.org/css-display/#display-value-summary
よって、先ほどのflexは次の様に書き換えることができます。

.flex_span {
  display:block flex;
}

ちなみに、最初の2値のうち最初の値のことを外側の表示型(outer diplay type)、2番目の値のことを 内側の表示型(inner diplay type) と呼ぶ様です。

なお現在2値構文に対応しているブラウザは次の二つのみです。

  • Firefox 70
  • Safari 15

そのため、今すぐに使うメリットはありません。
ただ、この構文を使えると、その要素と子要素への影響が分かりやすくなり、個人的にもしっくりくる書き方なので、対応するブラウザが増えて普及してくれれば嬉しいです。

Discussion

ログインするとコメントできます