開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

CSSで、テキストを画像の周りに回り込みさせる方法

最終更新:2017-05-07 by Joe

CSSで。テキストを画像の周りに回り込みさせる方法です。

テキストを画像の周りに回り込みさせる方法

CSSのFloatを使うことで、すごくシンプルに回り込みを実現できます。

テキストの回り込み:HTML

<div class="section-body">
  <img class="image" src="xxxx.jpg">回り込みさせたいテキスト。CSSを使って回り込みを実現したいけど、どうしてもうまくいかないので検索してたどり着いたお。
</div>

テキストの回り込み:HTML

.image{
  float:left;
  margin-right:10px;
  margin-bottom:10px;
}

CSS, float属性と回り込みについて

CSSのfloat は、その名の通り「浮遊」させるためのスタイル属性です。

HTMLには、フロー(flow)という考え方があります。フローとは、ひとつづきの1行のテキストのイメージです。HTMLドキュメントは、この1行のテキストが水のようにページに流し込まれるようなイメージです。

Floatは、このフローから、特定の要素を「浮遊させる」役割を持っています。

img要素は、本来フロー内の1要素であり、かつdisplay:inline;がブラウザデフォルトで指定されていますので、その大きさにかかわらずフロー上の他のテキスト要素が回り込む事はありません。

一方で、Floatを指定されたimg要素は、フローから浮き上がり、抜け出します。それ以外のテキストが水のように回り込む、という寸法です。

なんだかよくわからないですね。あとでもう少し詳しく解説します。

 

 

 

 

 

閉じる