CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで固定サイドナビゲーションメニューを作成する方法を解説

Webサイトの左側に常に表示され続ける固定サイドナビゲーションメニューは、ユーザビリティ向上に役立つ定番のUIパターンです。スクロールしてもメニューが画面から消えないため、訪問者はいつでもサイト内を移動できます。

固定サイドナビの仕組み

ポイントとなるのはCSSのposition: fixed;です。このプロパティを指定すると、要素がブラウザの表示領域（ビューポート）を基準として固定され、ページをスクロールしても位置が変わりません。あわせてtopとleftを0に設定することで、画面の左端いっぱいにメニューを配置できます。

コード例

以下は、CSSだけで固定サイドナビゲーションメニューを作成する完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>固定サイドナビゲーション</title>
<style>
body {
    margin: 0px;
    margin-top: 10px;
    padding: 0px;
}
nav {
    height: 100vh;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(39, 39, 39);
    overflow: auto;
}
.links {
    display: block;
    text-align: center;
    padding: 14px;
    color: rgb(178, 137, 253);
    text-decoration: none;
    font-size: 17px;
}
.links:hover {
    background-color: rgb(100, 100, 100);
}
.selected {
    background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">ホーム</a>
<a class="links" href="#">ログイン</a>
<a class="links" href="#">新規登録</a>
<a class="links" href="#">お問い合わせ</a>
<a class="links" href="#">詳細情報</a>
</nav>
</body>
</html>

コードのポイント解説

nav要素のスタイル

  • position: fixed; … 要素をビューポート基準で固定し、スクロールしても動かなくします。
  • width: 200px; … サイドバーの幅を200ピクセルに指定しています。
  • height: 100vh; … 画面の高さいっぱいまでメニューを伸ばします。
  • z-index: 1; … 他のコンテンツより手前に表示されるように重なり順を制御します。
  • overflow: auto; … メニュー項目が多い場合に、ナビ内部だけをスクロールできるようにします。

リンクのスタイル

  • display: block; … リンク全体をクリック可能な範囲にするためにブロック表示にしています。
  • :hover疑似クラス … マウスカーソルを重ねたときに背景色が変化し、視覚的なフィードバックを与えます。
  • .selectedクラス … 現在表示中のページに対応するリンクをハイライト表示します。

実行結果

このコードをブラウザで開くと、画面左側に暗色背景の縦型ナビゲーションメニューが固定表示されます。ページを下にスクロールしてもメニューは常に同じ位置に留まり、「ホーム」のリンクが選択状態（濃い青色の背景）で強調されているのが確認できます。各リンクにマウスを合わせると背景色がグレーに変化し、直感的な操作感を実現します。

まとめ

固定サイドナビゲーションは、position: fixedとheight: 100vhを組み合わせるだけで簡単に実装できます。レスポンシブ対応させる場合は、メディアクエリを使ってモバイル画面ではメニューを非表示にしたり、ハンバーガーメニューに切り替えたりする工夫を加えると、さらに実用的なサイトになります。

  1. CSSで固定フッター（スティッキーフッター）を作成する方法

    CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {