CSSのfloatの「回り込み」を理解し自由なデザインのHTMLを作成する方法

みなさん、こんにちは！

ブリュの公式ブログ.netにお越しいただきまして、ありがとうございます。

このサイトでは、ITについて特化したサイトを運営しています。

今回はCSSのfloatについて取り上げます。

当サイトではCSSのハンドブックになるように、主要なCSSの意味とテクニック一覧を紹介しています。

→主要なCSSの意味と使い方一覧

しかし、floatに関しては、理解の難しさから、別途記事を作成する必要がありました。

まだHTMLやCSSになれていない方は、floatの意味がいまいちよくわからないかもしれません。

また、ウェブデザインを行っている場合でも、floatの挙動が把握しにくく、「できれば使いたくないな・・・」なんていう苦手意識もあるでしょう。

そこで、

CSSのfloatを理解し
苦手意識を克服すること

これを目標に、丁寧に解説していきます。

floatのような複雑な挙動を理解するには、先入観は捨てて、コンピューターの気持ちになってあげることが大切です！

CSSのfloatは「寄せ」ではなく「回り込み」を意味する

floatの説明で多いのが、floatで右寄せ、左寄せを実現するという表現です。

でも、この表現自体がそもそも適切ではないのです。

例えば、次のコードを見てみましょう。

まずはHTMLです。

<div>
<div class="left">
右寄せになります。
</div>
<div class="right">
左寄せになります。
</div>
<div class="float_bottom">
</div>

<div>

右寄せになります。

</div>

左寄せになります。

</div>

</div>

次にCSSです。

.left{
float:left;
width:50%;
}

.right{
float:right;
width:50%;
}

.float_bottom{
clear:both;
}

.left{

float:left;

width:50%;

}

.right{

float:right;

width:50%;

}

.float_bottom{

clear:both;

}

これによって、右寄せ、左寄せが可能になり、2カラムのサイトが作成可能になります。

なお、clear:bothは、floatの終了時に必ず必要となるCSSであり、空のdivタグに指定すると最もバグが少ないです。

clear:bothの意味合いとしては、floatの解除を意味します。

このclear:bothがない場合には、HTML全体が、最後の最後までfloatの影響を受けてしまいます。

回り込みというfloatの本当の意味を理解する

floatを回り込みの概念で考えてみましょう。

回り込みとは、できるだけ右に、あるいは左に行こうとすることです。

よって、

float:left→より左に回り込もうとする
float:right→より右に回り込もうとする

と言い換えれます。

floatは非常に強く、上の要素を押しのけてでも回り込みます。

ただし、自分よりも上の要素にfloatが同じ向きに効いていた場合には、上のほうが強いです。

よって、floatが複数あれば、上のfloatのほうがより強く効くということを覚えておいてください。

floatの動作のポイントは、

floatは回り込むCSS
上の要素も押しのけるぐらい強い
float同士なら、より上に書かれたfloatのほうが強い

となります。

複雑なfloatも簡単に解読できる

では、複雑なfloatの例として、次のコードを読んでみましょう。

5個の<div>タグがあったとします。

<div>
<div class="box_1">
box_1
</div>
</div class="box_2">
box_2
</div>
<div class="box_3">
box_3
</div>
</div class="box_4">
box_4
</div>
<div class="box_5">
box_5
</div>
<div class="float_bottom"></div>

<div>

box_1

</div>

</div class="box_2">

box_2

</div>

box_3

</div>

</div class="box_4">

box_4

</div>

box_5

</div>

そのそれぞれに、次のようにfloatを指定しました。

.box_1{
width:20%;
float:left;
}

.box_2{
width:20%;
float:left;
}

.box_3{
width:20%;
float:right;
}

.box_4{
width:20%;
float:left;
}

.box_5{
width:20%;
float:right;
}

.float_bottom{
clear:both;
}

.box_1{

width:20%;

float:left;

}

.box_2{

width:20%;

float:left;

}

.box_3{

width:20%;

float:right;

}

.box_4{

width:20%;

float:left;

}

.box_5{

width:20%;

float:right;

}

.float_bottom{

clear:both;

}

具体的には、

box_1：左
box_2：左
box_3：右
box_4：左
box_5：右

としています。

そして、box_1～box_5はすべてwidthが20%であり、5個のブロックで構成されますから合計で横幅が100%になります。

よって、すべての要素が横に並びます。

では、左から順に、どのような並ぶ順になるのか？

答えは、

box_1

box_2

box_4

box_5

box_3

となります。

floatの回り込みの挙動の徹底解説

では、上のHTMLとCSSをサンプルとし、floatの回り込みの挙動を徹底解説します。

初期状態

まずは初期状態です。

box_1～box_5は、配置先が決まるまで順番を待っている状態と考えてください。

box_1のfloat:leftが効く

HTMLの基本として、上に書かれている要素から順に配置場所が決まります。

よって、一番最初にbox_1の配置場所が決まります。

box_1にはfloat:leftとなっているので、可能な限り左に行く、すなわち、親要素となる<div>の左上に配置されます。

box_2のfloat:leftが効く

次に、box_2のfloat:leftが効きます。

box_2は可能な限り左に回り込もうとしますが、box_1がすでにfloat:leftで効いているので、box_1よりも左にはいくことができません。

そこで、仕方なしにbox_2はbox_1のすぐ左に収まります。

※なお、box_1にfloatが記載されていなければ、box_1の左側にbox_2が回り込みます。

box_3のfloat:rightが効く

次にbox_3のfloat:rightが効きます。

box_3は可能な限り右に行こうとします。

幸いにも親要素の右上は場所が開いていますので、box_3は右上に収まることになります。

box_4のfroat:leftが効く

次に、box_4のfloatが効きます。

box_4も当然左上に行こうとしますが、左上はすでにbox_1が陣取っており、そのすぐ右にはbox_2が居座っています。

よって、box_4が可能な限り左に行こうとすると、box_2のすぐ右側しか場所がありません。

よって、box_4はbox_2の右側で我慢します。

box_5のfloat:rightが効く

一番最後にbox_5のfloat:rightが効きます。

ここまでの説明で、もうわかりますよね。

box_5は可能な限り右側に行こうとしますが、右上にはbox_3が居座っています。

よって、box_5は、box_3のすぐ左で収まります。

この結果、boxの並び順としては、

box_1

box_2

box_4

box_5

box3

となり、floatの処理が完了します。

ひとつづつ考えていけば、floatも難しくはないのです。

もしも2カラムのサイトを作成したいのであれば、過去に紹介しているコピペで完成する2カラムサイトのHTMLとCSSをご利用ください。

この記事においてfloatの説明を行ったので、配布している2カラムのコードも無理なく理解できるはずです。

→コピペでHTMLとCSSで2カラムのサイトを作る

まとめ

ここまで、CSSのfloatについて解説を行ってきました。

HTMLとCSSを理解するうえで一番厄介なのがfloatです。

しかし、floatの一番難しいところは、人とコンピューターの間でfloatに関しての認識の違いがあるからです。

コンピューターは認識を変えてくれません。

よって、人の認識をコンピューターに合わせてあげれば、何も難しいことはないのです。

以上、CSSのfloatについて、参考になれば幸いです。