楽天広場HTML講座画像の効果的な張り方（補足）

2006.10.26

・画像を効果的にはる

■ 画像のはりかた

前回までは、文字をカスタマイズする方法を学びました。
今回からは、新しく画像をはる方法について学んでいきます。

画像をはるタグは<img src=""> です。

「=""」の間には、画像を保管してある場所の住所、つまり画像のＵＲＬをいれます。

これを「<img src="">」の「=""」の間にいれてあげれば、
画像をはることができるのです。

楽天広場の場合は、さきに「画像倉庫」に画像を保存することで、
自分のブログに画像をはることができます。
画像倉庫について詳しくはこちらを参照してください

■ 画像に文字を回りこませる

次の例をみてください。

<img src="～jpg">位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできません。alignは非常に役に立ちます。

位置を指定しないで文字を書くと、
このように画像の回りにいくつも
段落を表示する事はできません。
alignは非常に役に立ちます。

このように画像につづいて文章を書くと、
画像の下に文章が回りこむことがあって、困っちゃうことよくあります。

文章を画像のヨコにキレイにもってくるには、どうしたらいいのでしょう。

ここで、またまた「align」属性をつかってみましょう。
今回は、属性値に「left」か「right」を入れてみます。

<IMG SRC="～.jpg" align="left">このように画像の回りにいくつも段落を表示する事はできます。alignは非常に役に立ちます。

↓

このように画像の回りにいくつも
段落を表示する事はできます。
alignは非常に役に立ちます。

このように画像の左右に文章を回り込ませることができました。
もし、文章の量が画像の高さに収まらないときは、画像の下にはみでます。

逆に回りこみを強制的に解除したいときは、「br clear=""」をつかいます。
「=""」には、画像の位置を左にしたときは「left」、右になら「right」
「all」をいれると画像がどちらにあっても、回り込みが解除されます。
これで、「br clear=""」以下の文字が画像より下にくるのです。

「<IMG SRC="～.jpg" align="right">位置を指定しないで文字を書くと、
このように画像の回りにいくつも段落を表示する事はできます。<br clear="left">alignは非常に役に立ちます。」

位置を指定しないで文字を書くと、
このように画像の回りにいくつも段落を表示する事はできます。

alignは非常に役に立ちます。

alignは、left、center、rightで指定できます。

次回は、画像の縦横にスペースを空けるです！

[トップページへ戻る]

[次のページ⇒]

お気に入りの記事を「いいね！」で応援しよう

Last updated 2008.11.19 10:14:58

[HTML文字画像リンク] カテゴリの最新記事