レイアウトで失敗する前に！CSSプロパティ「float」の使い方と問題点

やぁ、眠りに入る速さはボルト級のユトピ(@yutopi60pa)だよ。

今回解説するCSSプロパティはサイトのレイアウトをするときによく使われてる「float」だよ！
ふわふわな感じのCSSだよ！！
僕も頭のなかいつもふわふわ！

ということで今回はCSSプロパティの「float」について解説していきます。
このfloatはCSSのテクニックとして様々なところでよく使われているプロパティなのでよーーーく覚えておきましょう！

1 floatとは？
2 floatの応用
3 floatプロパティの問題点
4 まとめ

floatとは？

CSSプロパティの「float」は日本語訳で「浮く」という意味。
効果は指定した要素を右または左に寄せることができます。
そして余白のできた反対側には、そのあとに続く内容を回り込ませることができます。

指定方法は以下の3つです。

left・・・左に寄せる
right・・・右に寄せる
none・・・どちらにも寄せない

実際にやってみましょう。

floatを使ってみよう！

「left」で左に寄せる

コード

#fl1 {
float:left;
width:80%;
height:300px;
background:gold;
color:#000;
}

HTML
<div id="fl1">左によって、テキストが右に回り込むよ！</div>
<p>テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！</p>

#fl1 {

float:left;

width:80%;

height:300px;

background:gold;

color:#000;

}

HTML

<div id="fl1">左によって、テキストが右に回り込むよ！</div>

<p>テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！</p>

結果

#fl1 左によって、テキストが右に回り込むよ！

テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！

「right」で右に寄せる

コード

#fl2 {
float:right;
width:80%;
height:300px;
background:gold;
color:#000;
}

HTML
<div id="fl2">右によって、テキストが左に回り込むよ！</div>
<p>テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！</p>

#fl2 {

float:right;

width:80%;

height:300px;

background:gold;

color:#000;

}

HTML

<div id="fl2">右によって、テキストが左に回り込むよ！</div>

<p>テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！</p>

結果

#fl2 右によって、テキストが左に回り込むよ！

テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！テキストが左に回り込みます！

「none」何もしない！

コード

#fl3 {
float:none;
width:80%;
height:300px;
background:gold;
color:#000;
}

HTML
<div id="fl3">どっちにも寄らないよ！テキストは回り込まないよ！</div>
<p>テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！</p>

#fl3 {

float:none;

width:80%;

height:300px;

background:gold;

color:#000;

}

HTML

<div id="fl3">どっちにも寄らないよ！テキストは回り込まないよ！</div>

<p>テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！</p>

結果

#fl3 どっちにも寄らないよ！テキストは回り込まないよ！

テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！テキストは回り込まない！

これが基本的なfloatの使い方です。

leftやrightを指定するとテキストが反対側へ回り込んでいるのがわかりますね。
floatを指定された要素とテキストがくっついていますのが、そこは適宜marginなどで余白を設定してあげれば見やすくなりますね。

noneの場合はどっちにも寄らないと書きながら左に寄っていますね。これはもともとの要素の位置なのでこれで正常です。floatで左に寄せた場合と違うのは、そのあとに続いているテキストが回り込んでいないこと。

これは見えない要素の余白が幅いっぱいに広がっているため、テキストが回り込む場所が無くこのような現象が起きています。
floatをしてあげるとその余白も無くなるので、テキストが回り込めるというわけです。

またfloatを指定する要素を画像にすると、本のようなレイアウトにすることも可能です。

画像をfloatさせよう！

画像を左に寄せる

コード

#fl4 {
    float: left;
    margin-right: 15px;
    width: 80%;
    height: auto;
}

HTML
<img src="https://60pablog.com/wp-content/uploads/2016/08/netsui.png" alt="netsui" class="alignnone size-full wp-image-782" id="fl4" />
<p>熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！</p>

#fl4 {

float: left;

