| ■ 最も簡単な記述 |
最も簡単に記述する場合、以下の記述だけで画像は表示されます。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<IMG src="1.gif"> |
|
→ |
|
|
|
| ■ サイズを指定 |
更に、画像のサイズが分かっている場合、サイズを指定しておくと表示がスムーズになります。
widthで横幅を指定し、heightで縦幅を指定します。 |
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<IMG src="1.gif" width="72" height="62"> |
|
→ |
|
|
また、実際の大きさより大きく（又は、小さく）サイズを指定すると、拡大（又は、縮小）させて表示させる事ができます。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<IMG src="1.gif" width="100" height="30"> |
|
→ |
|
|
|
| ■ alt を指定 |
| 画像が表示されない場合に表示される代替テキスト（alt）を指定すると、画像にカーソルを合わせた際にも、文字列が表示されます。 |
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<IMG src="1.gif" alt="サンプル"> |
|
→ |
|
|
|
| ■ 画像にリンクをはる場合 |
画像にリンクをはると、画像の周りにボーダーが表示されてしまいます。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<A href="http://www.yahoo.co.jp/"><IMG
src="1.gif"></A> |
|
→ |
|
|
IMGタグに、border="0"を追加すると、この枠を表示させなくする事ができます。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<A href="http://www.yahoo.co.jp/"><IMG
src="1.gif" border="0"></A> |
|
→ |
|
|
|
| ■ 画像と前後のテキストの位置関係を調整する場合。 |
画像の前後にテキストを書くと、規定値では画像と文字は下揃になります。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
これは<IMG src="1.gif" border="0">です |
|
→ |
|
これはです |
これを調整するには、スタイルシートでvertical-align用いるとよいでしょう。
中央で揃えるには middle、上で揃えるには top、を指定します。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
これは<IMG src="1.gif" border="0"
style="vertical-align:middle;">です |
|
→ |
|
これはです |
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
これは<IMG src="1.gif" border="0"
style="vertical-align:top;">です |
|
→ |
|
これはです |
|
| ■ 文字の回りこみを調整する場合。 |
画像の後ろにそのまま文字列を入力しても、通常、1行分しか扱う事ができません。。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<IMG src="1.gif">画像の後ろに文字を打ち込んでみるとどうなるでしょう |
|
→ |
|
画像の後ろに文字を打ち込んでみるとどうなるでしょう。 |
IMGタグに、 align="left"を追加すると、文字列を左に回り込ませて書き込むことができます。
（align="right" とすれば、右に回り込ませる事ができます。）
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<IMG src="1.gif" align="left">画像の後ろに文字を打ち込んでみるとどうなるでしょう |
|
→ |
|
画像の後ろに文字を打ち込んでみるとどうなるでしょう。 |
align="right" とすれば、右に回り込ませる事ができます。
|
|
|
|
|
|
|
タグの記述 |
|
|
|
ホームページでの表示 |
|
|
|
|
|
|
|
<IMG src="1.gif" align="right">画像の後ろに文字を打ち込んでみるとどうなるでしょう |
|
→ |
|
画像の後ろに文字を打ち込んでみるとどうなるでしょう。 |
|
|