Webサイトでよく見かける、クリックすると隠れていた文章がパッと表示される「折りたたみ機能（アコーディオンメニュー）」。
「Q&A（よくある質問）」や「スマートフォン向けのメニュー」などで頻繁に使われるこの機能ですが、実装するために難しいJavaScriptが必要だと思っていませんか？
この記事では、HTMLの <details> と <summary> タグを使った基本的な実装方法から、CSSを使ったおしゃれなデザインカスタマイズ、そして最新のCSSテクニックを使った「ふわっと開く」アニメーションの実装まで、サンプルコード付きで徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
HTMLだけで折りたたみを実装する基本の「detailsタグ」
HTML5から導入され、現在ではすべての主要ブラウザで使えるようになったのが <details>（ディテールズ）タグと <summary>（サマリー）タグです。
これらを組み合わせるだけで、開閉機能を持ったボックスを作ることができます。
基本的な書き方と仕組み
使い方は非常にシンプルです。
全体を <details> で囲み、常に表示させておきたい見出し部分を <summary> に記述します。
<details>
<summary>クリックして詳細を表示</summary>
<p>ここに隠されていたコンテンツが表示されます。</p>
<p>文章だけでなく、画像や表なども入れることができます。</p>
</details>
<details> タグが折りたたみ機能の本体であり、ブラウザはこれを認識すると自動的に開閉の仕組みを提供します。
その中にある <summary> タグで囲まれた部分が「開閉ボタン（見出し）」の役割を果たします。
それ以外のコンテンツ（上記の例では <p> タグ）は、初期状態では隠されており、見出しをクリックすることで表示されます。
JavaScriptを一切書かずにここまで実装できるのが、このタグの最大のメリットです。
最初から開いた状態にする「open属性」
ページを読み込んだ時点で、最初から中身を開いておきたい場合は、<details> タグに open 属性を付与します。
<details open>
<summary>最初から開いているメニュー</summary>
<p>この文章は最初から表示されています。</p>
</details>
open 属性がついている <details> 要素は、ページロード時に展開された状態で表示されます。
ユーザーが手動で閉じたり開いたりすると、ブラウザが自動的にこの open 属性を付け外しして状態を管理してくれます。
CSSで矢印アイコンやデザインをカスタマイズする
デフォルトの状態では、<summary> の左側に黒い三角形（▶）が表示されますが、サイトのデザインに合わせてこれを変更したり、消したりしたい場合も多いでしょう。
CSSを使えば、これらの見た目を自由にカスタマイズ可能です。
デフォルトの矢印（マーカー）を消す方法
ブラウザが標準で表示する矢印は list-style プロパティで制御できます。
/* summaryタグのデフォルト矢印を消す */
summary {
list-style: none; /* 多くのブラウザでこれで消える */
}
/* ChromeやSafariなどの一部ブラウザ向け（念のため） */
summary::-webkit-details-marker {
display: none;
}
summary 要素には、箇条書きリストと同じようなマーカー（矢印）が設定されています。
list-style: none; を指定することで、このマーカーを非表示にできます。
これにより、ただのテキストだけが表示されるようになるため、後は自分で好きなアイコンを背景画像や擬似要素で追加できるようになります。
オリジナルのアイコンを付けて動きをつける
擬似要素（::after）を使って、プラス（＋）マイナス（－）のアイコンや、回転する矢印を作ってみましょう。
<details class="custom-accordion">
<summary>おしゃれなアコーディオン</summary>
<div class="content">
<p>中身のテキストです。</p>
</div>
</details>
<style>
.custom-accordion {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
summary {
list-style: none;
cursor: pointer;
font-weight: bold;
position: relative;
padding-right: 30px; /* アイコンのスペース */
}
/* 独自の矢印アイコンを作成 */
summary::after {
content: "▼";
position: absolute;
right: 0;
top: 0;
transition: transform 0.3s; /* 回転アニメーション */
}
/* 開いている状態（detailsにopen属性がある時）のデザイン */
details[open] summary::after {
transform: rotate(180deg); /* 180度回転 */
}
</style>
details[open] というセレクタを使うと、「開いている状態」の時だけにCSSを適用できます。
ここでは、通常時は下向きの矢印（▼）を表示し、開いている時（open属性がある時）は transform: rotate(180deg); で矢印を上向きに回転させています。
transition を設定しているため、クリックするとクルッと回るアニメーションになります。
最新CSSで「ふわっと」開閉するアニメーションを実装
これまで、<details> タグの開閉をCSSだけでアニメーションさせるのは非常に困難でした（高さが auto だと transition が効かないため）。
しかし、近年のWeb標準の進化により、CSSだけでスムーズな開閉アニメーションが可能になっています。
interpolate-size または grid を使ったアニメーション
ここでは、比較的対応ブラウザが多い grid を使ったテクニックを紹介します。
<details class="animated-details">
<summary>アニメーション付きメニュー</summary>
<div class="details-inner">
<div class="inner-content">
<p>ふんわりと開閉するコンテンツです。<br>
CSS Gridを使うことで、高さが不明でもアニメーションできます。</p>
</div>
</div>
</details>
<style>
.animated-details .details-inner {
display: grid;
grid-template-rows: 0fr; /* 高さを0にする */
transition: grid-template-rows 0.3s ease-out;
overflow: hidden;
}
.animated-details .inner-content {
min-height: 0;
}
/* 開いている時は高さを1fr（中身の分だけ）にする */
.animated-details[open] .details-inner {
grid-template-rows: 1fr;
}
</style>
CSS Gridの grid-template-rows プロパティはアニメーション可能です。
通常時は 0fr（高さゼロ）にしておき、open 属性がついた時に 1fr（中身の高さ）に変化させることで、高さがわからないコンテンツでもヌルっと開くアニメーションを実現しています。
JavaScriptを使わずにリッチな動きを作れるため、非常におすすめの手法です。
【応用】name属性でアコーディオンの連動（排他制御）を行う
「Aを開いたら、開いていたBを勝手に閉じる」という、いわゆるアコーディオンメニューの動作。
以前はJavaScriptが必須でしたが、現在は name 属性 を使うだけで実装可能です。
1つしか開けないアコーディオンの実装
<details name="faq-group">
<summary>質問1：料金はいくらですか？</summary>
<p>基本プランは月額980円です。</p>
</details>
<details name="faq-group">
<summary>質問2：解約はいつでもできますか？</summary>
<p>はい、マイページからいつでも解約可能です。</p>
</details>
<details name="faq-group">
<summary>質問3：サポートはありますか？</summary>
<p>24時間体制でメールサポートを受け付けています。</p>
</details>
複数の <details> タグに、同じ値の name 属性（ここでは faq-group）を付与しています。
これだけでブラウザは「これらはグループである」と認識し、グループ内のどれか一つを開くと、自動的に他の項目を閉じるようになります。
Q&Aページやスマホのドロワーメニューなどで非常に便利な機能です。
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTML/CSSでの折りたたみ（アコーディオン）の作り方について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