margin-right: 15px;

width: 80%;

height: auto;

}

HTML

<p>熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！</p>

結果
netsui

熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！熱意が足りないぞ！！

こんな感じで画像にfloatを指定すると画像の隣に文字が回り込み、本みたいなレイアウトになるので非常に読みやすくなりますね。

さて、続いてはfloatの応用例と、その問題点の解説をしていこうと思います。

floatの応用

最初の方にも書きましたが、floatプロパティはCSSのレイアウトでよく使われています。
例えばサイト全体のレイアウトの場合。

このような一般的なサイトをCSSでレイアウトするとき、「メイン」のところに「float:left;」を指定してあげます。そうするとメインは左に寄り、サイドバーは左に回り込んできますので、画像の通りのレイアウトが実現できるということです。

ちなみに当ブログをPCで見た場合、右サイドバーはCSSの「float:right;」を使って右に寄せています。
このようにfloatプロパティはサイト全体のレイアウトでもよく使われています。

でも、この場合メインとサイドバーにそれぞれfloatを指定しもいいの？

全然OK！でもどっちも両端に寄ってしまって、メインとサイドバーの間が無駄に大きくなったりもするから、そこは必要に応じて調整した方がいいね。

他にも<ul>タグを通常の縦並びから、横並びにしたいときは<li>に「float:left;」を指定すると上手く横に並んでくれます。

ulタグを横並びにする！

liタグに「float:left」を指定

コード

#flul li {
float: left;
width:16%;
}

HTML
<div id="fl5">
  <ul id="flul">
    <li>小学校</li>
    <li>中学校</li>
    <li>高等学校</li>
    <li>大学</li>
    <li>大学院</li>
    <li>社畜</li>
  </ul>
  <p>横並びになった！</p>
</div>

#flul li {

float: left;

width:16%;

}

HTML

</ul>

<p>横並びになった！</p>

</div>

結果

小学校
中学校
高等学校
大学
大学院
社畜

横並びになった！

このようにうまく横に並んでくれましたね。

こういった裏技的なテクニックでfloatは頻繁に使われています。
しかし、実はfloatにはちょっとした問題点もあるんです。

floatプロパティの問題点

それはfloatを指定した要素の”親要素の高さ”が消滅してしまうこと。
まずは下の画像をご覧ください。

画像のように「#main」と「#main2」にfloatを書けると、その親要素である「#wrap」の高さが消えています。

ちなみに上の方のfloatのデモでもこの現象が起きています。

デモを表示している場所はcssで高さを指定しているので、その高さ分は確保されていますが、それを超えるとはみ出てしまいますね。

この現象の理由としては、floatは最初に言ったように「浮かす」という効果があります。浮かせた上で、右や左に寄せています。

なので要素が浮いた状態だと、その親要素である#wrapはfloatを指定された子要素の高さを認識できず、高さが無くなってしまっているのです。

つまり子要素がfloatしていると、親要素は高さ的に子要素を持っていないのと同じ意味になります。
高さがないと、そのあとにくる要素が上へと詰まってしまい、レイアウトが崩れる原因になりますね。

このようにfloatには特有の問題点が存在しています。

ちなみにその問題を解決してくれるてclearプロパティなどを使った3通りのテクニックがあります。
そのまとめについてはまた後日記事にしたいと思いますので、少々お待ちください。

まとめ

いかがでしたか？
このようにfloatプロパティはレイアウトするうえで非常に重要なものだということが分かりましたね。
加えて独自の問題点があるのも理解できたと思います。

このfloatは少々CSSビギナーだと扱いが難しいところがありますが、特有の癖などを理解できれば使いこなすこともできるはずです。

なのでここは面倒がらずに実践しながら覚えていってくださいね。

質問や意見がありましたらお気軽にツイッターの方へどうぞ。

ユトピのツイッター
@yutopi60pa

floatとは？

floatの応用

floatプロパティの問題点

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル