こんにちは。
皆さん、HTMLでWebサイトのデザインをする上で、画像に対するテキストの回り込みなどに困ったことはありませんか？
これは、画像などを画面の左側（もしくは右側）に表示して、文字をそれに対して回り込ませるという技です。
ブログ等でも、使用されますよね。
画像を貼った上でそれについての説明をする、などといったことが主な使われ方だと思いますが、 それ以外 にも使う場面はあるとおもいます。
例えば、こんな感じです。
今から、約666億年前、無の世界の一部に、極めて微小な空間があった。その空間は、プロクルス テスと呼 ばれ、科学技術が発達した都市を持つ惑星が、多く存在していた。
※ちなみにクリックすると、Youtubeの動画ページへ飛びます。
画像を右側に表示させ、文字を左側に設置しています。
そして、文字が画像を回り込むようになっています。
もし、順番を間違えると、このようになってしまいます。
今から、約666億年前、無の世界の一部に、極めて微小な空間があった。その空間は、プロクルス テスと呼 ばれ、科学技術が発達した都市を持つ惑星が、多く存在していた。
※こちらもクリックすると、Youtubeの動画ページへ飛びます。
これだと、ちゃんと回り込みができていないですよね。
困りましたね。
とは言っても簡単です。
ただ単に、画像と文字列の順番を逆にすればいいのです。
画像の回り込みをする際、HTMLコードでは、
回り込みの対象である画像
⇩
回り込みをするテキストなど
という順番で記述することになります。
それだけの話。
簡単でしょ。
まとめ
HTMLで、画像に対して文字などの回り込みをしたいときは、順番に注意する。
回り込まれる側が先で、回り込む側が後。
要するにこういうことです。
<div>
<img style="float: right;" src="画像のパス">
<p>これは、回り込ませるテキストです。</p>
</div>
これが、正しいコード。
「float: right;」というのは、画像をどちら側に表示するかという設定です。
今回は右側にしたかったので、rightとしていますが、左側に表示したい場合は、leftと設定しましょう。
いちおう、ここで、間違ったコードも載せておきます。
<div>
<p>これは、回り込ませるテキストです。</p>
<img style="float: right;" src="画像のパス">
</div>
以上で終わります。
さようなら。
また次回、お会いしましょう。
