画像を埋め込む要素 0:15

HTMLで画像を表示する際は、img要素を使います。画像ファイルは、src属性を使って参照します。

画像を表示したいところに、
img要素を記述。 0: 40

img（イメージ）要素はimage（イメージ）の略でHTML文章内に画像を埋め込みます。このimg要素は、空要素で、src（ソース）属性を用いて画像を参照します。

カテゴリ

• フロー・コンテンツ
• フレージング・コンテンツ
• エンベッディッド・コンテンツ

コンテンツ・モデル

空要素

主な属性

• src属性： 参照する画像ファイルのパスを指定する属性
• alt属性： 画像の代替えテキストを指定する属性
• width属性： 画像の横幅を指定する属性
• height属性： 画像の高さを指定する属性

img要素の基本的な使い方

img要素は、参照する画像ファイルのパスを、src（ソース）属性を使って指定します。なお、何らかの原因で画像が表示できない場合があるので、alt（オルト ）属性を使って画像の代替えテキストを指定しておくようにしましょう。

<img src="表示したい画像ファイルまでのパス" alt="代替テキスト">

img要素のサンプル

<p><img src="images/logo-dummy.png" alt="架空の株式会社 Dummy"></p>

もし、何らかの原因で画像が表示されない場合は、alt属性の値が表示されます。下記は、src属性で指定した参照先に画像ファイルが存在しなかった場合の例です。

<p><img src="img/logo-dummy.png" alt="架空の株式会社 Dummy"></p>

画像を表示してみよう 4: 55

それでは、img要素を使って画像を挿入してみましょう。

1. 「Chapter14」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考に、img要素をマークアップ

<h1>バナーができた</h1>
<p>よくある質問ページのバナーをメアリーが作ったよ。</p>

<p><img src="images/banner-faq.png" alt="よくある質問ページへ"></p>

3. 上書き保存し、ブラウザで画像が表示されているかを確認

画像にリンクを指定してみよう 8:21

img要素をChapter12で紹介した、リンクを表すa要素で挟む事で、画像全体にリンクを設定できます。

1. 「Chapter14」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考にa要素を追記

<h1>バナーができた</h1>
<p>よくある質問ページのバナーをメアリーが作ったよ。</p>

<p>
  <a href="faq.html">
    <img src="images/banner-faq.png" alt="よくある質問ページへ">
  </a>
</p>

3. 上書き保存し、ブラウザで画像にリンクが設定されているかを確認

画像のサイズを変更する方法 9:53

上記の例では画像が元のサイズで挿入されます。width（ウィズ）属性やheight（ハイト）属性を利用する事で画像をサイズを変更することも可能です。ただし、画像を拡大すると画質は荒くなりますし、画像を小さくする場合でも通信しているファイル容量は元の画像サイズのままですので注意して下さい。また、画像のサイズを変更しない場合でもwidth属性やheight属性で元サイズを指定しておくと、これらの属性を使わない場合より、ほんの少し表示速度が早くなります。（体感できない程度ですが）

<img src="表示したい画像ファイルまでのパス" width="表示する幅（px）" height="表示する高さ（px）" alt="代替文字">

画像のサイズを変更したサンプル

<p><img src="images/logo-dummy.png" width="240" height="80" alt="架空の株式会社 Dummy"></p>

width属性とheight属性を使ってみよう

それではwidth属性とheight属性を使って画像の元サイズを指定してみましょう。

1. 「Chapter14」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考にwidth属性とheight属性を追記

<h1>バナーができた</h1>
<p>よくある質問ページのバナーをメアリーが作ったよ。</p>

<p>
  <a href="faq.html">
    <img src="images/banner-faq.png" width="240" height="180" alt="よくある質問ページへ">
  </a>
</p>

3. 上書き保存し、ブラウザで画像が表示されているか確認

練習問題 12:55

「Chapter14」フォルダ　-> 「quest」フォルダ -> 「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

まとめ 19:21

画像の表示方法はわかりましたか？

• 画像は、img 要素で表示する
• ファイルの参照は、src 属性で指定する
• alt 属性に代替えテキストを指定する