display:contents;とは何者か【HTML,CSS】 | GUARDIAN Marketing BLOG | 成果を上げるサブスク型ホームページ制作|日本屈指5万サイトの実績|東京のガーディアン

displayには色んな種類のものがあります。

display:block; や display:inline-block; であったり、display:flex; display:grid; display:table; などもそうですね。

MDN Web Docsのdisplayの項目を参照してみると、display:contents; はdisplay:none; と同じ括りになっていることがわかります。

display:none; に仲間がいたのか、ということは少々意外な気もしますが、それは次の挙動を見てもらえば一目瞭然です。

上記から分かるように、display:contents; を指定することでwidth、height、padding、margin、background-colorなどがあらかた無効化されていることがわかります。

colorは効いていますね。そして「テキストテキスト」という文字は残ったままになっております。

要するに、display:contents を指定することで要素の中身の「コンテンツ」（この場合はテキストテキスト）だけを残し、ボックス関連のプロパティは機能しなくなります。

そして中身の「コンテンツ」は、親要素の直接の子要素であるかのように振る舞われます（本来は孫要素であるにも関わらず）。

ではそんな不思議な挙動をするdisplay:contents; ですが、一体何が便利なのでしょうか？

冒頭にて、display:contents; は display:grid; と密接な関係があると述べました。

前回の記事にて詳しく述べているのですが、display:grid; には同じ階層構造上の要素をいかようにでも配置できるという特性があるため、

gridのメリットを最大限に引き出すためにできる限り入れ子にせずフラットなマークアップをしたくなってしまいます。

例えば下記のようなマークアップをした場合、

titleクラスとcontentsクラスはそれぞれ異なる階層構造上にあります。

もしこのHTML構造を保ったままで下記のようにレイアウトを変えるとすればどうしたらいいでしょうか？

レイアウトに関していくら自由度の高いgridとはいえ、通常であれば下記の赤の範囲内でしか配置を変更できません。

そこでdisplay:contents; の出番です。

display:contents; は、孫要素を子要素のようにしてしまえるという特性がありました。

つまり先のコードでtitleクラスとcontentsクラスにdisplay:contents; を指定すると、下図の右側のようになります。

（HTML構造が変わるわけではもちろんありませんが、実質、下図の右側のように振る舞うようになるということです）

そうすることで、見出しも本文もごちゃ混ぜにしつつ自由にレイアウトを組むことができるようになります。

つまり、HTMLの構造としてはわかりやすいマークアップを保ちつつ、同時にdisplay:grid; の特性を活かした自由なレイアウトをCSSで組むことができるということです。

display:contents; にはそのような役割があるということを、ぜひ覚えていただければと思います。

display:contents; は比較的新しいCSSの記述です。ブラウザ対応状況は上記画像のようになっています。

黄色がほとんどなのでまだ使える状況ではないのかな？ と思ってしまいますが、

主要ブラウザに関しては、画像下部のNotes２、３が注意すれば問題ありません。

・ボタンに使わない

・テーブルタグに使わない

上記さえ守れば、主要ブラウザに関しては問題なく動作するものと考えて差し支えないかと思います。

２回にわたってdisplay:grid; とdisplay:contents; に関して説明をさせていただきました。

gridの便利さと、display:contents; の役割が明確に伝わったでしょうか？

そうであれば嬉しいです。

最後に、前回の記事にて例に挙げたgridでテーブルを作成したというコードの全文を下記に掲載しておきます。

今回も最後までお付き合いいただきありがとうございました。

他にも筆者の執筆したブログ記事がありますので、ぜひご興味がありましたらご一読ください。