display: contents

概要

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

対応ブラウザ

基本構文

.wrapper {
  display: contents;
}
/* 子要素が直接グリッドに参加 */
.grid { display: grid; }
.grid .wrapper > * { /* グリッドアイテムとして配置 */ }

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — display: contents
• Can I use — display: contents