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

CSSでナビゲーションバーのリンクを中央揃えにする方法

ナビゲーションバー内のリンクを中央に配置したい場合は、<li> 要素に対して text-align: center を指定します。これにより、各リスト項目内のテキスト（リンク）が水平方向の中央に揃えられます。

以下は、縦型ナビゲーションメニューのリンクを中央揃えにする具体的な実装例です。

コード例

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
         }
         li a {
            display: block;
            background-color: #F0E7E7;
         }
         .active {
            background-color: #4CAF50;
            color: white;
         }
         li {
            text-align: center;
            border-bottom: 1px solid #555;
         }
      </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. リンクのブロック化

li a { display: block; } とすることで、リンクが行全体をクリックできる領域になります。これにより、ユーザビリティが向上し、背景色もリンク領域全体に適用されます。

3. 中央揃えの指定

中央中央揃えの鍵となるのが li { text-align: center; } の部分です。<li> 要素はブロックレベル要素なので、その中にあるインライン要素であるリンクテキストが、この指定によって水平方向の中央に配置されます。

4. アクティブ状態のスタイル

.active クラスを使うことで、現在表示中のページに対応するリンクを目立たせています。緑色の背景（#4CAF50）と白色の文字色を組み合わせることで、視覚的にわかりやすいナビゲーションになります。


  1. CSSでピル型ナビゲーションメニューを作成する方法

    CSSでピル型（カプセル型）ナビゲーションメニューを作成するには、各リンクにborder-radiusを設定して角を丸くし、マウスオーバー時や選択中のページ用のスタイルを定義します。以下に、実際に動作するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <title>Document</title> <style> nav { width: 100%; background-color: rgb(255, 251, 251); over

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

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