CSS: display: contents を試す

1. このページの目的

CSS の display: contents を試します。

メモ

• 「ある要素の塊をタグで囲んでおきたいが、見た目上はそのタグを無視してもらい、しかしその内容は表示して欲しい」という場合に使うようだ。➡ そんなときある？

2. デモ1

Why is display: contents useful? | How display: contents; Works にあるコードを試してみる。(article タグがない場合)

2-1. コード

HTML

<div class="grid">
  <h2>This is a heading</h2>
  <p>...</p>
  <p>Footer stuff</p>

  <h2>This is a really really really super duper loooong heading</h2>
  <p>...</p>
  <p>Footer stuff</p>
</div>

CSS

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
}
h2, p {
  border: 1px dashed #4ca451;
}

• 3行2列のレイアウトを作り、各列に h2, p, p 要素を配置させる。
• こんな使い方は現実的だろうか？

2-2. 結果

• 3行2列のグリッドに、要素が配置される。
• 要素の個数が合っていれば、意図した通りのレイアウトで表示されるが、そうでなければ表示がずれてしまう。
• h2, p, p で1つのグループになっているが、タグでまとめられていないので、それが分かりづらい。
• Chrome DevTools の [Elements] パネルを使えば、grid のレイアウトを視覚的に分かりやすく表示することができる。

3. デモ2

Why is display: contents useful? | How display: contents; Works にあるコードを試してみる。(article タグがある場合)

3-1. コード

HTML

<div class="grid">
  <article style="display: contents;">
    <h2>This is a heading</h2>
    <p>...</p>
    <p>Footer stuff</p>
  </article>
  <article style="display: contents;">
    <h2>This is a really really really super duper loooong heading</h2>
    <p>...</p>
    <p>Footer stuff</p>
  </article>
</div>

• article タグを追加しただけ。

CSS

デモ1 と同じ。

3-2. 結果

• article タグがあっても display: contents が指定されていれば、見た目は変わらない。

4. これが役立つのはどんな場合か？

• あまり思いつかない。
• 上の例のように、grid を使って要素を並べたい場合？
• マークアップのわかり方 では、ulタグに使用する例が紹介されている。
• HTMLのマークアップはきれいに書けるものの、レンダリングでの動作が分かりにくくなるため、乱用は厳禁な機能だと思われる。

5. 参考

• CSS Display Module Level 3
• display - CSS: Cascading Style Sheets | MDN
• [CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック | コリス
• How display: contents; Works
• Realizing common layouts using grids - CSS: Cascading Style Sheets | MDN
• grid-auto-flow - CSS: Cascading Style Sheets | MDN
• repeat() - CSS: Cascading Style Sheets | MDN