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

CSSのfloat:rightを使ってリスト項目を右側に配置する方法

ナビゲーションメニューなどで、一部のリスト項目だけを画面の右側に寄せて表示したいケースはよくあります。そのような場合には、CSSの float: right プロパティを使用します。このプロパティを指定した要素は、親コンテナの右端にフロート（回り込み）し、それ以降の要素が左側に流れ込むようになります。

実装例

以下のコードでは、通常のリスト項目は左にフロートさせ、Contact と About の2つの項目にのみインラインスタイルで float: right を適用しています。これにより、これらの項目だけがリストの右端に表示されます。

<!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 style = "float:right"><a href = "#contact">Contact</a></li>
         <li style = "float:right"><a href = "#about">About</a></li>
      </ul>
   </body>
</html>

コードのポイント

  • list-style-type: none; … リストの先頭にある「・」などのマーカーを非表示にし、ナビゲーションバーらしい見た目にします。
  • float: left; … 基本となるリスト項目を左側に横並びで配置します。
  • display: block; … リンク全体をクリック可能な領域にするため、a 要素をブロックレベルで表示します。
  • float: right; … 右寄せしたい項目（Contact・About）に個別に指定することで、それらだけを右端に配置します。

このように、float を組み合わせることで、左側に主要メニュー、右側にサブメニューといった一般的なWebサイトのヘッダーレイアウトを簡単に作成できます。なお、フロートを使用した後は親要素の高さが崩れることがあるため、必要に応じて overflow: hidden; やクリアフィックス（clearfix）を併用すると安全です。

  1. CSSでフレックスアイテムをコンテナの中央に揃える方法

    CSSでフレックスアイテム（flexアイテム）をコンテナの中央に配置したい場合は、justify-content プロパティに center を指定します。このプロパティは、主軸（デフォルトでは水平方向）に沿ってフレックスアイテムをどのように配置するかを制御するもので、center を設定すると余白が均等に分配され、アイテム全体がコンテナの中央にまとまります。justify-content の基本的な使い方親要素に display: flex; を適用したうえで、justify-content: center; を追加するだけで、子要素が中央寄せされます。以下は代表的な指定例です。.mycon

  2. 【CSS入門】floatプロパティで要素を左右に配置する方法

    CSSのfloatプロパティとは？CSSのfloatプロパティは、ボックスやコンテンツの位置指定・フォーマットを行うためのプロパティです。これを利用すると、HTML要素をページの左側または右側に寄せて配置できます。floatプロパティに指定できる主な値は以下の通りです。left … 要素を左に浮動させるright … 要素を右に浮動させるnone … 浮動を解除する（初期値）それでは、実際のサンプルコードでfloatによる左右配置の方法を確認していきましょう。例1：floatで要素を左右に振り分ける次の例では、映画館のスクリーンと座席をイメージしたレイアウトを作成し、floatプロパティによっ