やってみよう質問の行を押してみてください
表示・レイアウトメジャー（よく見る）
アコーディオン
Accordion
見出しを押すと、下に中身がパカッと開く。もう一度押すと閉じる。
別名折りたたみ開閉パネルエクスパンダーディスクロージャーCollapse
どこで使われている？
- よく見かける場所
- よくある質問（FAQ）、料金表、設定画面、スマホ表示のフッター
- 使うとよい場面
- 項目が多く、全部を一度に見せると長すぎるとき
- 避けたい場面
- 中身をすぐ比べたい情報、ほとんどの人が全部読む大事な説明
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「アコーディオン（Accordion）」を実装してください。 動き：見出し行をタップすると、その下に詳細の内容が高さアニメーション付きで展開される。右端の矢印アイコンは開閉に合わせて回転する。もう一度タップで閉じる。 使う部品：Accordion（<details> と <summary> で作れる）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Accordion（<details> と <summary> で作れる） |
|---|---|
| iPhoneアプリなら | DisclosureGroup |
| Androidアプリなら | 標準部品なし。AnimatedVisibility で開閉を自作 |
| Flutterなら | ExpansionTile |
| React Nativeなら | Accordion（自作 or ライブラリ） |