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

【CSS入門】position: stickyでスティッキーナビゲーションバーを作成する方法

スティッキーなナビゲーションバーとは、ページを下にスクロールしても画面上部に固定され続けるメニューのことです。これを実現するには、CSSの position: sticky; プロパティを使用します。以下のコードを実行して、実際の動きを確認してみましょう。

position: sticky の基本ポイント

  • top プロパティの指定が必須： position: sticky; だけでは固定されず、top: 0; のように基準位置を必ず指定します。
  • スクロールに連動して固定： 要素は通常どおり文書内に配置されますが、スクロールして指定位置に達すると、そこに貼り付いたように表示され続けます。
  • 幅広いブラウザ対応： Chrome・Firefox・Safari・Edge など、現行の主要ブラウザで問題なく動作します。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            position: sticky;
            overflow: hidden;
            top: 0;
            width: 100%;
         }
         li {
            float: left;
            border-right: 1px solid white;
         }
         li a {
            display: block;
            padding: 8px;
            background-color: orange;
         }
         li:last-child {
            border-right: none;
         }
         div {
            padding:5px;
            margin-top:5px;
            background-color:white;
            height:1000px;
         }
      </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>

コードの解説

  • ul 要素に position: sticky; と top: 0; を指定することで、ナビゲーションバー全体が画面上部に固定されます。
  • list-style-type: none; でリストマーカーを消し、float: left; で各項目を横一列に並べています。
  • overflow: hidden; は float による回り込みを解除する役割を担っています。
  • 高さ1000pxのコンテンツ領域を用意することで、スクロール中もナビゲーションバーが固定され続ける様子を簡単に確認できます。
  1. CSSで固定フッター（スティッキーフッター）を作成する方法

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

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

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