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

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

ナビゲーションバーをWebページの下部に固定表示するには、CSSのposition: fixedプロパティとbottomプロパティを組み合わせて使用します。

position: fixedを指定した要素は、ページをスクロールしても画面上の同じ位置に留まり続けます。さらにbottom: 0を指定することで、要素が常にビューポート(ブラウザの表示領域)の最下部に配置されるようになります。

実装例

以下のコードを実行すると、スクロールしても下部に固定され続けるメニューの動作を確認できます。

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul {
                list-style-type: none;
                position: fixed;
                bottom: 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:10px;
                margin-top:10px;
                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>

コードのポイント

  • position: fixed; … 要素をビューポート基準の固定位置に配置し、スクロールの影響を受けなくします。
  • bottom: 0; … 要素を画面の最下部にぴったりと貼り付けます。
  • width: 100%; … ナビゲーションバーを画面幅いっぱいに広げます。
  • list-style-type: none; … リストのデフォルトの箇条書きマーカーを非表示にします。
  • float: left; … 各メニュー項目(li)を横並びに配置します。

注意点

position: fixedで下部に固定したナビゲーションバーは、ページのコンテンツの一部を覆い隠す場合があります。そのため、body要素やコンテンツ部分にpadding-bottomを適切に設定しておくと、最下部のテキストが隠れるのを防げます。また、モバイル端末ではアドレスバーの表示・非表示によってビューポートの高さが変化することがある点にも留意しましょう。

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

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

  2. Android版Chromeでメニューバーを画面下部に移動する方法

    スマートフォン向けブラウザの多くと同様に、Google ChromeでもURLバーやメニューバーは画面上部に配置されています。しかし、最近のChromeでは、このメニューバーを画面の下部に移動できるようになりました。片手でスマホを操作する際に格段に使いやすくなるため、ぜひ試してみたい機能です。ここでは、Chromeの画面レイアウトを変更して、メニューバーを下部に移動する方法を詳しく解説します。 Chromeのメニューバーを画面下部へ移動する手順 この機能はまだ実験的なものであり、通常の設定ページからは有効化できません。利用するには、Chromeの隠し機能である「フラグ（Flag