【CSS】 要素の存在を無視「display: contents;」の使い方

こんにちは、さち です。

今回は、HTML の「要素」の存在を無視する CSS display: contents; について書いていきます。

CSS の display の「値」の中でも少し特殊な挙動をするので、特性を覚えて使いこなしていきましょう。

使い方

サンプルコード

HTML

<div>
  <section>1</section>
  <section>2</section>
</div>

<div>
  <section>3</section>
  <section>4</section>
</div>

CSS

分かりやすくするため、見た目に大きく関与する CSS 以外は記述を省略しています。

div {
  border: 3px solid orange;
}

section {
  background: lightgreen;
  display: inline-block;
}

結果

オレンジの枠線で囲まれた <div> 要素と、その中にある <section> 要素が並んでいます。

<div> 要素に display: contents; を適用すると、どうなるでしょうか？

存在を無視する「display: contents;」

CSS

<div> 要素に display: contents; を適用します。

div {
  border: 3px solid orange;
  display: contents;
}

section {
  background: lightgreen;
  display: inline-block;
}

結果

display: contents; を適用した <div> 要素は無視され、表示（レンダリング）はされなくなりました。そのため、<section> が連続して並んでいます。

ちなみに、<div> に適用している CSS は「子孫要素」に継承(inherit)するもの以外は無視されます。これは意識しなくても何となく分かると思います。

使い道

display: contents; の挙動は分かったけど、どういうときに使うのかという疑問も浮かぶので、使い道を考えてみました。

こんな感じでしょうか？

• 表示では「グループ」を分けずに羅列したいが、再編集がしやすいように HTML ソース上では「グループ」を分けておく
• 「ユーザーCSS」で既存のサイトの構造を書き換える

実際に使ってみる

HTML

<div class="container cerise-bouquet">
  <section>花帆</section>
  <section>吟子</section>
</div>

<div class="container dollchestra">
  <section>さやか</section>
  <section>小鈴</section>
</div>

<div class="container miracra-park">
  <section>瑠璃乃</section>
  <section>姫芽</section>
</div>

<div class="container edel-note">
  <section>セラス</section>
  <section>泉</section>
</div>

CSS

分かりやすくするため、見た目に大きく関与する CSS 以外は記述を省略しています。

.container {
  border-width: 3px;
  border-style: solid;
}
.cerise-bouquet { border-color: #A78; }
.dollchestra    { border-color: #789; }
.miracra-park   { border-color: #998; }
.edel-note      { border-color: #888; }

.cerise-bouquet::before { content: "スリーズブーケ"; }
.dollchestra::before    { content: "DOLLCHESTRA"; }
.miracra-park::before   { content: "みらくらぱーく!"; }
.edel-note::before      { content: "Edel Note"; }

section { display: inline-block; }
.cerise-bouquet section { background: #FBD; }
.dollchestra section    { background: #ACF; }
.miracra-park section   { background: #FD4; }
.edel-note section      { background: #CCC; }

結果

.container の CSS display の「値」を書き換えることで、「グループ」に分ける／分けないを切り替えています。