dedede HTMLだけでアコーディオンを作る方法
2021年11月現在,IE以外のブラウザにおいて、HTMLのみでアコーディオンが作ることができます。
結論から言うと,
detailsタグと summaryタグ というものを使ってできます。本記事の最後にコードを載せておきましたのでコピぺしてそのまま使用可能です。
成果物
この様にjQueryを使った場合と遜色ない出来ではないでしょうか？
CSSを使わなくても実装できますが、HTMLだけでは見栄えが悪いです。そのため、実用的に使用するためにはCSSは併せて使用しましょう。
HTML
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLだけでアコーディオンを作ろう</title>
<link rel="stylesheet" href="./css/style.min.css">
</head>
<body>
<section calss="l-inner">
<details class="p-accordion">
<summary class="p-accordion__title">
Q. HTMLだけでアコーディオンを作れますか？
</summary>
<div class="p-accordion__contents">
<p>はい、機能的には可能です。ただし実用的に使う場合はCSSも必要です。
</p>
</div>
</details>
<details class="p-accordion">
<summary class="p-accordion__title">
Q. jQueryも使っていませんか？
</summary>
<div class="p-accordion__contents">
<p>はい、使っていません。detailsタグとsummaryタグで実装できます。
</p>
</div>
</details>
<details class="p-accordion">
<summary class="">
Q. CSSがないとどうなりますか？
</summary>
<div class="">
<p>このように見た目がよろしくないです。
</p>
</div>
</details>
</section>
</body>
</html>解説するほどでもありませんが、detailsタグの中にsummaryタグと、その他コンテンツを入れるだけです。
CSS ( SCSS記法 )
.l-inner {
padding-left: 20px;
padding-right: 20px;
}
.p-accordion {
width: 80%;
margin: 0 auto;
&+&{ //２つ目以降のアコーディオン
margin-top: 20px;
}
}
.p-accordion__title {
font-size: 18px;
background-color: #454545;
padding: 16px 24px;
list-style: none; // 初期設定のトグルボタンを消す
color: #fefefe;
position: relative;
&::after {
content: "+";
font-size: 20px;
position: absolute;
right: 8px;
top: 12px;
font-weight: bold;
line-height: 28px;
}
}
.p-accordion[open] .p-accordion__title::after{
//アコーデイオンが開かれている時の設定
content: "ー";
right:3px; //位置の微調整
}こちらもコメントを参照していただきたいのですが、以下の3点のポイントを押さえておきましょう。
- 初期設定のトグルアイコン “▶︎” を非表示にする場合は summaryタグにline-style:none;をつける
- after擬似要素でオリジナルのトグルアイコンを作る
- アコーディオンが開かれている時は detailsタグに[opne]属性が付与される。
対応ブラウザ
2021年11月現在、Can I UseによるとIE以外のブラウザ全てで動作します。サポート終了も近いので個人的には使用する機会が増えていくと思っています。
ただし、使用する際はブラウザについては確認するようにしてくださいね！
まとめ
- detailsタグとsummaryタグを使ってHTMだけでアコーディオンができる
- 実用的に使うにはCSSも必須
- IE以外のブラウザには対応
HTMLだけで簡単にアコーディオンが実装できるので、ぜひ活用してみてください!
最後に…
LINE友達登録者限定で、WEB制作実践で使うTipsを定期的に配布しております。
本記事を良いと思っていただいた方で有料級情報を無料で受け取りたい方は、LINE追加してみてくださいね！
概念ではなく、実践で使える具体的なスキルであなたをサポートします。
