アコーディオンとは何ですか？

クリックやタップで開閉するUIコンポーネントです。見出しだけを表示しておき、必要な項目だけを展開して詳細を読めるため、限られたスペースに多くの情報を整理できます。

アコーディオンのポイントは？

見出しをクリックすると詳細コンテンツが展開・折りたたみされるUIパターン。FAQページや設定画面など、多くの項目を省スペースで見せたいときに便利。HTML標準の details/summary 要素で実装でき、JavaScriptなしでも動作する

【あこーでぃおん】

公開: 2026年3月29日

💡 畳んで・開いて、情報を蛇腹のように伸び縮みさせるUI

📌 このページのポイント

アコーディオンUIの開閉イメージ

ひよこ

アコーディオンって、FAQでよく見る「＋」ボタンを押すと答えが出てくるやつ？

ペンギン先生

そのとおり！質問の見出しだけが並んでいて、気になるものをクリックすると答えがスルッと出てくるアレだよ。楽器のアコーディオンみたいに伸び縮みするからこの名前なんだ

ひよこ

タブと何が違うの？

ペンギン先生

タブは「常に1つだけ表示」だけど、アコーディオンは「複数を同時に開ける」のが一般的だよ。あとタブは横に並ぶけど、アコーディオンは縦に積み上がるから、モバイルの縦長画面と相性がいいんだ

ひよこ

実装ってJavaScriptが必要なの？

ペンギン先生

実はHTMLの `details` と `summary` 要素を使えば、JavaScriptなしで動くんだよ。ブラウザ標準の機能だからアクセシビリティも自動的に確保されるんだ

ひよこ

使うときに気をつけることってある？

ペンギン先生

中身が1〜2行しかないならアコーディオンにする意味が薄いよ。折りたたむことで余計なクリックが増えちゃうからね。あとSEO的にはアコーディオン内のテキストもGoogleはインデックスしてくれるけど、重要な情報は最初から見える場所に置くのがベターだよ

まとめ：ざっくりこれだけ覚えればOK！

「アコーディオン」って出てきたら「クリックで開閉する折りたたみUI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Accordion」＝アコーディオン（蛇腹楽器）

💬 楽器のアコーディオンの蛇腹がパタパタ開閉する様子にUIの動きが似ているから、この名前がついたんだよ