スマホ用ボトムタブナビ
スマホアプリのような、画面下部に固定されたタブナビです。バーは position: absolute （実サイトでは fixed 想定）で下端に貼り付け、 grid-template-columns: repeat(4,1fr) で 4 つのタブを等幅に並べます。
解説
スマホアプリのような、画面下部に固定されたタブナビです。バーは position: absolute（実サイトでは fixed 想定）で下端に貼り付け、grid-template-columns: repeat(4,1fr) で 4 つのタブを等幅に並べます。各ボタンはアイコンとラベルを縦積みにし、現在地のタブには is-active クラスを付けてアクセントカラーで強調します。アイコンは外部フォントに頼らないインライン SVG で、上向きの影を入れてコンテンツの上に浮いて見せています。
使いどころ
- ネイティブアプリ風の操作感を出したいモバイルサイトや PWA
- 主要導線が 3〜5 個に絞れる、片手操作前提のサービス
- マイページ・ホーム・検索など、行き来の多い画面の常設ナビ
タブ数はグリッドの列数を変えれば増減できますが、親指で押せる 4〜5 個 までに抑えると押し間違いが減ります。実装では本文末尾にバーの高さ分の余白（このコードでは padding-bottom）を確保し、コンテンツがバーに隠れないようにします。position: fixed 化する際は、iPhone のホームバーを避けるため env(safe-area-inset-bottom) を足すと安全です。色は is-active の文字色を変えればブランドに合わせられます。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
タブの数は変えられますか？
CSS の grid-template-columns: repeat(4,1fr) の 4 を変えると等幅のタブ数を増減できます。ただし下部タブは片手・親指での操作が前提なので、押し間違いを防ぐため 3〜5 個程度に抑えるのがおすすめです。HTML 側でボタン要素を追加・削除して数を合わせてください。
iPhone でバーがホームバーと重なります。
iPhone の画面下端にはホームインジケータの領域があります。バーを position: fixed で固定する場合、padding-bottom に env(safe-area-inset-bottom) を足し、HTML に viewport-fit=cover を指定すると、その安全領域を避けてタブが押しやすくなります。