やってみよう画面の下のアイコンを押してみてください
ナビゲーションメジャー（よく見る）
タブバー
Tab Bar / Bottom Navigation
画面の下にアイコンが並んでいて、押すと画面が切り替わる。
別名ボトムナビゲーション下タブナビゲーションバーボトムタブ
どこで使われている？
- よく見かける場所
- Instagram、LINE、YouTube、App Store などほぼすべてのスマホアプリ
- 使うとよい場面
- よく使う3〜5個の画面を行き来するアプリ
- 避けたい場面
- パソコン向けのWebサイト（上部のメニューにする）、6個以上の行き先
補足iPhoneでは「タブバー」、Androidでは「ナビゲーションバー（ボトムナビゲーション）」と呼ばれます。
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「タブバー（Tab Bar / Bottom Navigation）」を実装してください。 動き：画面下部に3〜5個のアイコンと短いラベルを横に並べて固定表示する。押したタブのアイコンと文字に色を付けて選択中であることを示し、上の画面の内容をそのタブのものに切り替える。 使う部品：Bottom Navigation（position: fixed で画面下に固定して自作）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Bottom Navigation（position: fixed で画面下に固定して自作） |
|---|---|
| iPhoneアプリなら | TabView |
| Androidアプリなら | NavigationBar（Material 3） |
| Flutterなら | NavigationBar（旧 BottomNavigationBar） |
| React Nativeなら | Bottom Tabs Navigator（React Navigation） |