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

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

CSSのfloatプロパティとは？

CSSのfloatプロパティは、ボックスやコンテンツの位置指定・フォーマットを行うためのプロパティです。これを利用すると、HTML要素をページの左側または右側に寄せて配置できます。

floatプロパティに指定できる主な値は以下の通りです。

  • left … 要素を左に浮動させる
  • right … 要素を右に浮動させる
  • none … 浮動を解除する（初期値）

それでは、実際のサンプルコードでfloatによる左右配置の方法を確認していきましょう。

例1：floatで要素を左右に振り分ける

次の例では、映画館のスクリーンと座席をイメージしたレイアウトを作成し、floatプロパティによって座席要素を左右に配置しています。

<!DOCTYPE html>
<html>
<head>
<title>CSS Floatによる配置</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.backSeats div {
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
   background-color: #4CAF50;
}
.leftFloat {
   float: left;
}
.rightFloat {
   float: right;
}
</style>
</head>
<body>
<div class="screen">Screen</div>
<div class="backSeats">
<div class="leftFloat">Premium Left Seat 1</div>
<div class="leftFloat">Premium Left Seat 2</div>
<div class="rightFloat">Premium Right Seat 1</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

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

例2：floatとclearを組み合わせる

続いて、floatプロパティにnoneを指定して浮動を解除し、clearプロパティで回り込みを防ぐ例を見てみましょう。このようにfloatとclearを組み合わせることで、レイアウトの流れをコントロールできます。

<!DOCTYPE html>
<html>
<head>
<title>CSS Floatによる配置</title>
<style type="text/css">
p {
   float: left;
   margin: 10px;
   padding: 10px;
   color: white;
   background-color: #48C9B0;
   border: 4px solid #145A32;
}
p.noneFloat {
   float: none;
   clear: both;
   color: #34495E;
}
</style>
</head>
<body>
<p>I love Java.</p>
<p class="noneFloat">I think C# is better.</p>
<p>Even C isn't a bad choice.</p>
<p>I agree!</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

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

まとめ

floatプロパティを使えば、要素を手軽に左右へ配置できます。ただし、回り込みの解除（clear）が必要になるなど扱いには注意点もあります。近年では、より柔軟なレイアウトが実現できるFlexboxやCSS Gridの活用も推奨されているため、目的に応じて使い分けるとよいでしょう。

  1. CSSでパーセント（%）とemを組み合わせてフォントサイズを指定する方法

    CSSでは、フォントサイズの指定にパーセント（%）とemを組み合わせて使用できます。この手法を用いることで、ブラウザ間での表示の互換性が向上し、異なる環境でも一貫したテキストサイズを実現できます。親要素に対する相対的な割合でサイズを設定できるため、レスポンシブデザインやアクセシビリティの観点からも推奨される方法です。基本構文CSSのfont-sizeプロパティの基本的な構文は以下のとおりです。Selector {     font-size: /*値*/; }使用例1：bodyにパーセント、子要素にemを指定以下の例では、body要素に「80%」を指定し

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &