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

CSSのインラインリストアイテムで水平ナビゲーションバーを作成する方法

Webサイトのナビゲーションメニューは、リスト（<ul>・<li>）をベースに作成するのが一般的です。デフォルトではリスト項目は縦に並びますが、<li>要素に display: inline; を指定することで、項目を横一列に並べた水平ナビゲーションバーを簡単に実装できます。

基本的な考え方

水平ナビゲーションバーを作る際のポイントは次の3つです。

  • リストマークの非表示： list-style-type: none; で箇条書きの「・」を消します。
  • 余白のリセット： ブラウザ標準の margin と padding を 0 にして、レイアウトのズレを防ぎます。
  • インライン化： <li> に display: inline; を指定し、項目を横並びにします。

サンプルコード

以下のコードを実行すると、現在のページを緑色で強調表示する水平ナビゲーションバーが作成されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
         }
         .active {
            background-color: #4CAF50;
            color: white;
         }
         li {
            border-bottom: 1px solid #555;
            display: inline;
         }
      </style>
   </head>
   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#company" class="active">Company</a></li>
         <li><a href = "#product">Product</a></li>
         <li><a href = "#services">Services</a></li>
         <li><a href = "#contact">Contact</a></li>
      </ul>
   </body>
</html>

コードの解説

1. リストのスタイル初期化

list-style-type: none; によってリストマークを削除し、margin と padding を 0 にすることで、ブラウザごとの表示差異をなくしています。

2. 現在のページの強調表示

.active クラスには背景色 #4CAF50（緑）と文字色 white を指定しています。このクラスを現在閲覧中のページのリンクに付与することで、ユーザーが自分の位置を把握しやすくなります。

3. 項目の横並びと下線

display: inline; により各 <li> が横に並び、border-bottom: 1px solid #555; でナビゲーションバー全体に下線が引かれます。

まとめ

display: inline; を使った方法はシンプルで記述量も少なく、初心者にも扱いやすい手法です。より高度な制御（パディング調整や高さ指定など）が必要な場合は、display: inline-block; や Flexbox を活用すると、さらに柔軟なナビゲーションバーを作成できます。

  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プロパティの基本構文は次のとおりです。セレクタ {