スポンサーサイト

スポンサー広告 | --.--.--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像 の横に 文字 ・ 文章 を表示する 方法

[ カスタマイズ ] HTML タグ の 基本 | 2009.04.20

画像などを使うことはありますか?
文字もいいですが、やはり画像を載せることにより、
よりわかりやすくなったり見やすくなったりしますよねっ。

そこで今回は
画像の横に文字を表示させる方法をご紹介したいと思います。

「align="left"」 と 「<br clear="all" />」 を 挿入


画像を表示させる時には、下のようになってますよねっ。

<img src="http://●●●●●.jpg" alt="画像の説明文" />


この画像の横に文字や文章を表示させるには
2つのものを挿入する必要があるのです。
それが「align="left"」と「<br clear="all" />」です。
では挿入してみましょう。

<img src="http://●●●●●.jpg" alt="画像の説明文" align="left" />横に表示させたい文字・文章<br clear="all" />

( 例 )
横に表示させたい文字・文章



このようにすることによって
画像の右側に文字や文章を表示することができます。
ちなみに、「align="left"」の
「left」を「right」に変えることによって、
画像の右側でなく左側に文字や文章を表示することができます。

「hspace="数値"」 で画像と文章の 間隔 を空ける


画像の横に文章や文字を表示することができましたねっ。
でもこれだと画像と文章が引っ付いてしまっているので、
hspace="数値"」を挿入して、
画像と文章の間隔を少し空けてあげましょう。
ということで実際にやってみましょう。

<img src="http://●●●●●.jpg" alt="画像の説明文" align="left" hspace="20" />横に表示させたい文字・文章<br clear="all" />

( 例 )

横に表示させたい文字・文章



数値は「20」でやってみました。
これで画像と文章の間隔が空いて見やすくなります。
今回は数値を「20」でやりましたが、
hspace="数値"」の中の数値を大きくすればするほど、
画像と文章の間隔が広くなります。

ということで

今回は画像の横に文字や文章を表示させる方法を
ご紹介させていただきました。
この方法を使うことによって、
画像を使った記事の製作に幅ができると思います。
ぜひみなさんの記事製作にお役立てください。

関連記事


 ≫ 画像 の サイズ の 変更 方法
関連記事
人気ブログランキング この記事がお役に立てましたら1クリックお願いします

HTMLの文法をチェックして点数も出る「Another HTML-lint gateway」 | クローラー は 4階層 (3クリック) まで









管理者にだけ表示を許可する
|
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。