display: contents
要素のボックスを「消去」し、子要素を直接の親のレイアウトに参加させる宣言です。セマンティックなHTML構造を保ちながら、不要なラッパー要素のレイアウトへの影響を排除できます。Flexboxやグリッドレイアウトで中間のラッパー要素を透過的にする場合に特に有用です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.display.contents | 65 | 79 | 37 | 11.1 | 65 | 11.3 |
| CSS プロパティ | ||||||
contents.contents unusual `display:contents` が適用されたときの異常な要素の特定の動作 | 65 | 79 | 59 | | 65 | |
contents.focusable elements 実験的 「display:contents」を持つ要素はフォーカス可能です | | | | | | |
基本構文
CSS
.wrapper {
display: contents;
}
/* Child elements participate directly in the grid */
.grid { display: grid; }
.grid .wrapper > * { /* Positioned as grid items */ }ライブデモ
実務での使いどころ
-
グリッドレイアウトのラッパー除去
コンポーネントのラッパー要素にdisplay: contentsを適用し、子要素を親グリッドの直接的なアイテムとして参加させます。
注意点
- 一部のブラウザでアクセシビリティツリーから要素が削除されるバグが報告されているため、button、a、tableなどの要素への使用は避けてください。
アクセシビリティ
- セマンティック要素に適用するとアクセシビリティ情報が失われる可能性があるため、div/span以外への使用は慎重に行ってください。