display:contents;って何？どんな時に使うと便利なの？ - Qiita

先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら

[d-matchon]

gridの例は grid-template-rows: subgrid; を使うのもいいぞ

[uunfo]

なるほど、文書構造上まとめておきたいが、CSSには邪魔なノードに対して有効、と

[tohokuaiki]

button要素以外ならもうどのブラウザも使えるのか。https://caniuse.com/?search=display%3Acontents

[akiyan]

ボックスが消えるから「フレームワークによって自動追加されるタグに対応する」これが一番使い道ありそう

[igrep]

全然知らなかった。ありがたい。

[kvx]

アクセシビリティの問題は解消したのかな/最後に書いてあった。まだ未解消か、残念。

[tasukuchan]

“プロパティ”

[dorapon2000]

“上記の通り、先ほどは消してしまったarticleタグにdisplay: contents;を指定します。 すると、display:grid;は子要素のarticleタグをないものとして扱い、孫要素のh2やpタグを参照するようになります。”

[localnavi]

gridを使う時に便利そう