CSSのfloat（フロート）とは？使い方を実例付きでわかりやすく解説

Webページをデザインしていると、特定の要素をページ上の決まった位置に表示したい場面があります。たとえば、「画像を含むボックスをページの右側に配置したい」といったケースです。

CSSでは、floatプロパティを使うことで要素の配置方法を指定できます。floatを利用すれば、要素をWebページの左側や右側に配置することが可能です。

この記事では、実際のコード例を交えながら、CSSのfloatプロパティを使ってWebページ上の要素を配置する方法を詳しく解説します。読み終える頃には、floatを使いこなして要素を自由に配置できるようになっているでしょう。

CSSのfloatプロパティとは

floatプロパティは、要素をWebページの左側または右側に配置するために使用します。たとえば、画像をテキストの右側に配置し、テキストを画像の周囲に回り込ませるといったレイアウトが簡単に実現できます。

なお、floatプロパティは「ボックスを生成する要素」かつ「絶対配置（absolute）されていない要素」にのみ適用されます。絶対配置された要素とは、static以外のposition値を持つ最初の親要素を基準として配置される要素のことです。

floatプロパティでよく使われる主な値は次の4つです。

• left：要素をコンテナの左側に浮動させます
• right：要素をコンテナの右側に浮動させます
• none：floatを適用しません（初期値）
• inherit：親要素のfloatプロパティの値を引き継ぎます

floatプロパティの最も代表的な用途は、画像の周りにテキストを回り込ませるレイアウトです。

CSS floatの実例

ここでは、地元の天体観測サークル「Stargazer Blazers」のWebサイトを制作すると仮定してみましょう。クラブからは「団体の歴史を紹介するページがほしい。クラブの簡単な説明文と、星の画像をページの左側に配置したい」という要望が寄せられています。

floatプロパティを使えば、この要望に応えたページを作成できます。まずは、floatを一切適用していない基本のコードから見てみましょう。

index.html

<div>
<p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" />2017年に設立されたStargazer Blazersは、カリフォルニア州サンフランシスコでの星空観測を目的とした団体です。ベイエリアで出会った2人の熱心な天文愛好家、ジェフ・ホームズとポーラ・イングルソンが「同じ趣味を持つ仲間を探したい」という思いから創設しました。現在ではベイエリアに200人以上のメンバーを擁し、毎月集まって星空を観測し、それぞれの発見について語り合っています。
</p>
</div>

このコードをブラウザで表示すると、次のようになります。

ご覧のとおり、画像がテキストの前に表示され、ページ全体の見た目があまり美しくありません。しかし、floatプロパティを使えば、画像をテキストの横にきれいに配置できます。

続いて、画像をテキストの右側に配置するコードを見てみましょう（こちらが天体観測サークルからの要望だったとします）。

styles.css

img {
	float: right;
}

表示結果：

コードの内容を分解してみましょう。まずHTMLファイルでは、<div>タグの中にページの内容を記述しています。その中で<p>タグを使って、Stargazer Blazersの歴史に関する説明文を作成しました。さらに<p>タグの中には、200×200サイズの星の画像も含めています。

一方、スタイルを定義するstyles.cssファイルでは、「float: right;」を指定することで、画像をテキストの右側に浮動させています。上記の例のように、画像がテキストの右側に配置されました。floatを指定しない場合、画像はテキストの前に表示されるのがデフォルトの挙動です。

今度は、天体観測サークルから「画像をテキストの左側に配置してほしい」という要望が来たとしましょう。その場合は、次のようなコードで対応できます。

styles.css

img {
	float: left;
	margin-right: 20px;
}

表示結果：

この例では、画像をテキストの左側に浮動させています。あわせて「margin-right: 20px;」を指定することで、画像とテキストの間に20pxの余白を設けています。

floatで作るボックスのグリッドレイアウト

floatプロパティを使うと、複数のコンテンツボックスを横並びに配置することもできます。

たとえば、天体観測サークルが「入会すると見られる星空を紹介する3枚の画像を、横一列に並べて表示したい」と考えたとしましょう。

この場合、次のようなコードで実現できます。

index.html

<div>
<img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" />
</div>

styles.css

* { box-sizing: border-box; }

.image {
	float: left;
	width: 25%;
	padding: 25px;
}

表示結果：

コードの内容を確認していきましょう。HTMLファイルには、3つの画像（<img>タグ）を格納した<div>タグがあります。各画像は200×200ピクセルで、それぞれ異なる星空の画像にリンクしており、すべてに「image」というクラスが割り当てられています。

styles.cssファイルでは、次のスタイルを適用しています。

• box-sizing: border-box;：すべての要素に適用し、paddingやborderを要素の幅と高さに含めます。これにより、意図しない余白なく要素をぴったり横並びに配置できます。
• float: left;：画像を横並びに表示します。
• width: 25%;：各画像がWebページ幅の25%を占めるようにします。
• padding: 25px;：画像同士の間に25pxの余白を作ります。

まとめ

CSSのfloatプロパティは、要素をコンテナの左側または右側に配置するためのものです。floatを指定した要素の周囲には、テキストなどの他の要素が自然に回り込みます。

この記事では、具体例を通じて、CSSのfloatプロパティを使って要素を左右に配置する方法を解説しました。さっそく、あなたのWeb制作でもfloatを活用してみましょう！