もくじ
Webサイトでよく見かける「アコーディオンメニュー」を、JavaScriptやCSSを使わずにHTMLだけで実装できることをご存知ですか?
本記事では、HTML5で導入されたdetails
タグとsummary
タグを活用し、誰でも簡単に作れるアコーディオン(開閉ボタン)の作り方を分かりやすく解説します。
コピペで使えるサンプルコードも掲載しているので、ぜひご活用ください。
アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介しています。
-
【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法
もくじ単体用アコーディオン(折りたたみメニュー)【サンプル】単体用アコーディオン【コピペOK】HTML・CSSのみで単体用アコーディオンを実装単体用アコーディオンを複数利用する方法2段のアコーディオン ...
アコーディオンをjQueryで実装する方法は以下の記事で紹介しています。
-
【jQuery】アコーディオン(開閉ボタン)を実装する方法
もくじ【サンプル】jQueryでアコーディオンメニューを実装【コピペOK】jQueryを使用したアコーディオンメニューの実装コード【サンプル】jQueryでアクセシビリティ対応済みのアコーディオンメニ ...
アコーディオンをJavaScriptで実装する方法は以下の記事で紹介しています。
-
【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法
もくじ【実装例】jQuery未使用のアコーディオンメニュー(開閉ボタン)のサンプル【コピペOK】jQuery未使用のアコーディオンメニューの実装コード【実装例】アクセシビリティ対応済みのアコーディオン ...
【サンプル】HTMLのみでアコーディオンメニューを実装
Q. 質問1
Q. 質問2
【実装コード】HTMLのみでアコーディオンメニューを実装
Copyをクリックするとコピーできます。
<details>
<summary>Q. 質問1</summary>
<p>A. 回答1</p>
</details>
<details>
<summary>Q. 質問2</summary>
<p>A. 回答2</p>
</details>
detailsタグとsummaryタグにCSS当ててデザインを調整
HTMLのみだとデザインが単調なため、details
タグとsummary
タグにCSSを当てます。
アコーディオンが開いているときdetails
タグにopen
属性が自動で付与されます。
この特性を利用して閉まっているときは「+」、開いているときは「‐」になるようにCSSで調整します。
デフォルトで表示される「▶」部分は、CSSで非表示にしています。
【サンプル】CSSで調整したアコーディオンメニュー
Q. 質問1
Q. 質問2
【実装コード】CSSで調整したアコーディオンメニュー
Copyをクリックするとコピーできます。
<details>
<summary>Q. 質問1</summary>
<div class="details_content">A. 回答1</div>
</details>
<details>
<summary>Q. 質問2</summary>
<div class="details_content">A. 回答2</div>
</details>
details {
margin-bottom: 20px;
border: solid 1px #f09896;
}
summary {
position: relative;
padding: 10px 35px 10px 20px;
list-style: none; /* ▶を非表示 */
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
position: absolute;
top: 50%;
right: 20px;
width: 14px;
height: 0;
border-top: solid 2px #f09896;
transform: translateY(-50%);
content: "";
}
summary::after {
position: absolute;
top: 50%;
right: 26px;
width: 0;
height: 14px;
border-right: solid 2px #f09896;
transform: translateY(-50%);
content: "";
}
details[open] summary::after {
opacity: 0;
}
.details_content {
padding: 0 20px 10px;
}
まとめ
今回は、HTMLだけでアコーディオン(開閉ボタン)を実装する方法をご紹介しました。
details
タグとsummary
タグを使えば、JavaScriptや複雑なCSSを使わずに、誰でも簡単にアコーディオンメニューを作成できます。
デザインを調整したい場合は、CSSを追加することで見た目も自由にカスタマイズ可能です。
ぜひご自身のWebサイトやブログで活用してみてください。
アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介しています。
-
【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法
もくじ単体用アコーディオン(折りたたみメニュー)【サンプル】単体用アコーディオン【コピペOK】HTML・CSSのみで単体用アコーディオンを実装単体用アコーディオンを複数利用する方法2段のアコーディオン ...
アコーディオンをjQueryで実装する方法は以下の記事で紹介しています。
-
【jQuery】アコーディオン(開閉ボタン)を実装する方法
もくじ【サンプル】jQueryでアコーディオンメニューを実装【コピペOK】jQueryを使用したアコーディオンメニューの実装コード【サンプル】jQueryでアクセシビリティ対応済みのアコーディオンメニ ...
アコーディオンをJavaScriptで実装する方法は以下の記事で紹介しています。
-
【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法
もくじ【実装例】jQuery未使用のアコーディオンメニュー(開閉ボタン)のサンプル【コピペOK】jQuery未使用のアコーディオンメニューの実装コード【実装例】アクセシビリティ対応済みのアコーディオン ...