やってみよう右上の2つのボタンを押して、並び方の変化を見てください
ボタン・操作部品メジャー（よく見る）
表示切り替え（リスト／グリッド）
View Switcher (List / Grid)
右上の小さなボタンで、一覧を「縦1列のリスト」と「タイル状のグリッド」に切り替える。
別名リスト表示とグリッド表示表示モード切り替え一覧の見た目の切り替えレイアウト切り替え
どこで使われている？
- よく見かける場所
- ネットショップの商品一覧、ファイル・写真の一覧、Google ドライブ
- 使うとよい場面
- 写真で選ぶ人と、名前や情報で選ぶ人の両方がいる一覧
- 避けたい場面
- 写真のない一覧（グリッドにする意味がない）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「表示切り替え（リスト／グリッド）（View Switcher (List / Grid)）」を実装してください。 動き：一覧の上に、リスト（横線のアイコン）とグリッド（四角のアイコン）の2つのボタンを並べ、選んだ方を強調する。切り替えると、項目がなめらかに移動して並び方が変わる。 使う部品：ボタンで一覧の CSS（grid と flex）を切り替える
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | ボタンで一覧の CSS（grid と flex）を切り替える |
|---|---|
| iPhoneアプリなら | Picker（.segmented）で List と LazyVGrid を切り替え |
| Androidアプリなら | IconToggleButton で LazyColumn と LazyVerticalGrid を切り替え |
| Flutterなら | ToggleButtons で ListView と GridView を切り替え |
| React Nativeなら | FlatList の numColumns を切り替え |