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

CSSでナビゲーションバーをページ上部に固定表示する方法

Webページをスクロールしてもナビゲーションバー（メニュー）が常に画面上部に表示されるようにするには、CSSの position: fixed プロパティと top プロパティを組み合わせて使用します。

基本的な仕組み

position: fixed を指定すると、要素はビューポート（ブラウザの表示領域）を基準に配置され、ページをスクロールしても位置が変わりません。さらに top: 0; を指定することで、要素が画面の最上部に固定されます。

主なプロパティの役割

  • position: fixed; — 要素をビューポート基準の固定位置に配置します。
  • top: 0; — 要素を画面上端に寄せます。
  • width: 100%; — ナビゲーションバーを画面幅いっぱいに広げます。
  • z-index; — 他のコンテンツより手前に表示させるために、大きな値を設定しておくと安全です。

実装例

以下のコードは、スクロールしても上部に留まり続けるナビゲーションメニューを実装したサンプルです。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      position: fixed;
      top: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: orange;
      z-index: 100;
    }
    li {
      float: left;
      border-right: 1px solid white;
    }
    li a {
      display: block;
      padding: 8px;
      color: white;
      text-decoration: none;
    }
    li:last-child {
      border-right: none;
    }
    div {
      padding: 30px;
      margin-top: 40px;
      background-color: white;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">ホーム</a></li>
    <li><a href="#news">ニュース</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
    <li><a href="#about">会社概要</a></li>
  </ul>
  <div>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
    <p>これは固定メニューの動作確認用のテキストです。</p>
  </div>
</body>
</html>

実装時の注意点

position: fixed を使う場合、ナビゲーションバーが通常のドキュメントフローから外れるため、直下のコンテンツがバーの背後に隠れてしまうことがあります。これを防ぐには、サンプルのようにコンテンツ側に margin-top を設定して余白を確保しましょう。

また、z-index を適切に設定しておかないと、画像や他の要素がナビゲーションバーの上に重なって表示されることがあります。特にスライダーやモーダルを使用するサイトでは注意が必要です。

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

    Webサイトの左側に常に表示され続ける固定サイドナビゲーションメニューは、ユーザビリティ向上に役立つ定番のUIパターンです。スクロールしてもメニューが画面から消えないため、訪問者はいつでもサイト内を移動できます。固定サイドナビの仕組みポイントとなるのはCSSのposition: fixed;です。このプロパティを指定すると、要素がブラウザの表示領域（ビューポート）を基準として固定され、ページをスクロールしても位置が変わりません。あわせてtopとleftを0に設定することで、画面の左端いっぱいにメニューを配置できます。コード例以下は、CSSだけで固定サイドナビゲーションメニューを作成する完全なコ

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

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