「float」CSSで要素を横に並べる方法

Webデザインは、HTMLで要素をマークアップした後、CSSで装飾やレイアウトを整えていきます。そして、ブロックレベル要素をレイアウトするときに使用されるのが、「float」と「position」となります。

「float」は「浮かぶ」という意味ですが、要素を浮かべて左右に配置できるようになります。そして、「position」は「位置」という意味で、好きな位置を指定して配置できます。状況によって、使い分けることが大切です。

ここでは、「float」で要素を左右に並べる方法を紹介します。

 

ブロックレベル要素を左右に寄せる(float)

HTMLでマークアップされた要素は、基本的に縦に並んで表示されます。なので、画像を表示して横にテキストを回り込ませたり、2枚の画像を横並びに配置したりするときには、「floatプロパティ」を使用します。

floatプロパティは、横幅が指定されているブロックレベル要素を左右に寄せることができます。ブロックレベル要素は、デフォルトでは横幅が左右一杯に設定されています。だから、横幅に隙間が無ければ、左右に寄せることが出来ないわけです。ただ、画像はそれぞれに横幅のサイズが決まっているので、floatプロパティで寄せることが可能です。

たとえば、次のように使用します。

【CSS】
p img {float: left;}


【HTML】
<p><img src=”img/image.jpg”>画像を左に寄せて、テキストを右に回り込ませる。</p>

ちゃんと、テキストが回り込んでいますね。div要素などを回り込ませるときには、ちゃんと横幅を指定するようにしてください。

画像を左に寄せて、テキストを右に回り込ませる。

 

回り込みを解除する

floatプロパティは、利用機会の多い便利なプロパティです。しかし、一度設定をすると、それ以下の要素が全て回り込みの対象となってしまいます。だから、安易に使用すると、レイアウトが崩れてしまうかもしれません。

なので、回り込みの指定をしたら、必ず解除の設定を行うようにしてください。floatの解除には、「clearプロパティ」を使用します。記述する値には、以下の3つがあります。

left 左の周り込みを解除
right 右の周り込みを解除
both 両方の周り込みを解除

{clear: both;}としておけば、右でも左でも対応することができます。なので、一般的には、「both」の値を使うことが多いですね。

 

親要素の高さに注意する

floatプロパティを使う時の注意点として、「要素の高さが無くなる」というポイントがあります。理論上は浮いているという扱いですから、親要素からは高さがカウントされなくなるわけです。詳しくは、以下の図を見てください。

float1

上記のように、floatを適用すると、親要素からはみ出してしまう場合があります。そういった時には、「overflowプロパティ」を使用しましょう。overflowプロパティは、領域内に収まらない内容を、どうやって処理するかを決めるプロパティです。

そして、値を「hidden」とすることで、floatした要素も含んで表示されるようになります。なので、親要素に対して{overflow: hidden;}と指定しておきましょう。そうすれば、以下のようにfloatしたプロパティも、内部に含んで表示されます。

float2

 
以上、floatプロパティについて解説をしました。Webのレイアウトに欠かせないものですから、必ず覚えておくようにしてください。これをマスターすれば、レイアウトの幅が広がるはずです。

サブコンテンツ

このページの先頭へ