6日でできる 新HTML&CSS入門｜floatで横並びにする方法
縦に並ぶボックスも、floatを使えば横に並べられる。
回り込みの仕組みを理解して、CSSレイアウトの基本をしっかり身に付けよう。
Webページを作っていると、複数のボックスを横に並べたい場面がよくあります。たとえば、商品カードを横に並べたい、メニュー項目を横方向に配置したい、画像の横に説明文を回り込ませたい、といった場面です。
通常、<div>のようなブロック要素は、上から下へ縦に積み重なるように表示されます。そのため、何も指定しなければ、複数の<div>は1列に並びます。これをCSSで横方向に配置するための方法のひとつがfloatです。
floatは、要素を左側または右側に寄せ、後に続く要素をその横に回り込ませるためのCSSプロパティです。現在のWeb制作ではflexboxやgridを使った横並びが主流ですが、floatはCSSの基本として今でも大切な知識です。古いサイトの修正や、CSSの仕組みを理解する場面でも役立ちます。
この記事では、floatの基本的な考え方、leftやrightの違い、横並びレイアウトの作り方、複数classを使ったスタイルの分け方、そしてfloatを解除するclearの使い方まで、サンプルを交えながら分かりやすく解説していきます。
floatは要素を左右に寄せて回り込ませるCSS
floatは、要素を左または右に寄せて、後に続く内容をその横へ回り込ませるためのCSSです。もともとは、画像の横に文章を回り込ませるようなレイアウトでよく使われていました。
たとえば、画像にfloat: left;を指定すると、画像は左側に寄り、その後の文章は画像の右側に回り込みます。複数のボックスにfloat: left;を指定すると、横幅が許す範囲で左から右へ並んでいきます。
| 値 | 動き | 主な使い方 |
|---|---|---|
| left | 要素を左側に寄せる | 左から横並びにしたいとき、画像の右側に文章を回り込ませたいとき |
| right | 要素を右側に寄せる | 右側のカラムや、画像を右に寄せたいとき |
| none | 回り込みを行わない | 通常の表示に戻したいとき |
floatを使うときに大切なのは、floatを指定された要素は通常の文書の流れから少し外れたように扱われることです。そのため、後に続く要素が思わぬ位置に回り込んだり、親要素の高さがうまく計算されなかったりすることがあります。
この特徴を理解したうえで使うと、floatの動きが分かりやすくなります。
図1：floatは要素を左右に寄せて周囲を回り込ませる
この図から分かること
floatを使うと、要素を左側または右側に寄せることができます。float: left;では要素が左に寄り、後続の内容が右側に回り込みます。float: right;では要素が右に寄り、後続の内容が左側に回り込みます。横並びや画像まわりの文章配置を理解するうえで、基本になる考え方です。
floatで横並びにする基本の考え方
複数のブロック要素を横に並べたい場合、それぞれの要素にfloat: left;を指定します。すると、要素は左から順番に横へ並ぼうとします。
ただし、横並びにするには、各要素の横幅も指定しておく必要があります。幅を指定しないと、要素の大きさが分かりにくくなり、意図した横並びにならないことがあります。
基本的な考え方は次のとおりです。
| 指定 | 役割 |
|---|---|
| float: left; | 要素を左に寄せて横並びにする |
| width | 横並びにするボックスの幅を指定する |
| height | ボックスの高さを指定する |
| margin-right | ボックス同士の間隔を作る |
| clear | floatの回り込みを解除する |
floatで横並びにするときは、要素の合計幅にも注意します。たとえば、1つのボックスが140pxで、右に18pxのmarginがある場合、1つあたりの横幅は実質158pxです。これを3つ並べるなら、表示領域にはある程度の横幅が必要です。
floatを使った横並びレイアウトのサンプル
ここでは、3つのボックスを左から横一列に並べるサンプルを見てみます。共通のデザインは.boxにまとめ、2つ目と3つ目の色だけを別のclassで変えます。
ファイル名： lesson33_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatで横並びにするサンプル</title>
<style>
.item-box {
float: left;
width: 150px;
height: 100px;
margin-right: 18px;
border: 3px solid #e57373;
font-size: 1.1em;
line-height: 100px;
text-align: center;
background-color: #fff9c4;
}
.green-box {
background-color: #c8e6c9;
color: #2e7d32;
}
.blue-box {
background-color: #b3e5fc;
color: #1565c0;
}
.clear-float {
clear: both;
}
</style>
</head>
<body>
<h1>floatによる横並び</h1>
<div class="item-box">ボックスA</div>
<div class="item-box green-box">ボックスB</div>
<div class="item-box blue-box">ボックスC</div>
<div class="clear-float"></div>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ボックスA、ボックスB、ボックスCが左から横一列に並びます。
3つの<div>には、すべてitem-boxというclassが付いています。このitem-boxにfloat: left;を指定しているため、3つのボックスが左から順番に横へ並びます。
ボックスBにはgreen-box、ボックスCにはblue-boxも追加しています。これにより、共通のサイズや配置はitem-boxで指定しながら、色だけを個別に変更できます。
サンプルコードのポイント
このサンプルでは、横並びにするための基本的なCSSをいくつか組み合わせています。
| CSS・属性 | 指定内容 | 役割 |
|---|---|---|
| float | left | ボックスを左に寄せて横並びにする |
| width | 150px | 各ボックスの横幅を指定する |
| height | 100px | 各ボックスの高さを指定する |
| margin-right | 18px | ボックス同士の右側の間隔を作る |
| border | 3px solid #e57373 | ボックスに枠線を付ける |
| line-height | 100px | 1行の文字を縦中央に見せる |
| text-align | center | 文字を中央揃えにする |
| clear | both | floatの回り込みを解除する |
line-height: 100px;は、ボックスの高さと同じ値にすることで、1行の文字を縦方向の中央に近い位置へ表示するために使っています。ただし、複数行の文章を入れる場合には向かないことがあります。実務では、flexboxを使って中央揃えにする方法もよく使われます。
共通classと個別classを分ける考え方
サンプルでは、item-box、green-box、blue-boxというclassを使っています。このように、共通のスタイルと個別のスタイルを分けると、CSSを管理しやすくなります。
item-boxには、横並び、幅、高さ、枠線、文字配置など、すべてのボックスに共通する指定を書いています。
.item-box {
float: left;
width: 150px;
height: 100px;
}一方で、色だけを変えたい場合は、別のclassに分けます。
.green-box {
background-color: #c8e6c9;
color: #2e7d32;
}HTML側では、1つの要素に複数のclassを指定できます。class名は半角スペースで区切ります。
<div class="item-box green-box">ボックスB</div>この書き方によって、item-boxの共通スタイルとgreen-boxの個別スタイルが両方適用されます。
図2：共通classと個別classで横並びボックスを作る
この図から分かること
横並びにする共通の指定はitem-boxのようなclassにまとめ、色などの違いはgreen-boxやblue-boxのような別classで指定できます。1つの要素に複数のclassを付けることで、共通デザインと個別デザインを組み合わせられます。CSSを分けて書くことで、あとから修正しやすくなります。
floatの値を使い分ける
floatには、主にleft、right、noneの3つの値があります。
| 値 | 動作内容 | 使いやすい場面 |
|---|---|---|
| left | 要素を左に寄せ、後の内容を右側に回り込ませる | 横並びのボックス、左寄せ画像 |
| right | 要素を右に寄せ、後の内容を左側に回り込ませる | 右側カラム、右寄せ画像 |
| none | 回り込みをしない | 通常表示に戻す、floatを解除する指定として使う |
横並びのボックスを作る場合は、float: left;を使うことが多いです。左から順番に並ぶため、HTMLに書いた順序と画面上の順序が対応しやすくなります。
画像を右側に置き、文章を左側に回り込ませたい場合は、float: right;が使えます。文章中の画像配置では、floatの本来の使い方に近い動きになります。
floatを使うときはclearもセットで考える
floatを使うと、後に続く要素がfloatした要素の横に回り込むことがあります。これはfloatの基本的な動きですが、横並びのボックスを作ったあとに通常の文章や見出しを表示したい場合には、意図しないレイアウトになることがあります。
そのようなときに使うのがclearです。clearは、floatによる回り込みを解除するためのCSSです。
.clear-float {
clear: both;
}clear: both;は、左回り込みと右回り込みの両方を解除する指定です。floatのあとに通常の表示へ戻したい場合によく使います。
HTMLでは、floatした要素の後ろに、clear用の空の<div>を置く方法があります。
<div class="clear-float"></div>この要素によって、それ以降の内容はfloatの影響を受けず、下に表示されやすくなります。
clearを使わないとどうなるのか
floatを解除しないまま次の要素を書いた場合、その要素が横に回り込んだり、想定より上に詰まって表示されたりすることがあります。
たとえば、横並びのボックスの下に説明文を置きたいのに、説明文がボックスの横に入り込んでしまうことがあります。これは、floatが後続の要素に影響しているためです。
clearを指定すると、「ここから先は回り込みの影響を受けないでください」という意味になります。floatを使ったら、その後ろでclearが必要になるかどうかを確認する習慣を付けると安心です。
図3：clearでfloatの回り込みを解除する
この図から分かること
floatを使うと、後に続く要素が横に回り込むことがあります。横並びの後に通常の表示へ戻したい場合は、clear: both;で回り込みを解除します。floatとclearはセットで理解すると、レイアウトの崩れを防ぎやすくなります。
float利用時に起こりやすい注意点
floatは便利ですが、使い方によってはレイアウトが分かりにくくなることがあります。特に、横並びの要素が増えたり、親要素の中にfloatした子要素だけが入っていたりすると、意図しない表示になることがあります。
| 注意点 | 起こること | 対策 |
|---|---|---|
| 後続要素が回り込む | 下に置きたい文章が横に入る | clear: both;を使う |
| 親要素の高さがなくなるように見える | 背景色や枠線が子要素を囲まない | clearfixやoverflowを使う |
| 横幅が足りない | ボックスが次の行に落ちる | widthやmarginの合計を確認する |
| 複雑なレイアウトで管理しにくい | 修正時に崩れやすい | flexboxやgridも検討する |
floatは、仕組みを理解していれば便利ですが、ページ全体の複雑なレイアウトを作るには少し扱いにくい面があります。特に、レスポンシブデザインや複雑なカラム構成では、flexboxやgridのほうが分かりやすいことが多いです。
clearfixという考え方
floatした子要素だけを親要素の中に入れると、親要素が子要素の高さをうまく含んでいないように見えることがあります。このような問題を防ぐために使われてきた方法がclearfixです。
clearfixにはいくつかの書き方がありますが、学習の最初は、floatのあとにclear用の要素を置く方法が分かりやすいです。
.clear-float {
clear: both;
}
<div class="clear-float"></div>この指定によって、floatの影響を受ける範囲をそこで止めることができます。
実務では、疑似要素を使ったclearfixや、親要素にoverflow: hidden;を指定する方法、display: flow-root;を使う方法などもあります。ただし、まずはclearが回り込みを解除するためのCSSであることを理解しておくと、floatの基本がつかみやすくなります。
floatと現在のレイアウト手法
現在のWeb制作では、横並びのレイアウトにはflexboxやgridを使うことが多くなっています。これらは、要素の横並び、縦並び、折り返し、中央揃えなどをより分かりやすく指定できるためです。
一方で、floatが不要になったわけではありません。既存の古いサイトではfloatが使われていることがありますし、CSSの学習では、回り込みの考え方を理解するうえで重要です。
| 方法 | 特徴 |
|---|---|
| float | 要素を左右に寄せ、回り込みを作る。古いレイアウトでよく使われる |
| flexbox | 横並びや中央揃えがしやすい。現在よく使われる |
| grid | 行と列を使った大きなレイアウトに向いている |
floatは、現在の主役というよりも、CSSレイアウトの基礎知識として押さえておきたい技術です。古いコードを読むときや、floatの影響で起きるレイアウト崩れを直すときに役立ちます。
よく使うタグとCSSプロパティ
floatによる横並びを学ぶときによく出てくるタグやCSSを整理しておきます。
| タグ・CSS | 意味・用途 |
|---|---|
| div | レイアウト用の汎用ブロック要素 |
| class | 複数の要素にCSSを適用するための属性 |
| float | 要素を左または右に寄せ、回り込みを作る |
| clear | floatによる回り込みを解除する |
| width | ボックスの横幅を指定する |
| height | ボックスの高さを指定する |
| margin | 要素同士の間隔を指定する |
| border | 枠線を付ける |
| background-color | 背景色を指定する |
| text-align | 文字の横方向の配置を指定する |
| line-height | 行の高さを指定する |
floatを使うときは、floatだけを見るのではなく、width、margin、clearも合わせて確認することが大切です。横並びにならない場合は、横幅が足りているか、floatが正しく指定されているか、clearの位置が適切かを順番に見ていくと原因を探しやすくなります。
floatで横並びを学ぶときの考え方
floatは、要素を横に並べるための古くからある方法です。基本は、横並びにしたい要素にfloat: left;を指定し、それぞれの幅を決め、必要に応じてmarginで間隔を調整します。
ただし、floatは回り込みを作るCSSなので、横並びの後ろに続く要素にも影響が出ることがあります。そのため、レイアウトの区切りではclear: both;を使って、回り込みを解除することが大切です。
また、共通classと個別classを分けて使うと、CSSを整理しやすくなります。横並びにするための共通設定はitem-boxにまとめ、色や文字色などの違いはgreen-boxやblue-boxに分けるようにすると、読みやすく修正しやすいCSSになります。
現在はflexboxやgridがよく使われますが、floatの仕組みを理解しておくと、CSSレイアウトの歴史や古いコードの読み方が分かりやすくなります。floatは、横並びを作るだけでなく、回り込み、解除、要素の流れを学ぶための大切な基本です。