デザイン・コーディング

要素のレイアウトに欠かせない!floatプロパティを解説

Webサイト制作を学ぶ上で、誰もがぶつかる最初の壁は、floatプロパティではないでしょうか。floatプロパティがうまく使えずに、挫折してしまった人も数多くいると思います。しかしfloatは、コツさえ掴んでしまえば、実はそんなに難しくありません!

今回は、そんなfloatを簡単に解説します。floatをマスターして、思い通りのレイアウトを実現しましょう!

3つの要素が横に並んでいる画像

目次

floatプロパティについて

まず、floatプロパティについて確認しましょう。

floatプロパティとは?

floatとは、簡単には、縦に並んでいた要素を横並びにすることのできるプロパティともいえます。正確にはちょっと違いますが、ややこしくなってしまうので、一旦「floatは要素を横並びにする」機能を持っていると覚えてください!floatの持つ正式な機能については、後で詳しく紹介します。

floatプロパティの使用例

floatプロパティの使用例として、WebMediaの新着記事一覧を紹介します。

00_800x450

上記のように、1つ1つのブロックが横並びになっています。それぞれのブロックにfloat: left;を設定して、各ブロックを横並びにしています。新着記事の全体のブロックの横幅が設定されているので、記事が2つ以上並ぶことはありません。floatを解除してみると、以下のようになります。001_800x450

さらに、記事の写真と文章も1つずつのブロックとしてとらえると、それぞれにfloat: left;が指定されています。01_800x450

このように、Webサイトを制作する上でfloatプロパティを使用することは多いので、理解しておくと便利です。

値の種類

横並びにする際に使用するfloatプロパティの値は、leftとrightの2つです。要素を横並びにする際に、要素を左に寄せたいときはleft、右に寄せたいときはrightを使用します。

例えば、あるdivを左に寄せたいときは、

  1. div{
  2. float: left;
  3. }

と記述します。

実践

さっそくfloatプロパティを使って、実際に以下の3つの要素を並び変えてみましょう。1_800x450

HTML
  1. <div id="box1">box1</div>
  2. <div id="box2">box2</div>
  3. <div id="box3">box3</div>
CSS
  1. #box1, #box2, #box3 {
  2. display: block;
  3. height: 100px;
  4. width: 150px;
  5. }
  1. #box1 {
  2. background-color: #dd5268;
  3. }
  1. #box2 {
  2. background-color: #f4d923;
  3. }
  1. #box3 {
  2. background-color: #29add0;
  3. }

float: left;

float: left;を指定すると、縦に3つ並んでいた要素が左から順番に横並びになります。2_800x450

  1. #box1, #box2, #box3 {
  2. float: left;
  3. }

float: right;

float: right;を指定すると、縦に3つ並んでいた要素が右から順番に横並びになります。3_800x450

  1. #box1, #box2, #box3 {
  2. float: right;
  3. }

一部の要素だけ横並びにする

次は、すべての要素にではなく、一部の要素だけを横並びにしてみましょう。

3つの要素のうち2つの要素にだけfloatをかける

4_800x450 HTML
  1. <div id="box1">box1</div>
  2. <div id="box2">box2</div>
  3. <div id="box3">box3</div>
CSS
  1. #box1, #box2, #box3 {
  2. display: block;
  3. }
  1. #box1 {
  2. background-color: #dd5268;
  3. height: 100px;
  4. width: 170px;
  5. }
  1. #box2 {
  2. background-color: #f4d923;
  3. height: 70px;
  4. width: 400px;
  5. }
  1. #box3 {
  2. background-color: #29add0;
  3. height: 130px;
  4. width: 250px;
  5. }
  1. #box1, #box2 {
  2. float: left;
  3. }
5_800x450

すると、floatを指定したbox1とbox2は想定通り横並びになりましたが、box3は元の場所にとどまることなく、box1とbox2の下に潜り込んでしまいました。

どうなっているのでしょうか。

横から見てみるとこのようになっています。実はbox1とbox2は浮いているのです!
9_800x450

冒頭に「floatは要素を横並びにする」とお伝えしましたが、正式には「floatは要素を浮かせる」ことが、floatプロパティの機能です。floatという英単語が「浮く」という意味ですから、言葉の通りの役割なんですね!

floatをかけた要素には以下の2点が起こります。

 (1)要素を浮かせる。
 (2)浮かせた要素の後に続く要素を、値で設定した右か左の方向に回り込ませる。

つまり上の図では、

まず、(1)box1とbox2に左方向のfloatをかけたので、box1とbox2は、図のように宙に浮いた状態になります。

そして、(2)浮かせた要素の後に続く要素を回り込ませる性質があるので、box1はbox2を右隣に回り込ませました。

6_800x450

また、floatがかかっているbox2も、後に続く要素であるbox3を右隣に回り込ませました。

15_800x450

しかし、floatをかけたbox1とbox2は(1)の効果で浮いています。一方box3はfloatをかけていないので浮いていません。

10_800x450

