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

CSSで中央にリンクやロゴを配置したナビゲーションバーを作成する方法

Webサイトのナビゲーションバーでは、ロゴやメインリンクを中央に、その他のリンクを左右に分けて配置したいケースがよくあります。本記事では、CSSを使って「中央にリンク・ロゴを配置したナビゲーションバー」を作成する方法を、実際のコード例とともにわかりやすく解説します。

実装例

以下は、左側に「Login」「Register」、中央に「Home」、右側に「Contact Us」「More Info」を配置したナビゲーションバーの完全なコード例です。

<!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:60px;
    padding: 0px;
}
nav{
    position: fixed;
    top:0;
    width: 100%;
    background-color: rgb(251, 255, 196);
    overflow: auto;
    height: auto;
}
.left-links{
    display: inline-block;
    position: absolute;
    left: 0;
}
.right-links{
    display: inline-block;
    position: absolute;
    right: 0;
}
.center-links{
    display: inline-block;
    margin-left: 50%;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 17px;
    font-weight: bolder;
}
.links:hover {
    border-bottom: 2px solid purple;
}
.selected{
    border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links" href="#"> ログイン</a>
<a class="links" href="#"> 新規登録</a>
</div>
<div class="center-links">
<a class="links selected" href="#"> ホーム</a>
</div>
<div class="right-links">
<a class="links" href="#"> お問い合わせ</a>
<a class="links" href="#">詳細情報</a>
</div>
</nav>
<h1>上のリンクにカーソルを合わせてみてください</h1>
</body>
</html>

コードのポイント解説

  • ナビゲーションバーの固定表示：nav要素にposition: fixed;とtop: 0;を指定することで、ページをスクロールしてもナビゲーションバーが常に画面上部に表示されます。
  • 左右のリンク配置：.left-linksはposition: absolute;とleft: 0;で左端に、.right-linksはright: 0;で右端にそれぞれ配置しています。
  • 中央リンクの配置：.center-linksにmargin-left: 50%;を指定することで、リンクを画面の中央付近に表示しています。ロゴ画像を配置する場合も同様の手法が使えます。
  • ホバー時の演出：.links: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プロパティの基本構文は次のとおりです。セレクタ {