画像の横に文字

*** 画像の横に文字を入れる ***

昨日は使えないタグを書いてしまったので(^^ゞ
今日は使えるのを紹介しますネ♪(笑)
通常、画像を入れると、次の画像・文字は改行されてしまい、
横に並べる事が出来ませんが、このタグを使う事で、
画像と文字を組み合わせて並べる事が出来ます。。。

<img src="~.***">これが画像を指定するタグですが、この中に下記のタグを入れて 変更してみましょう!

align="top" 画像の横(上)
align="middle" 画像の横(中央)
align="bottom" 画像の横(下)

上記の『画像の横(下)』をタグに直してみると、
<img src="~.***"align="bottom">★画像の横下に入れる文字★
…で、これを見てみるとこうなります。

★画像の横下に入れる文字★

わかるかな?(^_^;)


次は、画像の位置を変えてみましょう。。。
お分かりのように、普通に文字を入れた場合、
文字は右側に入りますが、この文字を左に移し 画像を右側にするタグです。。。

この場合のタグも同じく『align=』を使いますが、
通常と違う所は、画像からはみ出た文字は 自然に下へと流れる仕組みです。
解りにくいので、見てみましょう。。。(^^ゞ

画像を右に設定したタグで、align="right"と入れます。
同じ様に、align="left"と入れると、画像は通常の左です。
ここの文が長い(横幅一杯)の時は、文字が画像の下に流れますが、
中央寄せ(center)に指定しているのでダメですネ★(^^ゞ


わかったかな?!(^_^;)



© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: