CSSでfloatの中にfloatを使う方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSでfloatの中にfloatを使う方法について解説しています。最初にfloatプロパティの基本と使用時の注意点について説明します。次にfloatの中にfloatを使う場合の書き方と動作について見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
CSSでfloatの中にfloatを使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね!

どういう内容でしょうか?

floatの中にfloatを使う方法について詳しく説明していくね!

お願いします!
目次
使用する場面
floatは要素を浮動化させるプロパティです。ちなみにfloatには英語で”浮く”という意味があります。通常のブロックは縦に並びますが、floatを使うことによって、ブロックを右や左に寄せることができます。
右に画像、左に文章のようなレイアウトなど、要素を横に並べたいような場合に使用します。
floatを使う注意点
floatしたブロックは浮いている(浮動化している)ため、高さが計算されないという点に注意が必要です。
下記の例を参照してみてください。
See the Pen
jObVMmB by marihashimoto (@mari877)
on CodePen.
上のボックスは水色のボックスに赤色のボックスがおさまるようになっていますが、下のボックスでは、floatした中の要素が水色の親のボックスからはみ出してしまっています。
また、floatさせた要素の後続の要素についても、floatさせた要素の高さが無視されてしまうので、下記のように下のボックスが上に食い込んでしまいます。
HTMLの一番下に記述している水色のボックスが黄色いボックスの下敷きになってしまっています。
See the Pen
LYpbxzO by marihashimoto (@mari877)
on CodePen.
このような現象が起こることを踏まえてコーディングしていく必要があります。
スタイルが上手くいかない原因と対処法
上記のような現象を解消するための方法として、clearfixという方法があります。
左右に並べたい要素(floatを適用する要素)をdivタグなどで囲むような構造にします。囲んでいる要素の::after(擬似要素)に下記のようなCSSを適用します。
CSS(clearfix):
floatした要素の親要素のセレクタ::after { content: ''; display: block; clear: both; }
一般的に、clearfixというクラスに上記のCSSを定義しておいて、親要素にclearfixというクラス名をつけて使います。
HTML:
<div class="box clearfix"> <div class="child1">float:Left</div> <div class="child2">float:right</div> </div> <div class="box">float:none</div>
CSS:
div{ box-sizing:border-box; } .box{ padding:30px; margin:20px; background:skyblue; } .child1{ width:50%; padding:30px; float:left; background:yellow; } .child2{ width:50%; padding:30px; float:right; background:orange; } .clearfix::after { content: ''; display: block; clear: both; }
表示は以下のようになります。水色のボックスが、floatしたオレンジと黄色のボックスの高さを含んでいます。CodePenの clearfix クラスを外して表示を確認してみると違いがわかりやすいです。
See the Pen
ZEbBBOm by marihashimoto (@mari877)
on CodePen.
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
floatの中にfloatを使ってみよう
上記のことを踏まえて、HTMLの構造に注意しながら、floatの中にfloatが入ったレイアウトを作ってみます。
See the Pen
xxwRRXb by marihashimoto (@mari877)
on CodePen.
黄色、オレンジ、水色のボックスはfloatしている要素です。各要素の高さがしっかり反映されるようにHTMLを組み立てることと、clearfixをうまく使えば、いろんなレイアウトを作ることが可能です。
HTML:
<div class="wrap clearfix"> <div class="box"> float:left<br> <div class="child1">float:Left</div> <div class="child1">float:Left</div> </div> <div class="box"> float:left<br> <div class="child2">float:Left</div> <div class="child2">float:Left</div> </div> </div> <div class="bottom">float:none;</div>
CSS:
div{ box-sizing:border-box; } .wrap{ padding:20px; background:lightpink; } .box{ width:45%; padding:30px; margin:0 2.5%; float:left; background:skyblue; } .child1{ width:30%; padding:30px 0; margin:10px; text-align:center; float:left; background:yellow; } .child2{ width:30%; padding:30px; margin:10px; text-align:center; float:right; background:orange; } .bottom{ padding:30px; background:tomato; } .clearfix::after { content: ''; display: block; clear: both; }
監修してくれたメンター
橋本真理
web/グラフィックデザイナー webサイトのデザイン、コーディングから公開・運用等、またロゴや各種広告などのデザインやイラストを描いたり、日々楽しくお仕事しています。 TechAcademyではWebデザインコース・WordPressコースを担当。趣味は、ラジオと音楽と踊ること。自慢は目がいいこと。 |

内容分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)