【CSS】displayの2つの役割と2値構文2022/12/17に公開CSStechdisplayの振る舞いに疑問を持ったことはありませんか?CSSについて調べているときに、偶然知った2値構文についてまとめてみました。https://developer.mozilla.org/ja/docs/Web/CSS/display/two-value_syntax_of_display#2_値の構文を使い始めることはできるのか?displayとはそもそもdisplayとは、その要素をブロック要素として扱うかインライン要素として扱うかを設定します。その要素の子に使用されるレイアウト(flow、grid、flex)なども設定できる2つの性質を持っています。使われるキーワード値として次のようなものがあります。blockinlineflexgridinline-blockinline-flexinline-blockこの他にもいくつかあり、特にcontentsなどは面白い振る舞いをするのですが、ここでは2値構文にフォーカスを当てていきます。結論から話すと、2値構文とは新しい何かをもたらすものではなく、既存の表記方法を置き換えるものです。冒頭でも述べた通りdisplayには2種類の効果があります。その要素がinlineかblockなのかを設定するその要素の子要素をどのようにレイアウトするかを設定する例えば、元々inline要素である<span>にdisplay:flexを指定すると、子要素はもちろんフレックスレイアウトになるのですが、その<span>自体はblock要素となります。次の例は、四番目の<span>にdisplay:flexを与えたものです。display:blockを指定した時と同じ様に、横並びではなく縦並びになっていることが分かります。display:flex;}2値構文とは2値構文とは、今まで1単語で表されていたdisplayの効果を、その要素自体の振る舞いと子要素の振る舞いの2つに分けて表す構文です。よって、既存の単語は次の2単語に対応づけられます。https://drafts.csswg.org/css-display/#display-value-summaryよって、先ほどのflexは次の様に書き換えることができます。現在2値構文に対応しているブラウザは次の二つのみです。15そのため、今すぐに使うメリットはありません。この構文を使えると、その要素と子要素への影響が分かりやすくなり、個人的にもしっくりくる書き方なので、対応するブラウザが増えて普及してくれれば嬉しいです。kaiseiたまにかきますバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。