HTMLのdetailsタグの使い方！アコーディオンメニューを作る

html

HTMLのdetailsタグについて書いています。

detailsタグは、ユーザーがクリックして表示・非表示を切り替えられるインタラクティブなウィジェットを作成するために使用されます。
FAQ（よくある質問）、アコーディオンメニュー、詳細情報の表示・非表示など、Webページ上でコンテンツを整理し、初期表示の情報を少なく保ちながら、ユーザーが必要に応じて詳細を確認できる機能を提供します。

detailsタグの基本的な使い方と表示

detailsタグは、開閉したいコンテンツを囲むだけで使用できます。
何も指定しない場合、ブラウザはデフォルトで「詳細」のような表示可能なテキスト（通常は小さな三角形のアイコン付き）を提供し、クリックすると内部のコンテンツが表示されます。

<details>
  <p>この部分は、クリックすると表示・非表示が切り替わります。</p>
  <p>ここには詳細な情報や、初期状態では隠しておきたい内容を記述します。</p>
</details>

<details>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ul>
</details>

上記のHTMLは、ブラウザで以下のように表示されます。（Chromeのデフォルト表示）
クリックすると内容が表示され、再度クリックすると閉じることが確認できました。

HTMLのdetailsタグの表示確認(開閉動作)

detailsタグにsummaryタグを使って見出しを作る

detailsタグは、その子要素として<summary>タグを持つことが推奨されます。
<summary>タグは、<details>の開閉ボタンとして機能する見出しを提供します。

この見出しをクリックすることで、<details>のコンテンツが表示・非表示になります。

<details>
  <summary>よくある質問1：注文方法について</summary>
  <p>A. ご注文は、ウェブサイトの注文フォームから行うことができます。</p>
  <p>詳細な手順については、ヘルプページをご確認ください。</p>
</details>

<details>
  <summary>よくある質問2：商品の返品・交換は可能ですか？</summary>
  <p>A. 未使用品に限り、商品到着後7日以内であれば返品・交換が可能です。</p>
  <p>詳細は返品ポリシーをご覧ください。</p>
</details>

上記のHTMLは、ブラウザで以下のように表示されます。
<summary>タグで見出しができていることが確認できます。
detailsタグにsummaryタグを使って見出しを作成

<summary> を使用しない場合、ブラウザはデフォルトの「詳細」などのテキストを表示します。
明確な見出しを提供するために、<summary> の使用が強く推奨されます。

open属性で初期状態を制御する

<details>タグには、open という真偽値属性があります。
この属性を追加すると、ページが読み込まれた時点で <details>のコンテンツが開いた状態で表示されます。

<details open>
  <summary>はじめに</summary>
  <p>このセクションは最初から開いています。</p>
</details>

<details>
  <summary>さらに詳しく</summary>
  <p>このセクションは最初は閉じています。</p>
</details>

表示すると、下記のようになりました。
はじめからコンテンツが開いていることが確認できました。
open属性でdetailsタグをはじめから開く

detailsタグでアコーディオン作成

detailsタグとその子要素である<summary>は、CSSで自由にスタイリングすることができます。
デフォルトの三角形アイコン（::marker または ::-webkit-details-marker）の表示も制御できます。

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

summary {
  padding: 10px 15px;
  font-weight: bold;
  cursor: pointer;
  background-color: #e0e0e0;
  border-bottom: 1px solid #ccc;
  list-style: none; /* デフォルトのマーカーを非表示にする */
}

summary::-webkit-details-marker { /* Chrome/Safari のデフォルトマーカーを非表示 */
  display: none;
}

summary::before { /* カスタムアイコンを追加 */
  content: '▶';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s ease-in-out;
}

details[open] summary::before { /* 開いたときにアイコンを回転 */
  transform: rotate(90deg);
}

details p {
  padding: 10px 15px;
  margin: 0;
}

/* 開いた状態のsummaryのスタイル */
details[open] summary {
  border-bottom: none;
}

<details>
  <summary>カスタムデザインの質問：背景色を変更できますか？</summary>
  <p>はい、CSSで `details` 要素の `background-color` プロパティを変更することで、背景色を自由にカスタマイズできます。</p>
</details>

上記のCSSを適用することで、<details>要素にボーダー、背景色、カスタムアイコンなどを追加されます。
ブラウザで確認すると、下記のように見やすいアコーディオン形式のコンテンツができました。
detailsタグにCSSを適用してアコーディオン作成

detailsタグを使用する際の注意点

  • インタラクティブな開閉に限定: detailsタグは、ユーザーがクリックして詳細を隠したり表示したりするコンテンツにのみ使用するべきです。単にグループ化するためだけの要素には使用するべきではありません。
  • <summary> タグの推奨: ユーザーが何を開閉するのかを明確にするため、<summary> タグを使用して見出しを提供することを強く推奨します。
  • コンテンツの適切な配置: detailsの中に記述するコンテンツは、開閉される内容として意味的に適切であるべきです。
  • アクセシビリティへの配慮:
    • <summary> には、簡潔で分かりやすいテキストを指定し、クリックする意味を明確に伝えましょう。
    • CSSでカスタムアイコンを使用する場合でも、キーボードナビゲーションやスクリーンリーダーでの動作が損なわれないように注意が必要です。
  • JavaScriptとの連携: details要素の開閉状態はJavaScriptで制御することも可能ですが、基本機能はHTML単体で提供されるため、不要なJavaScriptは避けましょう。

detailsタグの記述例

以下にdetailsタグの記述例を示します。

<section>
  <h2>よくある質問 (FAQ)</h2>
  <details>
    <summary>Q1: 配送にはどのくらい時間がかかりますか？</summary>
    <p>A1: ご注文確定後、通常3営業日以内に発送いたします。地域により異なりますが、発送から1～3日でお届けできます。</p>
  </details>
  <details>
    <summary>Q2: 支払い方法は何がありますか？</summary>
    <p>A2: クレジットカード（Visa, Mastercard, JCB）、銀行振込、コンビニ決済に対応しております。</p>
  </details>
</section>

<details>
  <summary>詳細情報を見る（クリックで開閉）</summary>
  <div>
    <h4>関連資料</h4>
    <ul>
      <li><a href="/doc1.pdf">資料1（PDF）</a></li>
      <li><a href="/doc2.pdf">資料2（PDF）</a></li>
    </ul>
    <p>追加情報：このプロジェクトは〇〇年に開始されました。</p>
  </div>
</details>

よくある質問のアコーディオンと、なんらかの詳細情報補足用のアコーディオンです。
先ほどのCSSを適用した形だと下記のように表示されました。
detailsタグの記述例(よくある質問・詳細情報)

まとめ

detailsタグは、Webページ上でインタラクティブな開閉コンテンツを簡単に実装できる非常に便利なHTML要素です。
<summary>タグと組み合わせることで、ユーザーが必要な情報にアクセスできるようにしながら、初期表示をすっきりと保つことができます。

アクセシビリティにも配慮し、適切な場面でdetailsタグを効果的に活用しましょう。

HTML
yasuaki

コメント