【CSS】display:contentsの使い方

「display: contents」は、CSSの「display」プロパティの1つです。このプロパティを適用することで、親要素のスタイルや影響を受けずに、要素自身の子要素を描画することができます。

このように、「display: contents」を使用すると、親要素が実質的に存在しないように、子要素を直接の親要素として扱うことができます。

以下のようにHTMLとCSSを記述することで、「display: contents」を使用することができます。

HTML:

<div>
  <h1>タイトル</h1>
  <p>これは本文です</p>
</div>

CSS:

div {
  display: contents;
}

この例では、親要素である「div」に「display: contents」が適用されているため、「div」自体は描画されず、「h1」と「p」の子要素が直接の親要素として扱われます。

注意点として、「display: contents」は一部のブラウザではまだサポートされておらず、また、「display: contents」を使用する要素には子要素が存在する必要があります。