アイコン縦並びサイドナビ
アイコンだけを縦に並べた、幅の狭いサイドナビゲーションです。 flex-direction:column でリンクを縦積みにし、各リンクを正方形の枠に収めて、その中央にアイコンを配置しています。アイコンは外部フォントに頼らずインラインのSVGで描いているため、表示が崩れにくく自己完結している点が特徴です。
解説
アイコンだけを縦に並べた、幅の狭いサイドナビゲーションです。flex-direction:columnでリンクを縦積みにし、各リンクを正方形の枠に収めて、その中央にアイコンを配置しています。アイコンは外部フォントに頼らずインラインのSVGで描いているため、表示が崩れにくく自己完結している点が特徴です。
向いている場面
管理画面やダッシュボードのサイドバー、ツール系アプリのメインナビ、画面を広く使いたいレイアウトに合います。文字を出さない分、場所を取らずすっきり見せられます。
- 現在地は
is-onクラスで背景を明るくして示す - マウスを乗せると
:hoverで淡くハイライトされる - 色や角丸（
border-radius）、間隔はCSSで自由に調整できる
アイコンだけだと意味が伝わりにくいことがあるため、ホバー時のツールチップやaria-labelでラベルを補うとアクセシビリティが高まります。タッチ操作を想定する場合は、枠を少し大きめにすると押しやすくなります。
使用例・適したシーン
- コーポレートサイトのグローバルナビ
- EC サイトのヘッダー
- SaaS の管理画面
- モバイル向け Web アプリ
よくある質問
アイコンだけで意味は伝わりますか
省スペースな反面、アイコン単独では機能が分かりにくいことがあります。ホバーで表示されるツールチップや、各リンクへの aria-label を加えると、何のボタンかが伝わりやすくなります。
現在開いているページはどう示しますか
現在地のリンクに is-on クラスを付けると背景が明るくなり、選択中であることが分かります。ページ遷移に合わせてこのクラスを付け替えれば、今どこにいるかを常に示せます。