CSS

【float】ボックスの配置

みいと

floatプロパティでボックスを寄せて配置する

floatプロパティを使用すると、ボックスを左や右に寄せて配置し、他の要素のボックスが回り込むように配置することができます。

ブロックレベルの要素同士は、通常横に並べることはできません。
しかし、floatプロパティを使用すると、ブロックレベルの要素を横に並べることもできます。

floatプロパティには、下記のキーワードが指定できます。

  • none
  • left
  • right

none

noneはfloatプロパティの初期値で、ボックスを寄せずに配置します。

<div style="float: none; width: 100px; height: 100px; background-color: #ccccff;">ひとつめのdiv要素</div>
<div style="float: none; width: 100px; height: 100px; background-color: #ffcccc;">ふたつめのdiv要素</div>
ひとつめのdiv要素
ふたつめのdiv要素

left

floatプロパティにleftを指定すると、ボックスを左に寄せて配置します。

<div style="float: left; width: 100px; height: 100px; background-color: #ccccff;">ひとつめのdiv要素</div>
<div style="float: left; width: 100px; height: 100px; background-color: #ffcccc;">ふたつめのdiv要素</div>
ひとつめのdiv要素
ふたつめのdiv要素

right

floatプロパティにrightを指定すると、ボックスを右に寄せて配置します。

<div style="float: right; width: 100px; height: 100px; background-color: #ccccff;">ひとつめのdiv要素</div>
<div style="float: right; width: 100px; height: 100px; background-color: #ffcccc;">ふたつめのdiv要素</div>
ひとつめのdiv要素
ふたつめのdiv要素

clearプロパティで回り込みを解除する

clearプロパティを使用すると、floatプロパティでボックスを寄せて、他の要素が回り込んでいる状態を解除することができます。

clearプロパティの設定方法

clearプロパティには、下記のキーワードが指定できます。

left 「float: left;」を解除します。
right 「float: right;」を解除します。
both 「float: left;」「float: right;」の両方を解除します。
none floatプロパティを解除せずにそのままにします。
noneがclearプロパティの初期値です。

clearプロパティの注意点

clearプロパティは、ブロックレベル要素に対して指定可能です。

インライン要素に対して指定しないように注意しましょう。

clearプロパティは、ブロックレベル要素に指定すること。

ボックスの配置のまとめ

今回はfloatプロパティを使用したボックスの配置についてまとめました。

floatプロパティは、サイトのレイアウトをする上で重要なプロパティなので、しっかり理解するようにしましょう。

まとめ

  • floatプロパティを使用すると、ボックスを左や右に寄せて、以降の要素を回り込ませて表示させることができる
  • floatプロパティを使用すれば、ブロックレベル要素も横並びで表示させることができる
  • floatプロパティの指定を解除するときには、clearプロパティを使用する
  • clearプロパティは、ブロックレベル要素に対して指定する

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました