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

CSSを使って水平ナビゲーションバーを作成する方法

Webサイトのナビゲーションメニューは、ユーザーがサイト内を移動するための重要な要素です。水平方向のナビゲーションバーを作成するには、リスト項目である <li> 要素に対して display: inline; を指定します。これにより、通常は縦に並ぶリストが横一列に配置されるようになります。

水平ナビゲーションバーの基本ポイント

きれいな水平ナビゲーションバーを作るためには、以下のCSSプロパティの役割を理解しておくことが大切です。

  • list-style-type: none; … リストの先頭にある「・」などのマーカーを非表示にします。
  • margin: 0; と padding: 0; … ブラウザ標準の余白をリセットし、レイアウトを整えます。
  • display: inline; … 各
  • 要素を横並びに表示します。
  • .active クラス … 現在表示中のページに背景色と文字色を適用し、視覚的に強調します。

サンプルコード

以下のコードを実行すると、水平ナビゲーションバーがどのように表示されるかを確認できます。

<!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>

コードの解説

このサンプルでは、<ul> タグで作成したリストからデフォルトのスタイルを取り除き、<li> 要素をインライン表示にすることで、メニュー項目を横並びにしています。「Company」のリンクには class="active" を付与しており、緑色の背景（#4CAF50）と白い文字で現在のページ位置を示しています。

さらに実用的なナビゲーションバーにしたい場合は、a タグに padding を追加してクリック領域を広げたり、:hover 擬似クラスを使ってマウスオーバー時の色変化を加えたりすると、より使いやすいメニューになります。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

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

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