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

CSSで等幅のナビゲーションリンクを持つナビゲーションバーを作成する方法

CSSを使えば、すべてのリンクが同じ幅になるナビゲーションバーを簡単に作成できます。ポイントは、各リンクにvw単位で幅を指定し、display: inline-block;とtext-align: center;を組み合わせることです。

実装例

以下は、等幅のナビゲーションリンクを持つナビゲーションバーの完全なコード例です。

<!DOCTYPE html>
<html lang="en">
<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:60px;
    padding: 0px;
}
*,*::before,*::after{
    box-sizing: border-box;
}
nav{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
}
.links {
    width: 20vw;
    padding: 17px;
    display: inline-block;
    text-align: center;
    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="#">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>
<h1>Equal width navigation menu</h1>
</body>
</html>

コードのポイント

  • width: 20vw; — 各リンクの幅をビューポート幅の20%に設定することで、5つのリンクが画面全体に均等に並びます。
  • display: inline-block; — リンクをインラインブロック要素として扱い、横並びに配置できるようにします。
  • text-align: center; — リンクテキストを中央揃えにして、見た目のバランスを整えます。
  • position: fixed; top: 0; width: 100%; — ナビゲーションバーを画面上部に固定表示し、スクロールしても常に見えるようにします。
  • :hover 疑似クラス — マウスオーバー時に背景色を変えることで、インタラクティブな操作性を実現します。
  • .selected クラス — 現在表示中のページに対応するリンクをハイライト表示できます。

出力結果

上記のコードを実行すると、すべてのリンクが同じ幅で均等に並んだナビゲーションバーが画面上部に固定表示されます。

CSSで等幅のナビゲーションリンクを持つナビゲーションバーを作成する方法

  1. CSSでスキルバーを作成する方法｜初心者向けコード例付き解説

    スキルバーとは、プログラミング言語やツールの習熟度をパーセンテージ付きの横棒グラフとして視覚的に表現するUI要素です。エンジニアのポートフォリオサイトや自己紹介ページなどでよく利用されており、実はCSSだけで簡単に作成できます。 この記事では、HTMLとCSSを使ってシンプルなスキルバーを作る方法を、実際のコード例とともにわかりやすく解説します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

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

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