【HTMLのみ】detailsとsummaryタグでアコーディオンを作成する方法

Webサイト上には、クリックで開閉できるアコーディオンメニュー（折りたたみメニュー）がよく使用されていますね。

当サイトでも紹介している通り、アコーディオンメニューを作成するにはJavaScriptを書く必要があります。

あわせて読みたい

素のJavaScriptでアニメーション付きアコーディオンを実装する方法【3通り】 Webサイト上では、アコーディオンメニューがよく使われていますよね。 コンテンツを折り畳むことができるため、 ユーザーが欲しい情報をピンポイントで探せるページが縦…

しかし、実はHTML5から追加されたdetailsとsummaryタグを使用することで、HTMLのみで折りたたみメニューを作成することができます。

今回の記事では、このdetailsとsummaryを使用して、簡易的なアコーディオンメニューを作成する方法を紹介します。

こういった方には便利かと思いますので、ぜひ参考にしてみてください。

details・summaryで作成したアコーディオンメニューの実装DEMO

まずは、detailsとsummaryでどのようなアコーディオンメニューを作成できるか確認してみましょう。

以下に3種類の実装DEMOを用意しましたので、動作をチェックしてみてください。

実装DEMO1. デフォルトのdetails/summaryタグ（スタイルなし）

まずはdetailsとsummaryタグをデフォルトのスタイルのまま使用した例です。

実装DEMO2. 簡易スタイル付きのdetails/summaryタグ

続いては、CSSで簡易スタイルをつけたバージョンです。

実装DEMO3. 簡易スタイル付きのdetails/summaryタグ（始めから開いておく）

open属性を付与することで、最初からアコーディオンを開いておくことが可能です。

以上で実装DEMOの紹介は終わりです！

次はdetailsとsummaryタグの記述方法を見ていきましょう。

details・summaryの記述方法

detailsとsummaryの実際の記述方法は、以下の通りです。

<details>
  <summary>ここにキャプションを入力</summary>
  <p>ここにアコーディオンの中身を入力</p>
</details>

上記の順番で詳しく説明していきますね。

①detailsタグでアコーディオン全体を囲う

まずは折りたたみたい要素の全体をdetailsタグで囲います。

<details>
  <!-- ここにsummaryとその他要素を記入 -->
</details>

detailsタグにはopen属性を付与することができ、その場合アコーディオンが開いた状態になります。

<details open>
  <!-- ここにsummaryとその他要素を記入 -->
</details>

②キャプション（クリックする部分）をsummaryタグで囲う

summaryタグには、detailsタグで囲っている要素の要約、キャプション、タイトル等を記述します。

また、summaryで囲っている部分がクリックできる要素となります。

<details>
  <summary>ここにキャプションを入力</summary>
</details>

summaryタグの中にはテキストの他に、h1などの見出し要素やstrongタグ等が使用できます。

<details>
  <summary><h3>ここにタイトルを入力</h3></summary>
</details>

<details>
  <summary><strong>ここに強調したいキャプションを入力</strong></summary>
</details>

③アコーディオンの中身を作成する

最後にアコーディオンの中身を作成していきます。

中にはテキスト要素をそのまま記述しても良いですし、pタグ、ul・liタグ等も自由に使用可能です。

<details>
  <summary>ここにキャプションを入力</summary>
  アコーディオンの中身のテキストを入力
</details>

<details>
  <summary>ここにキャプションを入力</summary>
  <p>アコーディオンの中身のテキストを入力</p>
</details>

<details>
  <summary>ここにキャプションを入力</summary>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</details>

それぞれの見た目は以下のようになります。

以上でdetailsとsummaryタグの記述方法の説明は終わりです。

スタイルなしだと少しシンプルすぎるので、実装DEMOで紹介したようなアコーディオンの見た目になるCSSコードも紹介しておきます。

details・summaryタグをCSSで装飾する

ここでは以下のような見た目にするためのスタイルを紹介します！

details {
  border: 1px solid #333;
  border-radius: 4px;
}

summary {
  cursor: pointer;
  padding: 10px;
}

summary p {
  padding: 10px;
  border-top: 1px solid #333;
}

まずは全体を囲うdetailsタグに対してborderをつけることで、要素の境界線を表示します。

summaryタグには、クリックできる要素というのをユーザーに知らせるため、cursor:pointerを指定します。

これでマウスカーソルを当てると、ポインターが表示されるようになりました。

あとはpaddingで余白等を調整して終わりです！

ここでは簡易的にしたかったので最低限のスタイルのみですが、ぜひいろんな装飾を試してみてください。

details・summaryタグのブラウザ対応状況

details・summaryタグのブラウザ対応状況は、以下の通りです。

IE以外のモダンブラウザではほぼサポートされていますね。

もしIEにも対応させたいという場合はpolyfillが用意されていますので、以下をチェックしてみてください。

【まとめ】details・summaryタグを使用するとHTMLだけでアコーディオンメニューを実装可能！

以上、detailsとsummaryタグを使用して、HTMLのみでアコーディオンメニューを実装する方法を紹介しました。

JSで作成したアコーディオンのほうがアニメーションやデザイン面の自由度が高いですが、簡易的なものならHTMLのみで十分ですね。

JavaScriptでアコーディオンメニューを作成する方法も別記事で紹介していますので、ぜひそちらも参考にしてみてください。

あわせて読みたい

素のJavaScriptでアニメーション付きアコーディオンを実装する方法【3通り】 Webサイト上では、アコーディオンメニューがよく使われていますよね。 コンテンツを折り畳むことができるため、 ユーザーが欲しい情報をピンポイントで探せるページが縦…