縦タブナビゲーション（設定画面風）
縦タブナビゲーションは、左側にタブを縦並びにし、右側に対応するパネルを表示する設定画面向けのレイアウトです。全体を grid-template-columns:180px 1fr の2カラムで組み、左のタブ列と右の内容部に分けています。
解説
縦タブナビゲーションは、左側にタブを縦並びにし、右側に対応するパネルを表示する設定画面向けのレイアウトです。全体を grid-template-columns:180px 1fr の2カラムで組み、左のタブ列と右の内容部に分けています。タブをクリックすると JavaScript が data-p 属性の番号を読み取り、すべてのタブとパネルから is-on を外したうえで、選ばれたものだけに付け直して表示を切り替えます。CSS では非表示パネルを display:none で隠しています。
使う場面
- プロフィール・アカウント・通知など設定項目が多い管理画面で
- SaaS のダッシュボードやマイページの設定セクションで
- ドキュメントサイトでカテゴリごとに内容を切り替えたいとき
タブ数は HTML のボタンとパネルを同じ数だけ増減すれば対応できます。選択中タブの色 #667eea をブランド色に変えると馴染みます。アクセシビリティを高めるなら、タブに role="tab"、パネルに role="tabpanel" を付け、矢印キーでの移動に対応させるとキーボード操作が快適になります。
よくある質問
タブを増やすにはどうすればよいですか。
ナビに vt__tab ボタンを1つ足し、data-p の番号を連番で付けます。同時に右側へ対応する vt__p パネルを1つ追加してください。ボタンとパネルの数と順番を揃えるのが重要です。
スマホでは横並びだと窮屈になりませんか。
なります。狭い画面では grid-template-columns を1カラムにして、タブを上、パネルを下に積む指定をメディアクエリで足すと読みやすくなります。