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

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

CSSでスクロールしても画面に固定され続けるナビゲーションメニュー（固定メニュー）を作成するには、position: fixed; プロパティを使用します。このプロパティを指定すると、要素はビューポート（表示領域）を基準とした位置に固定され、ページをどれだけスクロールしても常に同じ場所に表示され続けます。

実装のポイント

固定メニューを実装する際の主なポイントは以下のとおりです。

  • position: fixed; と top: 0; を指定して、メニューを画面の最上部に固定する
  • width: 100%; を指定して、メニューを画面の横幅いっぱいに広げる
  • メニューがコンテンツに重なって隠れてしまうのを防ぐため、body要素にメニューの高さ分の上部マージン（margin-top）を設定する
  • :hover 疑似クラスを使えば、リンクにマウスカーソルを合わせたときのハイライト表示も簡単に追加できる

サンプルコード

以下は、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:60px;
    padding: 0px;
}
nav{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
}
.links {
    display: inline-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>
<div class="sample-content">
<h1>見出しサンプル</h1>
<h2>見出しサンプル</h2>
<h3>見出しサンプル</h3>
<h4>見出しサンプル</h4>
<h1>見出しサンプル</h1>
<h2>見出しサンプル</h2>
<h3>見出しサンプル</h3>
<h4>見出しサンプル</h4>
</div>
</body>
</html>

実行結果

このコードを実行すると、次のような出力になります。

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

ページのコンテンツが画面の高さを超えて長くなった場合でも、テキストは下の画像のようにナビゲーションバーの下をスクロールしていき、メニューは常に画面上部に固定されたまま表示されます。

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

まとめ

このように、position: fixed; を活用すれば、数行のCSSだけでスクロールに追従する固定ナビゲーションメニューを簡単に実装できます。サイト全体のナビゲーション性を高めたい場合に非常に便利なテクニックなので、ぜひ活用してみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

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

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