画像の周りにテキストを回り込ませる方法！HTMLとCSSの書き方を徹底解説

画像の横にテキストを配置したいと思ったことはありませんか？通常、HTMLページを作成すると、すべての要素は直線的に流れていきます。つまり、あるブロックの直後に次のブロックが続く形です。テキスト、画像、テキスト…と順番に並べていくのが基本のレイアウトです。

しかし、画像の下ではなく「隣」にテキストを表示させたいケースがあります。これを「テキストの回り込み（text wrap）」と呼びます。実は、HTMLを使えば比較的簡単にテキストを回り込ませることができ、CSSを使わなくても実装可能です。

ただし、近年のW3C（World Wide Web Consortium）は、この種のレイアウト制御にはHTML属性ではなくCSSを使用することを推奨しています。本記事では両方の方法を紹介しますが、可能であればCSSを使う方が、レスポンシブウェブデザインへの適応性が高くおすすめです。

HTMLだけでテキストを回り込ませる方法

まずは、HTMLのalign属性を使ったシンプルな方法から見ていきましょう。画像の右側にテキストを回り込ませたい場合は、画像を左寄せにします。

上の例のように、画像の右側に沿ってテキストが流れるようにするには、次のコードを記述します。

<img src="IMAGE URL" align="left" /><p>ここにテキストが入ります。</p>

逆に、テキストを左側に表示し、画像を右端に配置したい場合は、align属性を「right」に変更するだけです。

<img src="IMAGE URL" align="right" /><p>ここにテキストが入ります。</p>

これだけです。とても簡単ですね。ただし、このままではテキストと画像が密着してしまうため、余白を持たせたい場合はCSSでマージンを追加します。

marginでテキストと画像の間に余白を作る

次のようにstyle属性でCSSを指定すると、画像にマージンを追加できます。

<img src="IMAGE URL" align="left" style="margin: 0px 10px 0px 0px;" /><p>ここにテキストが入ります。</p>

このコードでは、CSSのmarginプロパティを使って、画像の右側に10ピクセルの余白を追加しています。画像を左寄せにしているため、テキストとの間隔を空けるために右側へ余白を設定しているわけです。

marginの4つの数値は、それぞれ「上・右・下・左（TOP RIGHT BOTTOM LEFT）」の順番を表しています。そのため、右寄せの画像に余白を追加したい場合は、次のように記述します。

<img src="IMAGE URL" align="right" style="margin: 0px 0px 0px 10px;" /><p>ここにテキストが入ります。</p>

HTMLだけでこのタスクを実現するのは非常に簡単ですが、繰り返しになりますが、画面幅に合わせてレイアウトが変化するレスポンシブサイトでは、思うように機能しない可能性があります。

CSSでテキストを回り込ませる方法（推奨）

より良い方法は、CSSを使ってテキストを回り込ませることです。CSSなら要素の位置決めをより細かく制御でき、モダンなコーディング標準にも適合します。

まず、imgタグにclass属性でクラス名を指定します。この例ではクラス名を「left」としました。

<img src="IMAGE URL" alt="写真" class="left" />

先ほどのHTMLの例ではimgタグ内に直接CSSを記述しましたが、本来はインラインスタイルは避けるべきです。代わりに、すべてのCSSコードをまとめて管理する「スタイルシート」と呼ばれる別ファイルを作成するのがベストプラクティスです。

スタイルシートには、次のコードを追加するだけです。

.left {
 float: left;
 padding: 0 10px 0 0;
}

このコードでは、floatプロパティを使って画像を通常のドキュメントフローから外し、親コンテナの左側に配置しています。さらにpaddingで左寄せ画像の右側に10pxの余白を加え、テキストとの間隔を確保しています。

ご覧のとおり、imgタグ自体に長いコードを書き込むよりもはるかにすっきりとした記述になります。管理も容易になり、Webページの見た目をカスタマイズするために、より多くのCSSプロパティを柔軟に活用できます。メンテナンス性やレスポンシブ対応を考えると、CSSによる回り込みが断然おすすめです。ご不明な点があれば、ぜひコメントでお知らせください。