2021.09.30 [木] display:contentsを使ってみたい。
トライデントコンピュータ専門学校では、夏休みも終わり、各学科ごとに集中授業で作品制作、資格対策などが行われています。そして来週からはいよいよ後期通常授業が始まります。
学園祭などの学校イベントはもちろん、就職活動も始まる後期ですので、充実した学生生活を送ってもらいたいです。
さて、久しぶりにCSSについてわからないことがあったので、調べてみました。
先日、コリスの「モダンCSSによる絶対配置（position: absolute;）の削減 」という記事内にdisplay:contents;の便利な使い方が紹介されていました。
displayプロパティに関しては、過去に、flexについて「そろそろFlexboxを勉強し始めてもいいんじゃないだろうか - ウェブDeBLOG」だったり、gridについては「 CSS Grid Layoutの時代がやってくる。」に記述しましたが、以前よりも、頻繁に使っている気がします。
とうことで、今回はdisplay:contents;です。
display:contents
いつもどおり、W3Cの仕様書を見てみると、
- contents
- The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).
- 要素自体はボックスを生成しませんが、その子や疑似要素は通常通りボックスやテキストランを生成します。ボックスの生成とレイアウトの目的のためには、要素は要素ツリー内でそのコンテンツ（ソース・ドキュメントの子要素と、 ::before と ::after 疑似要素のようなその疑似要素の両方を含み、これらは通常通り子要素の前後に生成される）によって置き換えられたかのように扱われなければならない。
あいかわらず、よくわかりませんので実際にコードを書いて確認したいと思います
CSSのボックスモデル
まずは、要素自体のボックスを理解するために、CSSのボックスモデルを復習したいと思います。
HTMLの要素はどの要素も、下図のような「ボックス」と呼ばれる四角形の領域を生成します。
CSSのdisplayプロパティの値によって、ボックスと子要素の描画を設定することができます。
displayプロパティ
displayプロパティには、blockやinlineなどの表示タイプを設定するものや、flexやgridなど、要素内部の表示タイプを設定するものなど、種類が分かれています。
その中で要素がボックスを生成するかどうかを設定する値が、noneとcontentsとなります。
