【detailタグ】HTMLのみでアコーディオンメニューを作る方法！

はじめに

HTMLには、詳細を非表示にしておいて、クリックすることで表示することができるdetailタグがあります。要素の表示・非表示をCSSやJavaScriptで行うのが一般的ですが、HTMLのdetailタグを使用すればHTMLのみで完結できてしまいます。

detailタグは、読者が必要な情報にアクセスするのを簡単にするために使われます。

例えば、長いフォームの場合、detailタグを使用することで、重要な情報を非表示にすることができます。このように、detailタグは、ユーザーエクスペリエンスを改善するのに役立ちます。

詳細タグには、2つの要素があります。1つ目は、summary要素で、詳細のタイトルを表します。2つ目は、詳細な情報を含むコンテンツの要素で、通常はpタグを使用します。

使い方

このタグを使用するためには、以下のように記述します。

<details>
  <summary>詳細を表示する</summary>
  <p>ここに詳細な情報を書きます。</p>
</details>

上記のコードでは、summaryタグが詳細のタイトルを表し、pタグの中に詳細な情報を書くことができます。初めは、詳細は非表示にされているため、読者はsummaryタグをクリックすることで詳細を表示できます。

以下の例を見てみましょう。

<details>
  <summary>展開すると答えが見えるクイズ</summary>
  <p>日本の首都は東京です。</p>
</details>

このコードをブラウザで実行すると、以下のように表示されます。

「展開すると答えが見えるクイズ」のタイトルの下に、詳細な情報が含まれるpタグがあります。初めは、詳細は非表示になっているため、読者はsummaryタグをクリックすることで答えを表示することができます。

まとめ

詳細タグは、HTML5で導入された新しいタグの1つです。HTML5は、より使いやすく、より柔軟なWebサイトの開発を目指しています。詳細タグを使用すると、Webサイトの閲覧者が必要な情報にアクセスするのが簡単になります。