ホームページ作成講座 -入門編-第9講

第9講では、画像の表示方法について解説します。 第8講をまだお読みでない方は、先に第8講をお読みください。

スポンサーリンク

画像を表示しよう

タケシ サトシ ずいぶんとホームページらしくなってきたな
サトシ うん!
でも何か物足りない気がするんだよな・・・
タケシ それは画像がないからじゃないか?
サトシ 画像を載せる事も出来るのか?
タケシ もちろんだ 「imgタグ」を用いるんだ
オレのホームページなんて これがないと やっていけないからな

画像を表示させるには「imgタグ」を用います。 ここでは練習なので第6講で用いた「back.gif」を表示させてみます。

<html><body>
<img src="./back.gif" width="32" height="32">
</body></html>

<img src="***" width="***" height="***">の形で表記します。「属性」の順番は自由です。「終了タグ」はありません。 「src属性」には「src="***"」という形で「***」には画像ファイルへのパスを、「相対パス」または「絶対パス」で設定します。 「width属性」には「width="***"」という形で「***」には画像の横のサイズをピクセルで設定します。 「height属性」には「height="***"」という形で「***」には画像の縦のサイズをピクセルで設定します。 「width属性」「height属性」は共に「"(半角ダブルクォーテーション)」の省略が可能です。また、「属性」自体の省略も可能です。 実行すると、次のようになります。

「width属性」「height属性」は、実際のサイズと異なる数値を設定すると、自動的に拡大縮小表示されます。

<html><body>
<img src="./back.gif" width=64 height=16>
</body></html>

「width属性」「height属性」は、パーセンテージで設定する事も可能です。 パーセンテージで指定する場合は、「"(半角ダブルクォーテーション)」は省略できません。 次の例は、上の例と同じ結果になります。

<html><body>
<img src="./back.gif" width="200%" height="50%">
</body></html>


サトシ よし 出来たぜ!
タケシ どれどれ・・・  ってなんだコレ!!
サトシ へへ  タケシの寝相 前に撮っちゃった
ヨダレ垂らしちゃって だらしないぜー  プッ
タケシ コラァァァ 肖像権の侵害だぞ!!

ホームページは例え家族や友人にだけにアドレスを教えていても、全世界の人に見られてしまう可能性があります。 他人を写した写真などを勝手に公開する行為は「肖像権」の侵害に当たり、違法となりますので十分に注意しましょう。 また、画像などの全ての創造物には存在と同時に「著作権」が生じます。 自分が著作権を有していない物を許可なしにホームページに載せる行為も違法となる可能性がありますので気をつけましょう。 逆に言えば、あなたが描いた絵にも必然的に著作権が生じます。他者に勝手に利用された場合は訴えることが出来ます。


サトシ ふーん・・・ そうなのか・・・ 気をつけなくちゃな
タケシ 全くいい迷惑だ
サトシ そう言うタケシのホームページは もっとヤバくないか?
何だこの 「ハナダ三姉妹の写真はこちら」 って・・・
タケシ うわぁぁぁ  見るな!  いいの!  オレは!
それより「imgタグ」には他に「alt属性」や「border属性」等 色々あるぞ
サトシ 話そらすなよ・・・

何だかのトラブルで画像が表示できない場合や、読み込みが完了するまでに代わりに文章を表示させたい場合は「alt属性」で指定します。

<html><body><img src="./none.gif" alt="テストです"></body></html>

「alt="***"」という形で、「***」には表示させる文章を設定します。 上記例では、「none.gif」という画像ファイルは存在しないため、代わりに文章が表示されます。

テストです

問題なく表示された場合にも、「alt属性」が設定してある場合は、画像上にマウスポインタを合わせて数秒すると設定した文章が表示されます。 なお、「alt属性」は必ず設定するよう推奨されています。

<html><body><img src="./back.gif" alt="テストです"></body></html>

テストです

画像の周りに枠線を付けたい場合は「border属性」を設定します。

<html><body><img src="./back.gif" alt="テストです" border="1"></body></html>

「border="***"」という形で、「***」には枠線の太さを数値で設定します。 「"(半角ダブルクォーテーション)」は省略可能です。

テストです

「border="***"」という形で、「***」には枠線の太さを数値で設定します。 「"(半角ダブルクォーテーション)」は省略可能です。 「border属性」を設定していない場合は基本的に「border="0"」として扱われますが、「aタグ」を使用すると枠線が勝手に生じてしまいます。 画像でリンクしたい場合は「border="0"」としましょう。

<html><body><a href="#t1"><img src="./back.gif" alt="テストです" border=0></a></body></html>

テストです


サトシ 画像でもリンクできたんだ!
タケシ 画像を使えばカッコイイホームページが作れるけど 調子に乗って画像を使いすぎると 読み込みに時間がかかったりして 「悪いホームページ」になってしまうぞ
サトシ そうか・・・  色々気をつけないといけないんだな・・・

第10講:テーブルを作ろうへ続く

まとめ

  • 画像を表示させるには「imgタグ」を用いる
  • 「imgタグ」の「src属性」には、表示させる画像ファイルまでのパスを設定する
  • 「imgタグ」の「width属性」「height属性」には、それぞれ画像の横と縦のサイズをピクセル、もしくはパーセンテージで設定する
  • 「imgタグ」の「alt属性」には、表示できない時に代わりに表示させる文章を設定する
  • 「imgタグ」の「border属性」には、画像の枠線の太さを数値で設定する

スポンサーリンク