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

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

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

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

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

  • アコーディオンメニューを手軽に実装したい
  • JavaScriptを書かずに作りたい
  • IEは対応しなくてよい

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

目次

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

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

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

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

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

タイトル(クリックしてください)

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

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

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

タイトル(クリックしてください)

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

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

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

タイトル(クリックしてください)

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

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

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

details・summaryの記述方法

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

<details>
  <summary>ここにキャプションを入力</summary>
  <p>ここにアコーディオンの中身を入力</p>
</details>
  1. detailsタグでアコーディオン全体を囲う
  2. キャプション(クリックする部分)をsummaryタグで囲う
  3. アコーディオンの中身を作成する

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

①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タグ、ulliタグ等も自由に使用可能です。

<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>

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

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

アコーディオンの中身のテキストを入力

ここにキャプションを入力
  • リスト1
  • リスト2
  • リスト3

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

スタイルなしだと少しシンプルすぎるので、実装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タグのブラウザ対応状況

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

“details” | Can I use…

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

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

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

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

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

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

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次