ミギムキ

[CSS] テキストを画像に回り込ませて表示したい

サンプルコード

html

<div class="wrap_around"> <div class="wrap_around_image"> <img src="./images/sample.jpg" alt="サンプル画像"> </div> <p>猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー</p> </div>
スポンサー広告

CSS

.wrap_around_image { margin: 0px 0px 1em; } @media print, (min-width: 768px) { .wrap_around:after { display: block; clear: both; content: ""; } .wrap_around_image { float: left; margin: 0px 1em 1em 0px; max-width: 50%; } }
  • 画像に対して「float: left;」を指定することで、画像を左寄せで配置しつつ、他の要素が画像に対してぐるりと回り込むようにできます
  • 画像の周りには一文字分の余白をつけて、画像と文章がくっついてしまわないようにします
  • 画像が大きすぎると不格好になってしまうので、表示領域の最大サイズを50%にしてバランスを取っています
  • 文章量が少なくテキストが回り込まなかった場合、floatを指定したままだと続く要素も回り込んでしまいます。この対策のために、「wrap_around」クラスのafter疑似要素内でfloatの解除を行っています

画像を右寄せで置きたい場合

.wrap_around_image { margin: 0px 0px 1em; } @media print, (min-width: 768px) { .wrap_around:after { display: block; clear: both; content: ""; } .wrap_around_image { float: right; margin: 0px 0px 1em 1em; max-width: 50%; } }
スポンサー広告