スライドショー

CSSのfloatを使ってdiv要素を横並びする方法

こんにちは! ライターのナナミです。

WEBサイトを作っていて、要素を横並びにしたいなぁ…と思うときってよくありますよね。

でもやり方がわからない…
やってみたけど、レイアウトが崩れちゃう…

なんてお悩みありませんか?

今回は要素を横並びにする、floatについて解説していきます。

この記事は下記の流れで進めていきます。

  • 【基礎】floatとは何か
  • 【基礎】floatの使い方
  • 【発展】レイアウト崩れの対処法

これであなたのお悩みもサクッと解決。横並びレイアウトマスターになっちゃいましょう!

floatとは?

floatは、指定した要素に他の要素を回り込ませるプロパティです。

ちょっとこの説明だとわかりづらいですね。
下の画像をご覧ください。

float1

テキストの中に赤い要素が配置されていますね。正しくは、赤い要素の周りにテキストが配置されている状態です。

つまりこの状態は、要素の右側に文字が回り込んでいるのです。

float2

回り込ませられるのは文字だけではありません。要素も同じように回り込ませることができます。

float3

これで横並びのレイアウトを作れる、というわけです。floatの仕組みなどはとても奥が深いので、今回は要素を回り込ませるプロパティで、横並びのレイアウトが作れるというところがわかればOKです。

もっと深く理解したい場合は、下記の記事などを見てみてください。
http://taneppa.net/float/

floatの使い方

floatの使い方は簡単。周りの要素が回り込むようにしたい要素(さっきの赤い要素にあたります)に指定してあげるだけです。

基本形はこんな感じです。

CSS

セレクタ {
    float: 値;
}

値のところに、どのように回り込ませるのかというルールを指定します。それぞれの値がどのような見栄えになるのか、細かく見ていきましょう。

この項目では下記のHTMLとCSSを基準に解説していきますね。

float4

HTML

<div class="float_test">
    
</div>
<div class="float_test blue-box">
    
</div>

CSS

.float_test {
    height: 150px;              /* 高さ指定 */
    width: 150px;               /* 幅指定 */
    background-color: #f00;     /* 背景色指定 */
    margin:  10px;              /* 周りの余白指定 */
}
.blue-box {
    background-color: #2196F3;  /* 背景色指定 */
}

右側に回り込ませる:float:left

float5

CSS

.float_test {
    float:  left;   /* 回り込み指定 */
}

指定した要素を左に寄せて、右側に回り込みをさせます。一番基本的な値ですね。

leftとつくので左に回り込むように思えますが、回り込みが起きるのは右です。
注意しましょう。

左側に回り込ませる:float:right

float6

CSS

.float_test {
    float:  right;  /* 回り込み指定 */
}

指定した要素を右に寄せて、左側に回り込みをさせます。

leftと同じく、回り込みが起きるのは名前と逆の方です。こちらも注意!

回り込みをやめる:float:none

float4

CSS

.float_test {
    float:  none;   /* 回り込み指定 */
}

floatさせているものを、floatなしにする値です。まあ要は初期値に戻すという感じですね。

レイアウトが崩れた時は

floatで一番の難関は、float自体の指定ではありません。

そう、レイアウト崩れです。例えば、floatを使っていてこんな感じになってしまったことってありませんか?

float7

HTML

<div class="float_test2">
    <div class="float_test">
    </div>
    <div class="float_test blue-box">
    </div>
</div>
<div class="float_test3">
    赤と青の要素の下に配置したい要素
</div>

CSS

.float_test {
    height: 150px;              /* 高さ指定 */
    width: 150px;               /* 幅指定 */
    background-color: #f00;     /* 背景色指定 */
    margin:  10px;              /* 周りの余白指定 */
}
.blue-box {
    background-color: #2196F3;  /* 背景色指定 */
}

.float_test {
    float: left;                /* 回り込み指定 */
}

.float_test3 {
    height:  300px;             /* 高さ指定 */
    background-color: #9ddd;    /* 背景色指定 */
}

水色の要素を赤い要素と青い要素の下に配置したいのですが、背景のように入り込んでしまっていますね。これはfloatの仕様により、親要素の高さがなくなってしまっているからです。こんな状態では、実用的とは言えませんよね…

なぜレイアウトがくずれてしまうのか

そもそもなぜレイアウトが崩れてしまうのでしょう。それは、floatという名前にヒントがあります。

floatを指定した要素は、基本の位置から浮遊している状態になるのです。

float0

こうなると、親要素は高さを認識できません。そのため、親要素の高さがなくなり、下のコンテンツが上にぐいっと上がってきてしまうのです。

解決方法

これじゃあfloatは使い物にならないじゃん…

と思ったあなた。ご安心ください!ちゃんと解決方法があります。

親要素にoverflow:hiddenをかけてみましょう。

float8

HTML

<div class="float_test2">
    <div class="float_test">
    </div>
    <div class="float_test blue-box">
    </div>
</div>
<div class="float_test3">
    赤と青の要素の下に配置したい要素
</div>

CSS

.float_test {
    height: 150px;              /* 高さ指定 */
    width: 150px;               /* 幅指定 */
    background-color: #f00;     /* 背景色指定 */
    margin:  10px;              /* 周りの余白指定 */
}
.blue-box {
    background-color: #2196F3;  /* 背景色指定 */
}

.float_test {
    float: left;                /* 回り込み指定 */
}

.float_test3 {
    height:  300px;             /* 高さ指定 */
    background-color: #9ddd;    /* 背景色指定 */
}

.float_test2 {
    overflow:  hidden;          /* 親要素の高さを復活 */
}

なんと、親要素の高さがきちんと出るようになるのです。これでレイアウト崩れの心配はありませんね。

こんな感じで、親要素の高さを復活させる方法は他にもあります。
下記の記事で詳しく解説しているので、ぜひ併せて読んでみてください。

もう悩まない!CSSのfloatで起きる問題を解決する5つの方法
更新日 : 2019年10月18日

まとめ

いかがでしたか?

少々クセのあるプロパティですが、使いこなせればレイアウトも自由自在です。対処をきちんとすれば、崩れなんて怖くない!

ぜひ活用してくださいね。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説