【初心者向け！】CSS floatプロパティを図解で分かりやすく解説！
デザイン・コーディング

【初心者向け！】CSS floatプロパティを図解で分かりやすく解説！

Share
このエントリーをはてなブックマークに追加

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

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

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

ハイブリッド型受講を可能に。医療団体に特化した研修管理システム。

https://manaable.com/

manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。

目次

  1. CSS floatプロパティについて
    1. CSS floatプロパティとは？
    2. CSS floatプロパティの使用例
    3. 値の種類
    4. 実践
  2. CSS floatで一部の要素だけ横並びにする
    1. 3つの要素のうち2つの要素にだけfloatをかける
    2. 後に続く要素の回り込みを解消するには？
    3. 回り込みを解消する
  3. CSS floatで親要素のある子要素を横並びにする
    1. 子要素にだけfloatをかける
    2. CSS floatで消えてしまった親要素を表示する方法（親要素にheightを設定）
    3. CSS floatで消えてしまった親要素を表示する方法（overflowプロパティ）
    4. overflow: hidden;で親要素を表示する
  4. まとめ

CSS floatプロパティについて

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

CSS floatプロパティとは？

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

CSS floatプロパティの使用例

CSS 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. }

と記述します。

実践

さっそくCSSでfloatプロパティを使って、実際に以下の3つの要素を並び変えてみましょう。１_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. }
  7. #box1 {
  8. background-color: #dd5268;
  9. }
  11. #box2 {
  12. background-color: #f4d923;
  13. }
  15. #box3 {
  16. background-color: #29add0;
  17. }

float: left;

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

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

float: right;

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

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

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

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

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

４_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. }
  5. #box1 {
  6. background-color: #dd5268;
  7. height: 100px;
  8. width: 170px;
  9. }
  11. #box2 {
  12. background-color: #f4d923;
  13. height: 70px;
  14. width: 400px;
  15. }
  17. #box3 {
  18. background-color: #29add0;
  19. height: 130px;
  20. width: 250px;
  21. }
  23. #box1, #box2 {
  24. float: left;
  25. }

５_800x450

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

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

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

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

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

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

つまり上の図では、

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

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

６_800x450

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

１５_800x450

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

１０_800x450

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

７_800x450

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

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

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

CSS clearプロパティについて

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

  • left

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

  • right

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

  • both

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

回り込みを解消する

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

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

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

８_800x450

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

ここまで、floatを使用して、それぞれ独立した要素を横並びにする方法をお伝えしました。では、横並びにしたい複数の要素に親要素がある場合、子要素にfloatをかけるとどうなるのでしょうか。

子要素にだけfloatをかける

グレーの親要素の中に、3つの文章の入ったdivタグのブロックを用意しました。この3つのブロックを先ほどと同じようにCSS上でfloatを使用して横並びにしていきます。まずはHTMLとCSSのコードを見ていきましょう。

１１_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. }
  7. #box1, #box2, #box3 {
  8. display: block;
  9. height: 100px;
  10. width: 150px;
  11. }
  13. #box1 {
  14. background-color: #dd5268;
  15. }
  17. #box2 {
  18. background-color: #f4d923;
  19. }
  21. #box3 {
  22. background-color: #29add0;
  23. }

では先ほどと同じくCSSのfloatを使用して、この3つの要素を、左寄せの横並びにしてみます。今回は下記のようにfloatをそれぞれのボックスにかけてみました。すると...

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

１２_800x450

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

このように、すべての子要素にfloatをかけると、親要素が消えてしまうという現象が発生します。

なぜこのような現象が起こるのかというと、親要素には、子要素の高さを認識できないと、高さがゼロになってしまうという特徴があります。

floatを理解するうえで、この辺りはなかなか分かりにくい部分だと思いますので、横から見た図をご用意しました。横から見ると実はこのようになっています。

１３_800x450

floatをかけた要素は文字通り浮いてしまいます。先ほどはすべての子要素であるdivタグのブロックにfloatをかけたため、浮いている状態になっています。その結果、親要素が「中には何も入っていない（高さを認識できない）」と判断してしまい消えてしまったのです。

この消えてしまった親要素を、子要素にfloatをかけたまま再度表示させるためにはいくつか方法がありますので、ご紹介していきます。

CSS floatで消えてしまった親要素を表示する方法（親要素にheightを設定）

1つ目の方法は、非常にシンプルです。先ほどの親要素にCSS heightで高さを設定してあげることで解決できます。先ほど紹介した親要素には、高さが設定されていなかったため、子要素の高さに依存して自動で高さが設定されていました。ですので、その親要素自体にCSSでheightを設定してしまえば、子要素がfloatで浮いていたとしても親要素が表示されなくなることはありません。

ただし、高さをheightで固定してしまうと柔軟なデザインの変更に対応できにくくなる場合があるため、固定の高さで問題ない場合以外はおすすめしません。例えば、CSSのfloatで浮いてしまった子要素の高さで親要素を変化させたいときには次でご紹介するoverflowプロパティを使用する方法を活用ください。

CSS floatで消えてしまった親要素を表示する方法（overflowプロパティ）

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

CSS overflowプロパティとは

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

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

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

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

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

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

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

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

まとめ

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

Share
このエントリーをはてなブックマークに追加

この記事の著者

itra
ITRA株式会社

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