floatを使って要素を横並びにする｜CORECOLORS（コアカラ）

記事内に商品プロモーションを含む場合があります

今回はfloatプロパティを使用して、要素を横並びにする方法について解説していきます。

横並びにする方法としては他にもdisplay: flexを使用するものもありますが、こちらの記事では従来型の（CSS3ではない）floatを使用した方法でお伝えします。

最近学習し始めた方も、忘れてしまった方も、理解しやすいように話していきますね。

Contents

要素を横並びにする

floatで横並びにするものとして、よく使用するのは、headerのナビゲーションが挙げられると思います。

こんな感じですね↓

floatを使用すると、そのプロパティの性質上、かけた要素の高さがなくなってしまいます。そのため、floatをかけた際は必ずそれを解除することを忘れないよう注意してください。

floatの解除の仕方としては次の3つのパターンがあります。

では、それぞれについて見ていきましょう。

これはいつ使うのかと言うと、例えば2カラムのサイトを作るとき、メインコンテンツとサイドナビを横並びにする場合に使えます。

ただし、divの横並びの場合は良いですが、ナビゲーションなどでliタグを横並びにする場合は注意が必要です。

なぜなら文法上のルールとして、ulの中に入れてよいのはliタグのみであって、divタグは入れてはいけないことになっているからです。

そんな時はどうすればよいのかと言うと、次にお伝えするclearfixを使用する方法があります

横並びにしたいタグをくるむ、親タグにclearfixをかけます。

clearfixのcssは検索してみて、こちらが使えそうなので、こちらを引用します。このままコピペして、clearfixをかけたいhtmiタグにクラスを追記していきます。

【追記：2020/5/4】
いや、むしろ下に追記したリセットCSSのソースをコピペして使用した方が、楽だと思うので下記を参考にしてくださいませ。

もしくは、リセットCSS内に次のような記述がある場合、htmlに”cf”というクラス名を追加するとfloatを解除できるようになります。便利ですね！

.cf:after{
content: “.”;
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

これで、liタグにdivタグを続けなくて済みます。つまり文法エラーを出さなくて済みます。

最後は、floatをかけた次の要素にclear: both;をかけると言うものです。
例えばmainやasideタグに続くものにfooterがあると思いますが、そのfooterにclear: bothをかけます。

ソースは次のようになります。

上記のcssでfloatの”浮き”が解除できるわけですね。

floatを使って横並びにする方法についてお伝えしました。

横並びにするには単にfloatを使用すればいいだけでなく、floatの”浮き”を解除するclear: both、あるいはclearfixを使用しなければなりません。

その方法は下記の通りでした。

いくつか覚えておくと、適宜使っているhtmlソースに応じて、使い分けができるので便利でしょう。

ご参考までに！