detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
detailsタグとsummaryタグ。HTMLだけでアコーディオンメニュー。
JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉（アコーディオンメニュー）ができようになった。
情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。
コピペで使い回しも可能。
detailsとsummaryの使用例。
- detailsタグで全体を囲み、summaryタグでクリックで開閉する文字列を指定する。
- summaryタグの前には擬似要素の::markerで、自動的に三角形が表示される。
初期状態の表示。
detailsとsummaryを使い、pタグをくくったノーマルな使用方法。デフォルトで三角形が付く。
例）
クリックするとアコーディオンが開閉します。
detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。
detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。
HTML
<details>
<summary>クリックするとアコーディオンが開閉します。</summary>
<p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
<p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
</details>
CSS
不要。
details要素のopen属性。
open属性。
detailsの属性でopenを付けると、最初から開かれた状態にすることができる。値は特に必要なし。
例）
クリックするとアコーディオンが開閉します。
detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。
detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。
HTML
<details open>
<summary>クリックするとアコーディオンが開閉します。</summary>
<p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
<p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
</details>
CSS
不要。
CSSで見た目や動きを装飾できる。
三角形。
summaryの前の::markerによる三角形。
三角形を無くしたいときは、summaryをブロック要素にすると消える。
例）
クリックするとアコーディオンが開閉します。
detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。
detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。
HTML
<details>
<summary class="marker">クリックするとアコーディオンが開閉します。</summary>
<p>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</p>
<p>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</p>
</details>
CSS
details summary.marker {
display: block;
}
マウスカーソル。
背景色と文字色とマウスカーソルなど。
背景色はbackground-colorで、文字色はcolor、余白はpaddingで。
マウスカーソルを付けたいときは、CSSのcursor: pointer;で可能。
「+」や「-」などのマークは、擬似要素を使用したcontentとfloatで簡単に設置できる。
例）
クリックするとアコーディオンが開閉します。
detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。
detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。
HTML
<details>
<summary class="marker bg pointer mark">クリックするとアコーディオンが開閉します。</summary>
<p>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</p>
<p>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</p>
</details>
CSS
details summary.marker {
display: block;
}
details summary.bg {
background-color: #333;
padding: 5px 10px;
color: #fff;
}
details summary.pointer {
cursor: pointer;
}
details summary.mark::after {
content: "＋";
float: right;
}
details[open] summary.mark::after {
content: "−";
}
※説明用として色々クラスを使用していますが、まとめても可能です。
CSSでのアニメーション。
CSSでのスライドアニメーション。
CSSだけでのアニメーションはまだ難しい。
残念ながらJavaScriptを使った場合よりも、現時点では（2022年12月）まだ難しい。
- 高さの指定が必要となるが、CSSで高さを決めると、文字数が増えた場合に崩れてしまうので対応がしづらい。
- animationを指定しても、1度目は動作するが、2度目以降は挙動が定まらない。
- jQueryの方が簡単かも。
例）
クリックするとアコーディオンが開閉します。
detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。
detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。
HTML
<details>
<summary class="animation">クリックするとアコーディオンが開閉します。</summary>
<p>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</p>
<p>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</p>
</details>
CSS
details summary.animation {
display: block;
background-color: #333;
padding: 5px 10px;
color: #fff;
cursor: pointer;
}
details summary.animation::after {
content: "＋";
float: right;
}
details[open] summary.animation::after {
content: "−";
}
details[open] summary.animation + p {
animation: accordion 0.4s ease;
overflow: hidden;
}
@keyframes accordion {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
jQueryでのアニメーション。
jQueryでのスライドアニメーション。
jQueryの方が簡単でスムーズ。
detailsタグとsummaryタグは魅力的なのだが、動きが良くなかった。同じようなことをjQueryで行ってみると、やはりまだこちらの方が楽にできる。
例）
HTML
jQueryは、なんとなくbodyの閉じタグの直前に書いた方が良いと言われているが、必ずしもそういうことはない。jQueryの公式サイトでは、head内に書かれている。
参考メモ：jQueryの読み込み位置はhead内。（bodyの閉じタグの前じゃない!?）
head内。
<script src="https://code.jquery.com/jquery-xxxxx.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
（※jquery-xxxxx.min.jsのxxxxx部分や、integrityの値などはバージョンによって記述。）
body内。
<dl class="slide_down">
<dt>クリックするとアコーディオンが開閉します。</dt>
<dd>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</dd>
<dd>detailsタグとsummaryタグによる、HTMLとCSSのみのアコーディオンメニュー。</dd>
</dl>
bodyの閉じタグの前。
$(function(){
$(".slide_down").click(function () {
$(".slide_down dt").toggleClass("on");
});
$(".slide_down").click(function () {
$(".slide_down dd").slideToggle(400);
});
});
CSS
.slide_down dt {
background-color: #333;
padding: 5px 10px;
color: #fff;
cursor: pointer;
}
.slide_down dt::after {
content: "＋";
float: right;
}
.slide_down dt.on::after {
content: "−";
}
.slide_down dd {
display: none;
}
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
