画像を埋め込む要素

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

画像を埋め込む要素
要素名 意味・役割
<img> 画像

img要素

<img>要素はimageの略でHTML文章内に画像を埋め込みます。この<img>要素は空要素で、src属性を用いて画像を参照します。

カテゴリ
コンテンツ・モデル
空要素
主な属性
  • src属性: 参照する画像ファイルのパスを指定する属性
  • alt属性: 画像の代替えテキストを指定する属性
  • width属性: 画像の横幅を指定する属性
  • height属性: 画像の高さを指定する属性

img要素の基本的な使い方

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

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

サンプル

「images」フォルダ内の「 logo-dummy.png」という画像を挿入する例
<p><img src="images/logo-dummy.png" alt="架空の株式会社 Dummy"></p>
ブラウザでの表示例

RERUN

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

src属性の参照先に画像ファイルが存在しない例
<p><img src="img/logo-dummy.png" alt="架空の株式会社 Dummy"></p>
ブラウザでの表示例

RERUN

画像を表示してみよう

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

  1. 「Chapter14」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、<img>要素をマークアップ
Chapter14/index.html
<h1>バナーができた</h1>
<p>よくある質問ページのバナーをメアリーが作ったよ。</p>

<p><img src="images/banner-faq.png" alt="よくある質問ページへ"></p>
  1. 上書き保存し、ブラウザで画像が表示されているかを確認
ブラウザでの表示例

RERUN

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

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

  1. 「Chapter14」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、<a>要素を追記
Chapter14/index.html
<h1>バナーができた</h1>
<p>よくある質問ページのバナーをメアリーが作ったよ。</p>

<p>
  <a href="faq.html">
    <img src="images/banner-faq.png" alt="よくある質問ページへ">
  </a>
</p>
  1. 上書き保存し、ブラウザで画像にリンクが設定されているかを確認
ブラウザでの表示例

RERUN

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

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

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

サンプル

width属性とheight属性を使って縮小した例
<p><img src="images/logo-dummy.png" width="240" height="80" alt="架空の株式会社 Dummy"></p>
ブラウザでの表示例

RERUN

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

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

  1. 「Chapter14」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、width属性height属性を追記
Chapter14/index.html
<h1>バナーができた</h1>
<p>よくある質問ページのバナーをメアリーが作ったよ。</p>

<p>
  <a href="faq.html">
    <img src="images/banner-faq.png" width="240" height="180" alt="よくある質問ページへ">
  </a>
</p>
  1. 上書き保存し、ブラウザで画像が表示されているか確認
ブラウザでの表示例

RERUN

練習問題

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

    • 文字列「ホーム」
      • 画像ファイル:「images」フォルダ内の nav-home.png
      • 代替えテキスト:ホーム
      • 画像の幅:192px
      • 画像の高さ:48px
    • 文字列「企業情報」
      • 画像ファイル:「images」フォルダ内の nav-about-us.png
      • 代替えテキスト:企業情報
      • 画像の幅:192px
      • 画像の高さ:48px
    • 文字列「よくある質問」
      • 画像ファイル:「images」フォルダ内の nav-faq.png
      • 代替えテキスト:よくある質問
      • 画像の幅:192px
      • 画像の高さ:48px
ブラウザでの完成例

RERUN

解答例