HTML5 `` と `` で折りたたみ可能な Div を作成する方法-CSSチュートリアル-php.cn

HTML5 `` と `` で折りたたみ可能な Div を作成する方法

Linda Hamilton

リリース： 2024-10-31 02:56:02

オリジナル

563 人が閲覧しました

How to Create Collapsible Divs with HTML5 `` and ``?

「HTML と CSS を使用して折りたたみ可能な div を作成する方法」

折りたたみ可能な div は、Web ページ上に動的で整理されたコンテンツを表示するためによく使用されます。。通常、これらの div にはヘッダーと非表示の本文が含まれており、ユーザーの操作に応じて展開したり折りたたんだりできます。 CSS のみを使用して折りたたみ可能な div を作成すると、特にクリーンで簡単なコードベースを維持する場合に便利です。

:target 擬似クラス

CSS の折りたたみ可能な div に対する以前のアプローチ:target 疑似クラスを利用します。これは、特定の要素がターゲット属性 (例: ) によってリンクされているときにスタイルをアクティブ化します。ただし、この手法では、複数の折りたたみ可能な要素に対してかなりの繰り返しが必要となり、CSS コードが肥大化します。

HTML5 <概要>タグ

代替の洗練されたソリューションは HTML5

にあります。 <概要>タグ。要素は切り替え可能なヘッダーを表し、

要素は切り替え可能なヘッダーを表します。要素は、折りたたみ可能なコンテンツをカプセル化します。このアプローチにより、カスタム JavaScript や複雑な CSS が不要になり、折りたたみ可能な div を作成するプロセスが大幅に簡素化されます。

サンプルコード

これは < の使用法を示す例です。 ;詳細> <概要>:

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>

ログイン後にコピー

ブラウザの互換性

一方、<詳細> <概要>タグは便利なソリューションを提供しますが、ブラウザーの互換性を考慮する必要があります。これらは、Chrome、Firefox、Safari などの最新のブラウザでサポートされています。ただし、すべてのブラウザが同じ動作でレンダリングするわけではありません。

幅広いブラウザをサポートするには、必要に応じて、details-polyfill のようなポリフィルを使用できます。

以上がHTML5 `` と `` で折りたたみ可能な Div を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。