CSSで要素を浮動化:floatで自由自在にページを制作する

CSSで要素を浮動化:floatで自由自在にページを制作する

こんにちは!開発部第3チームの楊です!

デザイン本部に転職した以来、恐れ入りながらコーディングとシステムの両方を担当することになりました。以前にも興味でCSSなど使ったことがありますが、やはり本格的に使うと自分がまだまだ初心者ということを感じてきました。
いろいろ勉強の後、自分が忘れないために、そしてもしかしたら同じくCSSの使いに手を焼いているあなたのために、この1か月ぶりの投稿でCSSの話をしましょう!

floatで自由自在にページを制作する

CSSでよく使われるプロパティの一つとして、floatはその浮動化する機能で重要な役割を担当しています。いつも見えるのはfloat:leftとfloat:rightですが、簡単に説明すれば前者は左に浮動して(左に寄せて、複数の場合左から右に順番で並んで、置き切れないとき改行になります)、後者は右に浮動します。しかしfloatはこんなものだけですか?

答えはNoです!

floatを使うとき下記の内容を注意すべきです:

  • 浮動要素は自動的にブロックレベル要素に設定される
  • 浮動要素の次の非浮動要素の表示問題
  • 同じ方向に浮動する複数の要素を使うとき要素の高さに注意するべき
  • 子要素は全部浮動要素の場合、親要素の高さ

浮動要素は自動的にブロックレベル要素に設定される

まずブロックレベル要素とインライン要素の違いですが、簡単に言えばブロックレベル要素はpやdivなどの様な一行を独り占めして、その幅と高さなどを設定できる要素で、インライン要素はspanやaなどの様な一行を独り占めしないで、そのかわりに幅と高さなども設定できません。
以前に弊社の寺西はブロックレベル要素とインライン要素についてこちらで詳しく紹介したことがあります、もしよろしければ参考してください。

浮動要素は自動的にブロックレベル要素に設定されて、その要素にdisplay:blockを設定するときと同じくなります。

浮動要素の後ろの非浮動要素の表示問題

浮動要素の後ろの要素は非浮動のインライン要素の場合、非浮動要素の枠、背景、内容は全部浮動要素の「上層」で表示することになります。
浮動要素の後ろの要素は非浮動のブロックレベル要素の場合、非浮動要素の枠、背景は全部浮動要素の「下層」で表示することになって、内容だけは浮動要素の「下層」で表示することになりません。

下記のコードをご覧ください:

その結果はこちらです:

浮動div
非浮動div

非浮動span

 
ご覧のとおり、浮動のdiv要素の後ろにある非浮動のdiv要素の背景と枠は浮動のdiv要素の下に重なっていますが、内容はそうではありません。しかしspanの場合全体はdivの上に重なることになりました。

同じ方向に浮動する複数の要素を使うとき要素の高さに注意するべき

複数の浮動要素の高さが違う場合、想像とだいぶ違い意外な結果になる可能性があります。

普通同じ方向に浮動する複数の要素は順番で一行に並んで、パンパンになったら改行して次の行で並びます。その結果はこれです:

  • li1
  • li2
  • li3
  • li4
  • li5
  • li6
  • li8

 
しかし各要素の高さが違う場合こんな感じになります:

  • li1
  • li2
  • li3
  • li4
  • li5
  • li6
  • li7
  • li8

 
li6になるとき、すでに行に入れないから、改行のはずですが、しかし改行したらli1の下から並ぶではなく、li4の後ろ、li5の下から並びました。その原因はli4の高さはli5にはるかに超えて、li5とli6の合計の高さよりも大きいです。

子要素は全部浮動要素の場合、親要素の高さ

要素が浮動化したら、親要素から離脱したような存在になりますから、子要素の高さに応じて自分の高さを調整することはできません。

 
この問題を解決するにはもっとも使われているのは二つの方法です。

一つ目はすべての浮動要素の後ろにclear:bothを追加することです。

そして二つ目はclearfixクラスを使います。

 
使うときは親要素でclearfixをつければOKです。

結果こうなりました:

 
どうでしょうか?早くfloatの使い方を試しましょう!


Previous: WordPressのカスタム投稿タイプで投稿の種類を増やすには Next: いかに手を抜くことができるかを考える

© 2017 ALL CONNECT Inc. All Rights Reserved.