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

CSSのインラインリストアイテムとは？水平ナビゲーションバーの作り方

Webサイトのグローバルメニューのような横並びのナビゲーションバーは、CSSのインラインリストアイテム（display: inline）を使うと簡単に作成できます。通常、<ul>タグで作ったリストは項目が縦に積み重なりますが、<li>要素をインライン表示に変更することで、項目を一行に並べた水平型のメニューへと変えることができます。

水平ナビゲーションバー作成のポイント

  • list-style-type: none; … リスト先頭のマーカー（・）を非表示にします。
  • margin: 0; padding: 0; … ブラウザ標準の余白をリセットし、すっきりとした見た目に整えます。
  • li { display: inline; } … 各リスト項目をインライン化し、横一列に並べます。

実装例

以下のコードを実行すると、水平方向のナビゲーションバーが表示されます。「Company」リンクには class="active" が付与されており、緑色の背景（#4CAF50）によって現在のページが強調される仕組みです。

<!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 要素に対して、マーカーの非表示（list-style-type: none）と余白のリセットを行います。次に li 要素へ display: inline を指定することで、Home・Company・Product・Services・Contact の各メニューが横並びになります。さらに border-bottom で下線を引き視認性を高め、.active クラスを持つリンクには背景色と白色の文字を適用することで、閲覧中のページをひと目で判別できるようにしています。

この手法はコードがシンプルで、主要なブラウザすべてで問題なく動作するため、基本的な水平ナビゲーションバーを実装する際の定番テクニックとして広く活用されています。

  1. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs

  2. CSSの疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説

    CSSの疑似要素（Pseudo-element）とは、要素の一部を指定してスタイルを適用するためのセレクターです。たとえば、テキストの最初の1文字や1行目など、通常のセレクターでは選択できない特定の部分をターゲットにできます。また、::before と ::after を使えば、要素の前後にコンテンツを挿入することも可能です。基本構文疑似要素は、セレクターに続けて「::」＋疑似要素名という形式で記述します。基本的な書き方は以下のとおりです。Selector::pseudo-element {    css-property: /*値*/; }サンプルコード①：カウンターを使