【あこーでぃおん】
アコーディオン とは？
最終更新:
💡 見出しを開いて、知りたい答えを読む
見出しを操作して、その下の詳細を開いたり閉じたりするUIパターン。FAQなどを整理でき、複数項目を同時に開ける方式と、1つだけ開く方式がある。
📌 このページのポイント
ひよこ FAQで、質問を押すと答えが出てくるもの？
ペンギン先生 そうだよ。見出しを並べ、気になる項目の詳細を開くUIだね。全部を一度に並べるより画面を整理しやすいけれど、閉じた内容を読むには操作が必要になるよ。
ひよこ 全部の答えを同時に開ける？
ペンギン先生 設計によるよ。複数を開けるものも、1つ開くと別の項目が閉じるものもある。答えを見比べたい画面では、1つしか開けないと不便な場合があるんだ。
ひよこ タブと何が違うの？
ペンギン先生 タブは選んだ項目に対応するパネルへ切り替えるUI。アコーディオンは見出しの下の詳細を開閉する。タブは必ず横並び、というわけではないので、並ぶ向きだけで区別しないでね。
ひよこ JavaScriptがなくても作れる？
ペンギン先生 ひよこ 標準機能なら、それで完成？
まとめ：ざっくりこれだけ覚えればOK！
「アコーディオン」って出てきたら「見出しから詳細を開閉する折りたたみUI」と思えばだいたいOK！
📖 おまけ：英語の意味
「Accordion」 ＝ アコーディオン（蛇腹楽器）
💬 Accordionは蛇腹のある楽器の名前。見出しから情報を開閉する様子をイメージして覚えよう。