Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

display: contents

要素のボックスを「消去」し、子要素を直接の親のレイアウトに参加させる宣言です。セマンティックなHTML構造を保ちながら、不要なラッパー要素のレイアウトへの影響を排除できます。Flexboxやグリッドレイアウトで中間のラッパー要素を透過的にする場合に特に有用です。

ボックス消去レイアウト透過

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
contents
65
79
37
11.1
65
11.3
contents contents unusual

`display:contents` が適用されたときの異常な要素の特定の動作
65
79
59
65
contents focusable elements
実験的

「display:contents」を持つ要素はフォーカス可能です
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.wrapper {
  display: contents;
}
/* Child elements participate directly in the grid */
.grid { display: grid; }
.grid .wrapper > * { /* Positioned as grid items */ }

ライブデモ

display: contents

CSS の display: contents パターンです。

プレビュー全画面表示

通常のwrapper

CSS の 通常のwrapper パターンです。

プレビュー全画面表示

Flex内で使用

CSS の Flex内で使用 パターンです。

プレビュー全画面表示

実務での使いどころ

  • グリッドレイアウトのラッパー除去

    コンポーネントのラッパー要素にdisplay: contentsを適用し、子要素を親グリッドの直接的なアイテムとして参加させます。

注意点

  • 一部のブラウザでアクセシビリティツリーから要素が削除されるバグが報告されているため、button、a、tableなどの要素への使用は避けてください。

アクセシビリティ

  • セマンティック要素に適用するとアクセシビリティ情報が失われる可能性があるため、div/span以外への使用は慎重に行ってください。

参考リンク