メニューの表示位置を固定する

メニュー全体を画面左上に固定

デモページを表示

まずは、HTML で簡単なメニュー要素を用意します。

html

<nav class="menu">
  <ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
  </ul>
</nav>

メニュー全体を囲む要素に position: fixed; というスタイルを指定することで、画面上の特定の座標に表示位置を固定します。 実際の表示位置は、top、bottom、left、right などのプロパティで指定します。

css

.menu {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 150px;
  background: lightgray;
}
.menu li {
  list-style: none;
}

本文がメニューの後ろに隠れないようにする

デモページを表示

上記のスタイル指定により、メニュー要素を画面左上に表示することができるようになりました。 しかし、そのままだと、メインコンテンツ（本文）のテキストがメニューの後ろに隠れてしまいます。 メインコンテンツが隠れないようにするには、メインコンテンツの左側にメニューと同じ幅のマージンを入れます。

HTML 抜粋

<main>
  <p>
    これはダミーの本文です。これはダミーの本文です。これはダミーの本文です。
    ...
  </p>
</main>

<nav class="menu">
  <ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
  </ul>
</nav>

CSS

main {
  display: block;
  margin-left: 150px;
}
.menu {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 150px;
  background: lightgray;
}
.menu li {
  list-style: none;
}

可能であれば、CSS ファイルを直接記述するのではなく、SASS などを使用して共通の横幅を変数で指定してしまうのがよいですね。

SASS の場合（メニューの幅を変数で定義）

$menu_width: 150px;

main {
  display: block;
  margin-left: $menu_width;
}
.menu {
  position: fixed;
  top: 0px;
  left: 0px;
  width: $menu_width;
  background: lightgray;
}
.menu li {
  list-style: none;
}