HTMLで画像を表示する要素は？

HTMLで画像を表示する要素は？

HTMLでは、画像を表示するために主に使用される要素は<img>です。<img>要素を使用することで、ウェブページに画像を追加することができます。この要素は非常に重要であり、ウェブコンテンツの視覚的な魅力を高めるために欠かせないものです。

この章では、img要素の使い方や属性、画像のサイズ変更、リンクの設定などについて詳しく解説していきます。

1. 画像を埋め込む要素

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

img要素は「image（画像）」の略で、HTML文書内に画像を埋め込むための要素です。
img要素は空要素であり、開始タグと終了タグの間にコンテンツを持ちません。
画像の参照は src 属性で行います。

カテゴリ:

  • フロー・コンテンツ

  • フレージング・コンテンツ

  • エンベッテッド・コンテンツ

コンテンツ・モデル:

  • 空要素

2. img要素の主な属性

img要素には、画像を表示するために必要な情報を指定するための属性がいくつかあります。主な属性は以下の通りです。

  • src 属性: 参照する画像ファイルのパスを指定します。必須の属性です。

  • alt 属性: 画像の代替テキストを指定します。画像が表示できない場合に表示されるテキストや、スクリーンリーダーなどで読み上げられるテキストになります。

  • width 属性: 画像の横幅をピクセル単位で指定します。

  • height 属性: 画像の高さをピクセル単位で指定します。

3. img要素の基本的な使い方

img要素の基本的な使い方は、 src 属性に画像ファイルのパスを指定し、 alt 属性に代替テキストを指定することです。

記述例:

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

サンプル:

「images」フォルダ内の「logo-dummy.png」という画像を挿入する例です。

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

上記のように記述すると、段落 <p> の中に「logo-dummy.png」という画像が表示されます。

4. src属性の参照先に画像ファイルが存在しない例

src 属性で指定したパスに画像ファイルが存在しない場合、ブラウザは画像を表示することができません。
その際、 alt 属性に指定した代替テキストが表示されます。

記述例:

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

上記の例では、"img" フォルダ内に "logo-dummy.png" という画像ファイルが存在しないため、ブラウザには "架空の株式会社 Dummy" という代替テキストが表示されます。

5. 画像を表示してみよう

実際にimg要素を使って画像を挿入してみましょう。

  1. 「Chapter14」フォルダ内の「index.html」をテキストエディタで開きます。

  2. 以下のコードを参考に、 img 要素を記述します。

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

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

  3. ファイルを上書き保存し、ブラウザで「index.html」を開いて画像が表示されているか確認しましょう。

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

img要素を <a> 要素（リンクを表す要素）で囲むことで、画像全体をリンクにすることができます。
クリックすると、指定したURLに遷移するようになります。

  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. ファイルを上書き保存し、ブラウザで画像をクリックするとリンク先に遷移するか確認しましょう。

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

width 属性と height 属性を使うことで、画像の表示サイズを変更することができます。
ただし、画像を拡大すると画質が荒くなる可能性があります。
また、画像を縮小した場合でも、ファイルサイズ自体は変わらないため、ページの読み込み速度に影響を与える可能性があります。

画像のサイズを変更しない場合でも、 width 属性と height 属性で元々の画像サイズを指定しておくことで、ブラウザが画像のサイズを計算する必要がなくなり、表示速度がわずかに向上する効果があります。

img要素に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>

8. 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. ファイルを上書き保存し、ブラウザで画像が表示されているか確認しましょう。

  •  

まとめ

この章では、HTMLで画像を表示するための img要素 について学びました。

重要なポイントをまとめると以下のようになります。

  • 画像は img 要素を使って表示する。

  • 画像ファイルの参照は src 属性で指定する。

  • alt 属性には、代替テキストを指定する。

これらのポイントを踏まえて、Webページに画像を効果的に配置していきましょう。

アクセスビリティの重要性

alt属性は、アクセシビリティの観点から非常に重要です。視覚障害のあるユーザーや画像が読み込まれない環境においても、alt属性を設定することで、画像の内容を伝えることができます。

引用記事

さらに詳細な情報については、以下のリンクを参照してください。

よくある質問 (Q&A)

  • Q1: 画像の代替テキストは必須ですか？
    A1: はい、alt属性は必須です。画像が表示されない場合や、アクセシビリティのために必要です。
  • Q2: 画像のサイズを指定しないとどうなりますか？
    A2: サイズを指定しないと、画像は元のサイズで表示され、レイアウトが崩れることがあります。
  • Q3: 画像の形式にはどのようなものがありますか？
    A3: 一般的な形式にはJPEG、PNG、GIFなどがあります。それぞれに特性がありますので、用途に応じて選んでください。

その他の参考記事:html gif 埋め込み