横から見ると、上の図のようになっています。box3が左寄せで回り込む移動先にあるはずのbox1とbox2は宙に浮いているので、box3がbox1とbox2の隣にとどまることはありません。

7_800x450

そのため、box3は回り込みますが、移動先に障害物が何もないため、box1とbox2の下に滑り込んでしまったのです!

後に続く要素の回り込みを解消するには?

では、回り込みを解消するには、どうしたらいいのでしょうか。ここで登場するのが「clearプロパティ」です。まずは、clearプロパティについて紹介します。

clearプロパティについて

clearプロパティは、floatをかけることによって起こってしまう、要素の回り込みを解消するためのプロパティです。clearプロパティの値には、以下の3種類があります。

・left

float: left;をかけた要素に続く要素が、左寄せで回り込むことを解消する。

・right

float: right;をかけた要素に続く要素が、右寄せで回り込むことを解消する。

・both

floatをかけた要素に続く要素の回り込みを解消する。clearプロパティでは、ほとんどの場合、bothの値を選択します。ですので、clearにはbothと覚えてしまっても構いません!

回り込みを解消する

では実際に、先ほどの図のbox3の回り込みを解消してみましょう。

  1. #box3 {
  2. clear: both;
  3. }

このようにbox3にclearプロパティを使用すると以下のように、回り込みが解消できました。

8_800x450

親要素のある子要素を横並びにする

要素に親要素がある場合、子要素にfloatをかけるとどうなるのでしょうか。

子要素にだけfloatをかける

グレーの親要素の中に、2つの文章のブロックを用意しました。縦に並んでいる2つの文章を横並びにしてみます。

11_800x450 HTML
  1. <div class="parent">
  2.  <div id="box1">box1</div>
  3.  <div id="box2">box2</div>
  4.  <div id="box3">box3</div>
  5. </div>
CSS
  1. .parent {
  2. background-color: #edebeb;
  3. height: 300px;
  4. width: 500px;
  5. }
  1. #box1, #box2, #box3 {
  2. display: block;
  3. height: 100px;
  4. width: 150px;
  5. }
  1. #box1 {
  2. background-color: #dd5268;
  3. }
  1. #box2 {
  2. background-color: #f4d923;
  3. }
  1. #box3 {
  2. background-color: #29add0;
  3. }

ではもう一度、この3つの要素を、左寄せの横並びにしてみましょう。

  1. #box1, #box2, #box3 {
  2. float: left;
  3. }
12_800x450

本来は、すべての子要素にfloatをかけると、親要素は完全に見えなくなってしまいますが、今回はわかりやすくするために点線で表しています。

上の図のように、3つの子要素にfloatをかけると、親要素が消えてしまいました。親要素には、子要素の高さを認識できないと、高さがゼロになってしまうという特徴があります。

つまり、すべての子要素がfloatのはたらきによって浮いてしまっているため、親要素は高さを認識できずに消えてしまったのです。

横から見ると、以下の図のようになっています。

13_800x450

親要素を表示する方法

親要素を子要素の高さに合わせて表示するためには、「overflow」プロパティでhiddenを指定して、親要素に子要素の高さを認識させます。今回、子要素がfloatで浮いてしまっていたために、親要素は子要素の高さを認識できずになくなっていました。しかし、hiddenを指定すると、たとえ子要素がfloatで浮いていても、親要素は子要素の高さを認識できるようになります。そのため、親要素は高さを保つことができて、子要素の高さに合わせて親要素の高さを取り戻します。

overflowプロパティとは

overflowプロパティとは、一般には要素内の内容が多く、親要素に収まりきらない場合の、要素内の内容の表示方法を指定するプロパティです。overflowプロパティには、はみ出した内容を、親要素の下に表示する「visible」や、親要素からはみ出した内容は表示しないとする「hidden」などの値があります。親要素を表示するためには、overflowプロパティのhiddenという値を指定します。

overflow: hidden;が指定できない場合

overflow: hidden;が指定できない場合は、「clearfix」というクラスを使って、擬似要素でfloatの回り込みを解除します。

overflow: hidden;で親要素を表示する

では、実際にoverflow: hidden;を指定して、先ほど見えなくなってしまった親要素を表示してみましょう。
12_800x450

  1. .parent {
  2. overflow: hidden;
  3. }

このように、回り込んで消えてしまっている親要素にoverflow: hidden;をかけると、
14_800x450

このように、親要素が子要素の高さを認識して、子要素の高さの分、親要素が表示されました。

まとめ

今回は、要素を横並びにする方法を紹介しました。Webサイトを制作するうえで欠かせないfloatプロパティですが、floatのもつはたらきとルールを知らなければ、要素の回り込みに苦戦してしまうかもしれません。目と頭で浮遊化を理解して、よりよいレイアウトを目指しましょう。

WebMediaでは、今回のようなHTML・CSSの知識だけでなく、Webサイトを制作・運営する上で役に立つ情報を数多く発信しています。他の記事もぜひご覧ください。


また、Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか?

WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。