← 一覧へ

やってみよう画面の下のアイコンを押してみてください

ナビゲーションメジャー（よく見る）

タブバー

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）

似ているもの・一緒に使うもの