<img> 画像

画像を表示する、img要素

師匠

HTMLが普及した要因の一つが、画像を簡単に共有できることや。
画像を表示する<img>要素は、ハイパーリンクの<a>要素と同様、 HTMLの革新的な発明 やと思うわ。

弟子

そうですかねー。

師匠

そうなんや。
今でこそ、動画やら 何やら いろんな機能があるけど、昔は 画像を共有できるだけで、ものすごいことやったんやで。

弟子

(昔話をするのは、年寄り。)

師匠

下が、<img>要素の基本的な使い方や。

<img src="sample.jpg">
弟子

カッコいい写真ですね。

師匠

そうやろ~。
ええ写真やろ。
これは、 おフランスモン・サン=ミシェル や。
だれでも そこに行けば、こんな ステキな写真 を撮れるわけやないでー。
まー、写真は やからな。

弟子

(ただの自慢やん。。。)

師匠

<img>要素には、 src 属性が必須や。
src 属性 は、JPGとかの 画像ファイルの場所(パス)を指定する。

師匠

src 属性を、"sample.jpg"にした場合、作ったHTMLファイルと同じフォルダに sample.jpg を保存しとく。

弟子

それにしても、いい写真ですねー!

師匠

そうやろ、そうやろ。

img要素の注意点(2点)

終了タグが無い

師匠

まず、<img>要素には終了タグが無いんや。

弟子

あっ、ほんとだ。

師匠

なぜ 無いかというと、必要が無いから。
<p>とか<a>とかは、挟むものがあったわけや。
でも、画像の場合、 src に画像ファイルのパスを設定したら、もう何も挟むものが無い。
よって、無いんや。

弟子

ふーん。

src と href を混同しない

師匠

<a>要素の場合、リンク先は href 属性に指定した。

師匠

一方、<img>要素の場合、画像のリンク元は src 属性に指定する。

師匠

使い方が似ているけど、指定を間違えると動かないから、ちゃんと覚えとけ。

(実験)複数 並べた場合

師匠

前のページでやったみたいに、<img>を3つ並べてみるで。

<img src="sample.jpg">
<img src="sample.jpg">
<img src="sample.jpg">
弟子

縦ですか?

師匠

画像が大きすぎて 分かりにくいから、小さい画像に換えよう。

<img src="small.jpg">
<img src="small.jpg">
<img src="small.jpg">
弟子

横ですね。

復習

  • <img src="sample.jpg">
  • <img>要素に、終了タグは無い