CSS display:contents ジェネレーター

ラッパー要素を透過表示し、子要素を親のフローに直接配置。Flexbox/Gridで便利。

display値

• contents: 要素自体は非表示、子要素のみ表示

• block: 通常のブロック表示

ラッパータグ

子要素数: 3

生成されたCSS

.wrapper {
  display: contents;
}

HTMLコード

<div class="wrapper">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

プレビュー

親コンテナ (display: flex)

(wrapper: contents)

Child 1

Child 2

Child 3

• contents: 黄色の枠(wrapper)が存在せず、子要素が直接Flexboxに配置される

• block: 黄色の枠(wrapper)がブロックとして表示される

display: contents とは？

display: contentsは要素自体のボックスを生成せず、子要素のみを親のフローに配置します。セマンティックなマークアップを保ちながら、レイアウト上は透明な要素として機能します。