【6日でできるHTML＆CSS入門】回り込みの設定

Webページのレイアウトでは、テキストや画像、ボックス要素を「横並び」にしたい場面がよくあります。
このとき、昔から使われてきた方法が「回り込み（float）」の設定です。
　floatプロパティを使うことで、通常は縦方向に積み重なる要素を横方向に並べたり、テキストを画像の脇に回り込ませたりできます。
本記事では、回り込みの基本とfloatプロパティの使い方、そして応用例や注意点まで、具体例とともにわかりやすく解説します。

１．回り込み（float）の基本

1.1. floatプロパティとは

　floatプロパティは、要素を文書の左側や右側に寄せて、他の要素をその脇に回り込ませるためのCSSプロパティです。
この「回り込み」を活用すると、レイアウトの幅が大きく広がります。

値	効果
left	要素を左寄せにし、右側に他の要素が回り込む。
right	要素を右寄せにし、左側に他の要素が回り込む。
none	回り込みを解除（デフォルト値）

1.2. floatを使った横並びレイアウトのサンプル

ファイル名： lesson33_1.html

<!DOCTYPE html>
<html>
<head>
  <title>回り込みの設定サンプル</title>
  <meta charset="utf-8"/>
  <style>
    .box {
      float: left;
      width: 140px;
      height: 100px;
      margin-right: 18px;
      border: 3px solid #e57373;
      font-size: 1.1em;
      line-height: 100px;
      text-align: center;
      background-color: #fff9c4;
    }
    .box2 {
      background-color: #c8e6c9;
      color: #388e3c;
    }
    .box3 {
      background-color: #b3e5fc;
      color: #1976d2;
    }
    .clearfix {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box">ボックス1</div>
  <div class="box box2">ボックス2</div>
  <div class="box box3">ボックス3</div>
  <div class="clearfix"></div>
</body>
</html>

表示結果

「ボックス1」「ボックス2」「ボックス3」が左から横一列に並びます。

２．floatの詳細な使い方とプロパティ解説

2.1. floatプロパティの値

値	動作内容	主な用途
left	左側に寄せて回り込み	横並び・画像の左回り込み
right	右側に寄せて回り込み	右側カラム等
none	回り込みを解除（初期値）	通常のレイアウト

使用例

.box { float: left; }

2.2. 共通スタイルと個別スタイルの分割

floatで横並びにしたい複数の要素に、共通スタイルと個別スタイルを分けて設定できます。

/* 共通の横並び用スタイル */
.box { float: left; width: 120px; ... }

/* 個別スタイル */
.box2 { background: #c8e6c9; }
.box3 { background: #b3e5fc; }

実際のHTML例

<div class="box">A</div>
<div class="box box2">B</div>
<div class="box box3">C</div>

３．float利用時の注意点と応用

3.1. floatの解除（clearfix）

floatを使うと、その下に続く要素が回り込んでしまうことがあります。
これを防ぐには、「clear」や「clearfix」テクニックがよく使われます。

clearfixの例

これで、回り込みの影響を受けずに下の要素が通常通り表示されます。

.clearfix { clear: both; }

<div class="clearfix"></div>

3.2. floatのデメリットと現代の代替手法

floatは便利ですが、レイアウトが複雑になると思わぬ崩れやメンテナンスの難しさが生まれます。
　最近は、flexboxやgridによる横並びが主流になっていますが、floatの動作は今でもよく出題される基礎知識です。

４．よく使うタグ・CSSプロパティ一覧

タグ・プロパティ	意味・用途
`<div>`	ブロック要素（グループ化・レイアウト用）
`float`	回り込み設定。left/right/none
`width`, `height`	ボックスのサイズ指定
`margin`	要素同士の間隔
`border`	枠線
`background-color`	背景色
`clear`	回り込み解除

まとめ

floatによる回り込み設定は、要素を横並びや回り込みに配置したい場合に有効なCSSの基本テクニックです。
共通部分と個別部分をうまくCSSで分割し、clearfixで回り込みを解除することも大切なポイントです。
現在はflexboxやgridのほうが主流ですが、floatの動作と特徴はWeb制作の基礎知識として必ず押さえておきたい内容です。