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

CSSのfloatを使ってリスト項目を横並びにし、水平ナビゲーションバーを作成する方法

水平ナビゲーションバーを作成するには、CSSの float プロパティを活用してリスト項目を横並びにします。通常は縦方向に積み重なる <ul> の各項目を左へ回り込ませることで、シンプルで使いやすい水平メニューが簡単に作れます。

実装の基本ステップ

水平ナビゲーションバーは、次の3つのポイントを押さえるだけで実現できます。

  • リストマーカーを非表示にする：list-style-type: none; を指定して、先頭の「・」などを消します。
  • リスト項目を横並びにする：li 要素に float: left; を指定すると、項目が左から順に一列に並びます。
  • クリック領域を広げる：リンクに display: block; とパディングを設定すれば、文字部分だけでなくボタン全体がクリック可能になります。

サンプルコード

以下のコードを実行すると、実際に水平ナビゲーションバーを確認できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      li {
        float: left;
      }
      li a {
        display: block;
        padding: 8px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href = "#home">Home</a></li>
      <li><a href = "#news">News</a></li>
      <li><a href = "#contact">Contact</a></li>
      <li><a href = "#about">About</a></li>
    </ul>
  </body>
</html>

コードの解説

1. リストの初期化

list-style-type: none; でマーカーを削除し、margin と padding を 0 にすることで、ブラウザ標準の余白をリセットしています。これにより環境による表示のずれを防げます。

2. floatによる横並び

float: left; を li 要素に指定すると、各項目が左端から順番に回り込み、結果として水平方向に整列します。これが従来のナビゲーションバー制作における定番テクニックです。

3. リンクを見やすくする

li a に対して display: block; を指定すると、リンクがブロック要素として扱われ、padding: 8px; によってクリック範囲が拡張されます。background-color を設定すれば、メニューボタンらしい見た目にもできます。

補足：モダンな手法との比較

近年では、float の代わりに Flexbox（display: flex;）を使うのが主流になっています。Flexboxの方が中央揃えや均等配置など柔軟なレイアウトが可能ですが、既存のコードの保守や古いブラウザへの対応という観点では、float方式も今なお有効な知識です。両方を理解しておくと、場面に応じた最適な選択ができるでしょう。

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