各種要素を横並びにする方法のひとつがCSSのfloatプロパティです。本記事ではCSSのfloatプロパティの概要や使い方、使うメリットデメリット、どのような代替手段があるかなどについて解説します。
CSSのfloatプロパティとは、簡単にいうと、縦に並んでいた要素を横並びにする方法のひとつです。
Microsoft Edgeなど最新のブラウザに対応した案件ではあまり使われていませんが、Internet Explorerなどの古いブラウザに対応させる必要がある場合はfloatプロパティを使います。
この記事では、CSSのfloatプロパティの概要や使い方、代替手段について解説します。
目次
CSSのfloatプロパティとは？
floatプロパティとはCSSプロパティのひとつで、縦に並んでいる要素を横並びにするプロパティです。Webサイトのレイアウトを整える際に使用されます。
たとえば「container」というclassが付与された要素内で各種要素を横並びにする場合、floatプロパティは下記のように指定します。
.container{
float:left（もしくはright、none、inheritなど）;
}
floatプロパティには “left”, “right”, “none”, “inherit” の4つの値があり、これらを指定することによって要素をどのような形で横並びにするか指定できます。
CSSのfloatプロパティは使うべき？
floatプロパティは以前からCSSに実装されていたプロパティであるため、使用することでInternet Explorerなどの古いブラウザに対応できるメリットがあります。
しかし、デザインレイアウト目的のプロパティとしては使いづらいうえに、後述のflexboxと比べると実装の自由度が低いといったデメリットがあります。
そのため、最新のブラウザに対応させたい場合はfloatではなく、flexboxを使って実装するのがおすすめです。flexboxを「container」というclassが付与された要素内で使用するコードの例は、下記です。
.container{
display:flex;
}
CSSのfloatプロパティを指定する方法
古いブラウザにデザインを対応させる場合には、floatプロパティを使ってデザインを作成しなければならないことがあります。ここからは、floatプロパティを使って要素を指定する下記の4つの方法を詳しく解説します。
- 要素を左に寄せる方法
- 要素を右に寄せる方法
- 要素を指定しない方法
- 親要素のある子要素を横並びにする方法
要素を左に寄せる方法
要素を左に寄せる際には、floatプロパティの値に「left」を指定します。
たとえば、下記のようなHTMLとCSSのコードがあったとします。
<div id="float-box-1" class="boxes"></div>
<div id="float-box-2" class="boxes"></div>
<div id="float-box-3" class="boxes"></div>
.boxes{
display:block;
height:100px;
width:100px;
}
#float-box-1{
background:red;
}
#float-box-2{
background:blue;
}
#float-box-3{
background:yellow;
}
下記のように指定することで色付きのdiv要素を左寄せの横並びにすることが可能です。
#float-box-1 , #float-box-2 , #float-box-3{
float:left;
}
要素を右に寄せる方法
要素を右に寄せる際には、floatプロパティの値に「right」を指定します。
先述したHTMLとCSSをサンプルコードとして解説します。下記のように指定することで色付きのdiv要素を右寄せの横並びにすることが可能です。
#float-box-1 , #float-box-2 , #float-box-3{
float:right;
}
配置を指定しない方法
floatプロパティは、「none」という値を指定することによって配置を指定しないこともできます。
「none」という値は、パソコンでは横並びで表示をさせたくてもスマートフォン表示では縦並びにしたいときなどに使用します。
たとえば、パソコン表示で「left」が指定されているfloatプロパティがある場合、下記のように指定することで画面幅519px以下のスマートフォン上では通常通りの縦並びで表示可能です。
#float-box-1 , #float-box-2 , #float-box-3{
float:left;
}
@media screen and (max-width: 519px) {
#float-box-1 , #float-box-2 , #float-box-3{
float:none;
}
}
親要素のある子要素を横並びにする方法
親要素のある子要素を横並びにする際には、親要素内の下位要素に対してfloatプロパティを指定する記述をします。
<div class="container"> <div id="float-box-1" class="boxes"></div> <div id="float-box-2" class="boxes"></div> <div id="float-box-3" class="boxes"></div> </div>
たとえば、上記のHTMLでcontainerクラスの子要素を左寄せの横並びにするには、下記のように記述します。
.container div{
float:left;
}
しかしこの記述をすると、containerクラスのdiv要素の高さがゼロになってしまいます。
この現象は、floatプロパティに「指定された要素を浮かせる」という性質があるためです。
そして、何も指定していない状態での親要素は、子要素の高さに合わせて高さが変わるため、子要素の高さを親要素が認識できなくなり高さがゼロになってしまいます。
これは「高さの崩壊」（collapsing）と呼ばれる現象で、親要素が子要素の高さを考慮に入れなくなるために起こります。「高さの崩壊」を避けるには「clearfix」というテクニックが有効です。
「clearfix」は親要素に適用するスタイルルールで、親要素が浮動子要素の高さを考慮するようにします。下記が「clearfix」のコード例です。
.container::after {
content: "";
display: table;
clear: both;
}
上記記述を追加することによって、親要素の高さを浮動子要素の高さに合わせ「高さの崩壊」問題を解決できます。
CSSのfloatプロパティの回り込みを解除する方法
floatプロパティを使って特定の要素だけを横並びにしたい際には、下記のような記述ができます。
<div id="float-box-1" class="boxes"></div>
<div id="float-box-2" class="boxes"></div>
<div id="float-box-3" class="boxes"></div>
#float-box-1 , #float-box-2{
float:left;
}
しかし、視覚的にはid=”float-box-3″のdiv要素が消えたように見えてしまいます。
これは実際に消えたわけではなく、id=”float-box-3″のdiv要素がid=”float-box-1″のdiv要素の下に回り込んでしまっているために起こります。
このような回り込みを解除するためには、下記の3つの方法が有効です。
- clear:both;を指定しよう
- 親要素にclearfixを指定しよう
- 親要素にoverflow:hidden;を指定しよう
ここからは、これら3つの方法について解説します。
clear:both;を指定しよう
clear:both;を指定することによって、要素の回り込みを解除できます。下記がコードの例です。
<div id="float-box-1" class="boxes"></div>
<div id="float-box-2" class="boxes"></div>
<div id="float-box-3" class="boxes"></div>
#float-box-1 , #float-box-2{
float:left;
}
上記のようなHTMLとCSSのコードでfloatプロパティが指定されている場合、下記のように記述することでid=”float-box-3″の要素が下に埋もれる（見えなくなる）のを防げます。
#float-box-3{
clear:both;
}
clearプロパティは、floatプロパティの指定で起こる要素の回り込みを解消するためのプロパティです。「right」「left」「both」という3種類の値を持っていますが、大抵の場合は「both」が使用されます。
親要素にclearfixを指定しよう
親要素にclearfixを指定することでも、要素の回り込みを解除できます。
clearfixを指定するためには、まず下記のようにfloatプロパティが指定されている要素をclearfixというクラスが付与されたdiv要素で囲みます。
<div class="clearfix"> <div id="float-box-1" class="boxes"></div> <div id="float-box-2" class="boxes"></div> </div> <div id="float-box-3" class="boxes"></div>
次にCSS内で下記のような記述をし、clearfixを指定します。
.clearfix::after {
content: "";
display: block;
clear: both;
}
上記のように記述することによって、id=”float-box-3″のdiv要素を下に回り込ませることなく表示させることが可能です。
また上記のコードは、CSSファイルの一番上に記述することによってHTMLで指定したすべてのclearfixに対応させられます。
floatプロパティは、下記のように記述することでcontainerクラスの子要素を横並びにできます。しかし、親要素の高さがゼロになるため表示されなくなる問題が生じます。
<div class="container">
<div id="float-box-1" class="boxes"></div>
<div id="float-box-2" class="boxes"></div>
<div id="float-box-3" class="boxes"></div>
</div>
.container div{
float:left;
}
このような場合には、親要素であるcontainerクラスにoverflow:hidden;を指定することで親要素の高さの崩れを解消することが可能です。
.container{
overflow:hidden;
}
overflow:hiddenは、元々要素からはみ出した要素を隠すための記述方法ですが、上記のように指定することで高さ崩れを解消でき、親要素が適切な高さを持つようになります。
CSSのfloatの代わりとなるプロパティを知ろう
flexboxに関連するさまざまなプロパティを使うことにより、floatの代わりとしてfloatよりも便利にWebページのレイアウトを整えられます。ここからは、下記の4つについて、手順や効果を詳しく解説します。
- display:flexを使おう
- flex-directionで要素の順番を変えてみよう
- justify-contentで要素の水平方向の配置を調整してみよう
- flex-wrapで折り返しを変更しよう
display:flexを使おう
display:flex;を使うと、floatプロパティを使うことなく要素を横並びにできます。
たとえば、下記のようなHTMLのコードがあったとします。
<div class="container"> <div id="flex-box-1" class="boxes"></div> <div id="flex-box-2" class="boxes"></div> <div id="flex-box-3" class="boxes"></div> </div>
この場合、下記のように親要素にdisplay:flex;を指定するだけで子要素を左寄りの横並びにすることが可能です。
.container{
display:flex;
}
flex-directionで要素の横並びと縦並びを操作しよう
flex-directionプロパティを使うことで、要素の横並びと縦並びを操作できます。
flex-directionプロパティは、親要素に対して下記のように指定します。
.container{
display:flex;
flex-direction:値;
}
flex-directionの値の種類は、下記の通りです。
| 値 | 説明 |
|---|---|
| row | 子要素を左から右に指定します。(初期値) |
| row-reverse | 子要素を右から左に指定します。 |
| column | 子要素を上から下に指定します。 |
| column-reverse | 子要素を下から上に指定します。 |
justify-contentで要素の水平方向の配置を調整してみよう
justify-contentプロパティを使うことで、要素の水平方向の配置を調整できます。
justify-contentプロパティは、親要素に対して下記のように指定します。
.container{
display:flex;
justify-content:値;
}
justify-contentの値の種類は、下記の通りです。
| 値 | 説明 |
|---|---|
| flex-start | 子要素を始点側に寄せます。(初期値) |
| flex-end | 子要素を終点側に寄せます。 |
| center | 子要素を中央に寄せます。 |
| space-between | 子要素同士の間に均等にスペースを空けます。 |
| space-around | 子要素の両端に均等にスペースを空けます。 |
flex-wrapで折り返しを変更しよう
flex-wrapプロパティを使うことで、要素の折り返しを変更することが可能です。
flex-wrapの値の種類は、下記の通りです。
| 値 | 説明 |
|---|---|
| nowrap | 折り返しを指定しません。(初期値) |
| wrap | 折り返しを指定します。 |
| wrap-reverse | 折り返しを指定しますが、積み上げの方向が通常と逆になります。 |
これらの値を使うことで、フレキシブルなレイアウトの実現が可能です。
CSSのfloatプロパティはdisplay:flex;が使えない案件だけで使おう
本記事では、縦に並んでいる要素を横並びにしWebサイトのレイアウトを整える方法として、floatプロパティを使う方法とdisplay:flexを指定する方法の2つを紹介しました。
floatプロパティにはInternet Explorerなどの古いブラウザにも対応できるメリットがありますが、要素の回り込みへの対応も必要であることから、デザインのレイアウトを整える作業が複雑になってしまいます。
そのため、一般的にはWebデザインにはdisplay:flex;を使用し、特定のレイアウト効果を達成するためやブラウザなどの都合でdisplay:flex;が使えない場合にのみfloatプロパティを使うようにしましょう。
