【CSS】displayの2つの役割と2値構文
displayの振る舞いに疑問を持ったことはありませんか？
CSSについて調べているときに、偶然知った2値構文についてまとめてみました。
displayとは
そもそもdisplayとは、その要素をブロック要素として扱うかインライン要素として扱うかを設定します。また、その要素の子に使用されるレイアウト（flow、grid、flex）なども設定できる２つの性質を持っています。
例えば、よく使われるキーワード値として次のようなものがあります。
blockinlineflexgridinline-blockinline-flexinline-block
この他にもいくつかあり、特にcontentsなどは面白い振る舞いをするのですが、ここでは2値構文にフォーカスを当てていきます。
displayの2値構文
結論から話すと、2値構文とは新しい何かをもたらすものではなく、既存の表記方法を置き換えるものです。
displayの効果
冒頭でも述べた通りdisplayには２種類の効果があります。
- その要素が
inlineかblockなのかを設定する - その要素の子要素をどのようにレイアウトするかを設定する
例えば、元々inline要素である<span>にdisplay:flexを指定すると、子要素はもちろんフレックスレイアウトになるのですが、その<span>自体はblock要素となります。
次の例は、四番目の<span>にdisplay:flexを与えたものです。
display:blockを指定した時と同じ様に、横並びではなく縦並びになっていることが分かります。
.flex_span {
display:flex;
}
2値構文とは
2値構文とは、今まで１単語で表されていたdisplayの効果を、その要素自体の振る舞いと子要素の振る舞いの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