HTML5で超簡単！コピペするだけのアコーディオン

「よくある質問」のページなどでよく使われるアコーディオン。

見出しをクリックすると、長い説明文が下にピローンと出てくるやつです。

長い説明文をアコーディオン（折りたたみ）にすることで、だらだらと長いページもスッキリなりますし、見ているユーザーも目的の内容が探しやすく、利便性も上がります。

動きがあるものなので難しそうに見えますが、実はすごく簡単に実装できちゃいます。

今までは、jQueryやCSSに細かく記述して実現していたので、少し難易度が高そうなイメージですが、HTML5.1の登場で、簡単にタグだけで実現できるようになりました。

detailsタグとsummaryタグ
- とりあえず実装
- CSSで見た目を整える
まとめ

detailsタグとsummaryタグ

HTML5.1で新しく追加になった<details>タグと<summary>タグを使うだけで、アコーディオンのように詳細情報を非表示にすることが出来ます。

とりあえず実装

まずは、以下のソースコードで実装してみましょう。

<details>
	<summary>概要１</summary>
	詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１
</details>
<details>
	<summary>概要２</summary>
	詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２
</details>
<details>
	<summary>概要３</summary>
	詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３
</details>

簡単すぎてびっくりですね！

このソースコードを書くだけで、とりあえずのアコーディオンっぽい感じができます。

概要１

詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１詳細テキスト１

概要２

詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２詳細テキスト２

概要３

詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３詳細テキスト３

これでアコーディオンの動きはできているので、あとはCSSで見た目を整えていきます。

CSSで見た目を整える

details {
  border: 1px solid #ccc;
}
details:not(:last-child) {
  margin-bottom: 20px;
}
details summary {
  cursor: pointer;
  padding: 20px;
  font-size: 1.2rem;
  font-weight: bold;
}
details summary::before {
  margin-right: 20px;
}
details p {
  margin: 0;
  padding: 20px;
}

背景色やマージン、ボーダーを少し調整してあげるだけで、見た目も見やすくなりました。

一番重要なのは

cursor: pointer;

で、マウスカーソルをポインターに変更してあげることを忘れずにしてください。

概要１

概要２

概要３