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

みなさん、こんにちは!

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

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

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

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

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

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

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

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

そこで、

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

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

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

スポンサーリンク

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

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

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

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

まずはHTMLです。

次にCSSです。

これによって、右寄せ、左寄せが可能になり、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>タグがあったとします。

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

具体的には、

  • 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について、参考になれば幸いです。