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

　Webページ上で画像やテキストを組み合わせた自由なレイアウトを実現するうえで、要素を左右に寄せて文章をその周りに回り込ませる「回り込み」の仕組みは欠かせません。CSSのfloatプロパティを使うと、対象の要素を左寄せまたは右寄せに配置し、その後に続く要素を自動的に回り込ませることができます。また、clearプロパティを併用することで、回り込みを解除してレイアウトの流れを制御できます。
　ここではまず、回り込みを行う手順やHTML構造上の注意点を押さえ、float／clearの基本的な使い方を例示します。続いて、回り込みを活かした段組みやグリッド風レイアウトの作り方、代表的なパターンとその実装例を紹介します。

１．回り込みの基本

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

wraparound-css ダウンロード

1.1. `float`プロパティの指定

回り込みを行うには、要素に float プロパティを指定します。値には以下のいずれかを使います。

値	意味
left	要素を左寄せし、右側に回り込ませる
right	要素を右寄せし、左側に回り込ませる
none	回り込みを行わない（初期値）

指定例（画像を左寄せ）

<style>
  img.float-left {
    float: left;
    margin-right: 12px; /* 回り込みとの隙間を確保 */
  }
</style>

<body>
  <h1>🏞️川辺の風景</h1>
  <p>
    <img class="float-left" src="river.jpg" alt="川辺に立つ一本の木">
    ここは穏やかな流れが続く川辺の散策路です。四季折々の風景が楽しめるほか、野鳥の観察スポットとしても人気があります。川面に映る木々の緑が美しい光景を生み出します。
  </p>
</body>

実際には画像が左寄せされ、文章がその右側に回り込んで表示されます。

1.2. 回り込み後の余白調整（`margin`）

回り込みをすると、要素同士がくっつきやすくなるので、margin で適切な余白を確保します。

プロパティ	意味
margin-right	右側の余白を指定
margin-left	左側の余白を指定
margin-top/bottom	上下の余白を指定

例：画像を右寄せし、左に余白を付ける

<style>
  img.float-right {
    float: right;
    margin-left: 10px;
  }
</style>

<p>
  <img class="float-right" src="forest.jpg" alt="森の小道">
  朝日に照らされた森の小道は、静かな雰囲気の中にも生命力を感じさせます。木漏れ日が落ち葉を照らし、足元に小さな花が咲き乱れる様子は、まさに自然の芸術です。
</p>

1.3. 画像だけでなくブロック要素にも適用

　float は div や section などのブロックレベル要素にも使えます。幅を指定して横並びのレイアウトを組むときなどに有効です。

<style>
  section.card {
    float: left;
    width: 200px;
    margin-right: 20px;
    padding: 10px;
    border: solid 1px #666;
  }
</style>

<body>
  <section class="card">
    <h2>スポットA</h2>
    <p>静かな湖畔のリゾート地。カヌー体験が人気。</p>
  </section>
  <section class="card">
    <h2>スポットB</h2>
    <p>高原のパノラマを楽しめる展望台。星空観測に最適。</p>
  </section>
  <section class="card" style="clear: both;">
    <h2>スポットC</h2>
    <p>森の中にひっそり佇む温泉宿。日帰り入浴も可能。</p>
  </section>
</body>

２．回り込みの解除

2.1. `clear`プロパティの指定

回り込みした要素をまたいで、次の要素を通常の流れに戻すには clear を使います。

値	意味
left	左寄せされた要素の回り込みを解除
right	右寄せされた要素の回り込みを解除
both	両側の回り込みを解除
none	回り込み解除なし（初期値）

例：両側の回り込みを解除

<style>
  h2 {
    clear: both; /* すべてのfloatを解除 */
  }
</style>

<h2>回り込み以降の見出し</h2>
<p>ここからは回り込みと無関係に表示されます。</p>

2.2. 空要素を使った解除方法

　HTMLに改行要素を使わず、<div style="clear: both;"></div> のようにダミー要素を挿入して解除する方法もあります。

<p><img class="float-left" src="lake.jpg" alt="湖畔の風景">湖畔の説明...</p>
<div style="clear: both;"></div>
<h2>次のセクション</h2>

３．回り込みを使ったレイアウトパターン

3.1. テキストと画像の段組み

テキストの中に画像を回り込ませる典型的なパターンです。

ファイル名： lesson18-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🏖️ビーチの紹介</title>
<style>
  img.beach {
    float: left;
    margin: 0 12px 12px 0;
    width: 150px;
  }
</style>
</head>
<body>
  <h1>美しいビーチ</h1>
  <p>
    <img class="beach" src="beach.png" alt="白い砂浜">
    このビーチは白い砂浜と透明度の高い海が自慢です。夏には多くの観光客で賑わいますが、朝夕の時間帯は静かで、のんびり散策するのに最適です。
  </p>
</body>
</html>

ブラウザの出力例

3.2. 複数要素の横並び

　float:left を複数要素に指定し、clear:both で後続を流すことで簡単なグリッド風レイアウトを実現できます。

ファイル名： lesson18-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📦商品一覧</title>
<style>
  .item {
    float: left;
    width: 30%;
    margin: 1%;
    padding: 10px;
    border: solid 1px #ccc;
  }
  /* グリッドの後に必ずクリア */
  .clearfix { clear: both; }
</style>
</head>
<body>
  <div class="item">商品Aの説明文</div>
  <div class="item">商品Bの説明文</div>
  <div class="item">商品Cの説明文</div>
  <div class="clearfix"></div>
  <h2>他のカテゴリー</h2>
</body>
</html>

ブラウザの出力例

まとめ

float で要素を左右に寄せ、後続要素を回り込ませる
margin で回り込み時の隙間を調整する
clear で回り込みを解除し、レイアウトを制御する
複数要素に float を指定することで横並びレイアウトも実現可能

タグまとめ

タグ	用途
<img>	画像を表示し、`float` と組み合わせて回り込み対象に
<p>	段落を示すブロック要素。回り込む／回り込まれる領域に利用
<div>	浮動レイアウト後のクリアやグループ化に利用
<style>	CSSを埋め込む要素

　この記事で身につけた float／clear のテクニックを応用すると、本文中への画像の回り込みはもちろん、カード型のレイアウトやギャラリー、メディアオブジェクトなど、さまざまなコンポーネントを作れるようになります。

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