【CSS】display: contents;で、HTMLの構造を崩さずレイアウトを編集する

2024年10月7日

最近CSSのdisplayに、contentsという値があることを知り、とても便利だったのでご紹介します！

display: contents;とは

概要

要素にdisplay: contents;を指定すると、“存在しない”ような扱いになります。
display: none;と似ていますが、noneの場合子孫要素も無くなってしまいますが、contentsの場合子孫はそのまま表示されます。
contentsを指定された要素は見えなくなるので、width、height、padding、margin、background-colorなどは効かなくなります。

ブラウザ対応状況

主要ブラウザでは、最新版であればほぼサポートされています。
https://caniuse.com/?search=contents

おすすめの使い方

display: contents;を使うことで、レスポンシブ対応などにより要素の順番を入れ替えるとき、無駄なHTMLを書かずに済みます！

今までは上記のように順番を入れ替える場合、別々のボックスに入っている要素は順番を入れ替えることができず、パソコン・スマホ用それぞれ同じHTMLを用意して、CSSで表示を切り替える必要がありました。
テキストを修正する場合修正漏れが発生したり、HTMLの構造としてもあまり良くありません。
しかしdisplay: contents;を使えば、.wrapperにdisplay: flex;、要素にorderを指定することで自由に順番を入れ替えることができるようになります。