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

CSSのfloatで作るフローティングリスト項目とは？水平ナビゲーションバーの実装方法

CSSのfloatプロパティをリスト項目（li要素）に適用することを「フローティングリスト項目」と呼びます。これを活用すると、縦に並ぶ通常のリストを横一列に並べ替えることができ、水平ナビゲーションバーの作成に最適です。

フロートを使った水平ナビゲーションバーの基本

ナビゲーションバーを作る際は、以下のポイントを押さえておきましょう。

  • list-style-type: none; でリストの先頭にある「・」などのマーカーを非表示にする
  • margin と padding を0にして、ブラウザのデフォルトスタイルによる余白をリセットする
  • li { float: left; } で各リスト項目を左寄せで横並びにする
  • a 要素に 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>

コードの解説

このサンプルでは、まず ul 要素に対してマーカーの削除と余白のリセットを行っています。続いて li 要素に float: left; を指定することで、各項目が左から順に横並びになります。

さらに li a セレクターで display: block; を指定すると、リンク全体がブロック要素として扱われ、テキスト部分だけでなくボタン全体がクリック可能な領域になります。padding: 8px; でボタンの内側に余白を持たせ、background-color: orange; で視認性の高い背景色を設定しています。

補足：floatの解除について

float を使用した場合は、後続の要素が回り込むことを防ぐため、必要に応じて clear: both; を指定した要素を配置するか、親要素に overflow: hidden; を設定してフロートを解除してください。また、近年ではFlexbox（display: flex;）を使う方法も主流になっており、より柔軟で保守しやすいナビゲーションバーを実装できます。

  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: /*値*/; }サンプルコード①：カウンターを使