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

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

Webサイトやモバイル向けページでは、画面下部に常に表示されるナビゲーションメニューがよく使われています。CSSでは position: fixed と bottom: 0 を組み合わせることで、スクロールしても画面下部に固定され続けるナビゲーションバーを簡単に実装できます。

以下は、CSSを使って下部ナビゲーションメニューを作成するサンプルコードです。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
    margin:0px;
    margin-top:10px;
    padding: 0px;
}
nav{
    position: fixed;
    bottom: 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>
<h2>Bottom navigation menu</h2>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

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

コードのポイント解説

  • position: fixed; と bottom: 0; を指定することで、ナビゲーションバーが画面の最下部に固定されます。ページをスクロールしても常に表示され続けます。
  • width: 100%; を設定することで、ナビゲーションバーが画面の横幅いっぱいに広がります。
  • display: inline-block; をリンク要素に適用することで、各リンクが横一列に並びます。
  • :hover 疑似クラスを使うことで、マウスカーソルを重ねたときに背景色が変化し、インタラクティブな操作性を実現できます。
  • .selected クラスを付与したリンクは、現在表示中のページであることを示すために背景色で強調表示されます。

この手法は、スマートフォン向けサイトのボトムナビゲーション（タブバー）などにも応用でき、ユーザーがどのページを見ていても主要なメニューへ素早くアクセスできるようになります。

  1. CSSでピル型ナビゲーションメニューを作成する方法

    CSSでピル型（カプセル型）ナビゲーションメニューを作成するには、各リンクにborder-radiusを設定して角を丸くし、マウスオーバー時や選択中のページ用のスタイルを定義します。以下に、実際に動作するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <title>Document</title> <style> nav { width: 100%; background-color: rgb(255, 251, 251); over

  2. 入力フィールド付きのナビゲーションメニューを作成する方法【HTML/CSS】

    Webサイトのナビゲーションバー（グローバルナビ）に検索ボックスのような入力フィールドを組み込むと、ユーザーはどのページにいてもすぐに目的のコンテンツを探せるようになり、サイト全体の使いやすさが大きく向上します。 HTMLとCSSを少し書き加えるだけで、ナビゲーションメニューの内部に入力フィールドを配置できます。ポイントは、CSSのfloat: right;を使って入力フィールドをナビゲーションバーの右側に寄せることです。それでは、具体的な実装方法を見ていきましょう。 実装のポイント nav要素： 幅を100%にして背景色を設定し、overflow: auto;を指定することで、子要素のフ