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

CSSで左揃え・右揃えのリンクを含むナビゲーションバーを作成する方法【Flexbox活用】

Webサイトのナビゲーションバーでは、ホームやログインなどの主要なリンクを左側に、お問い合わせなどの補助的なリンクを右側に配置したいケースがよくあります。CSSのFlexbox（フレックスボックス）を活用すれば、このような左右に分かれたレイアウトを簡単に実現できます。

サンプルコード

以下は、左揃えと右揃えのリンクを含むナビゲーションバーを作成するための、完全なHTML・CSSコード例です。

<!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;
}
nav{
    display: flex;
    position: fixed;
    top:0;
    width: 100%;
    background-color: rgb(251, 255, 196);
    overflow: auto;
    height: auto;
}
.left-links{
    flex:1 1 200px;
}
.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 selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
</div>
<div class="right-links">
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</div>
</nav>
<h1>Hover on the above links</h1>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような出力が得られます。「Home」「Login」「Register」は左側に、「Contact Us」「More Info」は右側に配置され、リンクにマウスカーソルを合わせると紫色の下線が表示されます。

CSSで左揃え・右揃えのリンクを含むナビゲーションバーを作成する方法【Flexbox活用】

コードのポイント解説

  • display: flex; … nav要素にフレックスコンテナを指定し、子要素である2つのdivを横並びに配置します。
  • flex: 1 1 200px; … 左側のリンクコンテナ（.left-links）に設定することで、余ったスペースをすべて占めます。その結果、.right-linksが自動的に右端へ押し出され、左右分離レイアウトが実現します。これがこのテクニックの核心部分です。
  • position: fixed; top: 0; width: 100%; … ナビゲーションバーを画面上部に固定し、ページをスクロールしても常に表示されるようにしています。bodyのmargin-top:60pxは、固定されたバーとコンテンツが重ならないようにするための調整です。
  • :hover擬似クラスと.selectedクラス … マウスオーバー時にはborder-bottomで下線を表示し、現在閲覧中のページ（Home）には.selectedクラスで常時下線を付けることで、ユーザーに現在位置をわかりやすく伝えています。

このように、Flexboxのflexプロパティを組み合わせるだけで、JavaScriptなどに頼らず純粋な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プロパティの基本構文は次のとおりです。セレクタ {