detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。 / メモ / いがわ

detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。

2022.12.10

Contents - 目次

1 detailsとsummary。HTMLだけでアコーディオンメニュー。
2 CSSで見た目や動きを装飾できる。
3 CSSでのアニメーション。
4 jQueryでのアニメーション。
5 CSS 関連メモ。

detailsとsummary。HTMLだけでアコーディオンメニュー。

detailsタグとsummaryタグ。

JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉（アコーディオンメニュー）ができようになった。

情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。

コピペで使い回しも可能。pets

detailsとsummaryの使い方。HTMLだけでアコーディオンを実装。

detailsとsummaryの使用例。

detailsタグで全体を囲み、summaryタグでクリックで開閉する文字列を指定する。
summaryタグの前には擬似要素の::markerで、自動的に三角形が表示される。

detailsとsummaryの、初期状態の表示。

detailsとsummaryを使い、pタグでテキストををくくったノーマルな使用方法。デフォルトで三角形が付く。

例）

クリックするとアコーディオンが開閉します。

detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。

HTML

<details>
 <summary>クリックするとアコーディオンが開閉します。</summary>
 <p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
 <p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
</details>

CSS

不要。

detailsとsummaryの使い方。HTMLとCSSのみでアコーディオン。

details要素のopen属性。

open属性。

detailsの属性でopenを付けると、最初から開かれた状態にすることができる。値は特に必要なし。

例）

クリックするとアコーディオンが開閉します。

detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。

HTML

<details open>
  <summary>クリックするとアコーディオンが開閉します。</summary>
 <p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
 <p>detailsタグとsummaryタグによる、HTMLのみのアコーディオンメニュー。<p>
</details>

CSS

不要。

detailsとsummaryの使い方。HTMLだけでアコーディオンを実装。

CSSで見た目や動きを装飾できる。

三角形。

summaryの前の::markerによる三角形。

三角形を無くしたいときは、summaryをブロック要素にすると消える。

例）

クリックするとアコーディオンが開閉します。

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のみのアコーディオンメニュー。

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のみのアコーディオンメニュー。

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で行ってみると、やはりまだこちらの方が楽にできる。

例）

クリックするとアコーディオンが開閉します。: dlタグとdt、ddタグによる、jQueryを使用したアコーディオンメニュー。; dlタグとdt、ddタグによる、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;
}

detailsとsummaryの使い方を学ぶ猫たち。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。