HTMLで画像を左右に回り込ませる方法｜CSSのfloatプロパティ徹底解説
HTMLで画像を浮かせてテキストを回り込ませたい場合は、CSSのfloatプロパティを使用します。このプロパティを指定すると、画像をページの左または右に配置でき、後続のテキストがその周囲に自然に流れ込むようになります。
floatプロパティの主な値
floatプロパティに設定できる主な値は以下の通りです。
| 番号 | プロパティ値と説明 |
|---|---|
| 1 | none 回り込みを指定しない（浮かせない） |
| 2 | left 要素を左側に浮かせる |
| 3 | right 要素を右側に浮かせる |
| 4 | initial デフォルト値を適用する |
サンプルコード
以下のコードを実行すると、HTMLでのフローティング画像の動作を実際に確認できます。float:right と float:left それぞれの使い方を示しています。
<!DOCTYPE html> <html> <head> <title>HTML フローティング画像</title> </head> <body> <h1>右に回り込み（float: right）</h1> <p>下の画像は右側に浮いています。</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" /> これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 </p> <h1>左に回り込み（float: left）</h1> <p>下の画像は左側に浮いています。</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" /> これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 これはデモ用のテキストです。これはデモ用のテキストです。 </p> </body> </html>
表示結果
上記のコードをブラウザで開くと、float:right を指定した画像は右側に、float:left を指定した画像は左側に配置され、それぞれの周囲にテキストが回り込んで表示されます。
補足：回り込みの解除について
floatを使用した後は、レイアウト崩れを防ぐためにclearプロパティで回り込みを解除するのが一般的です。たとえば、clear: both; を指定した要素をfloat要素の後に配置すると、以降のコンテンツが通常の位置から表示されるようになります。また、近年のWeb制作ではFlexboxやGridレイアウトも広く使われていますが、「画像の横にテキストを回り込ませる」という用途においては、floatは今でもシンプルで有効な手法です。
-
HTMLで画像をリンクとして使用する方法
HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。基本的な書き方構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画
-
HTMLページでアニメーション画像（GIF）を表示する方法をわかりやすく解説
HTMLにおけるアニメーション画像とは、Webページ上で動きのある画像のことです。一般的にはGIF（Graphics Interchange Format／グラフィックス・インターチェンジ・フォーマット）形式のファイルが使用されます。GIFは特別なプラグインやJavaScriptなしでもブラウザ上で自動的に再生されるため、手軽に動きのあるコンテンツを表現できるのが魅力です。 HTMLでアニメーション画像を追加するのはとても簡単です。<img>タグにsrc属性を組み合わせて使用します。src属性には、表示したいGIF画像のURLを指定します。 さらに、height属性とwidth属