トップページへ戻る / タグ辞典トップに戻る / HP作成講座トップへ戻る
画像タグ
▲画像を表示する
<img src=ahiru.gif>
- <img src=画像ファイルのURL> です。
- この例は、ahiru.gifという相対パスでURLを指定していますが、http://diced.jp/~jack-pod/hp/ahiru.gifのように絶対パスでURLを指定してもよいです。
- このアヒルの画像は、Webbing Studioの素材を使用させて頂きました。
|
|
▲画像の枠の設定
<img src=ahiru.gif border=10>
<img src=ahiru.gif border=5>
<img src=ahiru.gif border=3>
<img src=ahiru.gif border=1>
- 枠の色が黒なので、背景色を白にして表示しています。
- 画像の境界線をハッキリさせたいときなどに使います。
|
|
▲画像の大きさを指定する
<img src=ahiru.gif width=100 height=100>
<img src=ahiru.gif width=100 height=50>
- widthに画像の幅、heightに画像の高さを指定します。
|
|
▲画像の周囲にマージン(余白)を入れる
<img src=ahiru.gif hspace=50 vspace=50>
- 画像の周りに余白があるのがわかります？
- hspaceに横の間隔、vspaceに縦の間隔を指定します。
|
|
▲画像にリンクを貼る
<a href=http://diced.jp/~jack-pod/><img src=http://diced.jp/~jack-pod/banner.gif border=0></a>
- 当サイトのバナー画像に当サイトのトップページへのリンクを貼っています。
- にリンクタグついての詳細はこちらから。
- boder=0と設定して置かないと、下のような枠線が出ます。出させたくない場合は、border=0を忘れずに。
|
|
▲画像が表示されない時に文字を表示する
<img srcf=a.gif alt=この画像はありません>
- a.gifという画像はないので、画像は表示されません。
- 画像の表示の有無に関わらず、カーソルを合わせたときに、文字が表示される効果もあります。
|
|
▲文字を画像に回り込ませる
<img src=ahiru.gif align=left>右側に文字が回り込んでいます。<BR>ここで文字の回りこみを中止します。<BR clear=all>
右側に文字が回り込んでいます。
ここで文字の回りこみを中止します。
<img src=ahiru.gif align=right>左側に文字が回り込んでいます。<BR>ここで文字の回りこみを中止します。<BR clear=all>
左側に文字が回り込んでいます。
ここで文字の回りこみを中止します。
<img src=ahiru.gif hspace=30 vspace=0 align=left>右側に文字が回りこんでいます。<BR>画像のマージンも設定して見やすくしています。<BR>ここで文字の回りこみを中止します。<BR clear=all>
右側に文字が回りこんでいます。
画像のマージンも設定して見やすくしています。
ここで文字の回りこみを中止します。
- alignを指定しないと、いくつもの行の回り込みはできません。
- <BR clear=all>のタグは、文字列の回り込みを中断させるタグです。
- マージンの指定については、こちらを参考にして下さい。
|
|