HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML画像タグ（img）の使い方完全ガイド｜基本から応用まで徹底解説

HTMLの<img>タグは、Webページに画像を表示するための要素です。src属性で表示したい画像の場所を指定し、alt属性を使えば、画像が読み込めない場合に代わりのテキストを表示できます。

Webが誕生した当初、ページに表示できるのはテキストだけでした。しかし間もなく画像を埋め込む機能が追加され、以来、画像はWebページに欠かせない存在となっています。ロゴから写真まで、インターネット上のあらゆる場所で画像が活用されています。

この記事では、Web開発者が<img>タグを使ってHTML画像を扱う方法を解説します。<img>タグで利用できる主要な属性についても詳しく取り上げます。

HTMLの画像タグ（imgタグ）とは

HTMLの<img>タグは、Webドキュメントに画像を追加します。src属性で埋め込みたい画像の場所を指定します。指定できるのは、自分のコンピューター上のファイルでも、別ファイルへのURLでも構いません。また、alt属性を指定すると、画像が読み込めなかった場合に表示される代替テキストを設定できます。

<img>タグの基本的な構文は次のとおりです。

<img src="house.png">

<img>タグには終了タグがありません。タグは「/>」で終わり、別途終了タグが必要ないことを示します。<img>タグはすべてのブラウザーでサポートされています。

HTMLでは、参照する画像はHTMLファイルと同じフォルダーにあるものとみなされます。この挙動は、正確なファイルパスやURLを指定することで変更できます。

上記の構文では、<img>タグは「house.png」というファイルを参照します。このファイルは、作業中のHTMLファイルと同じフォルダーに置かれています。

一方、画像ファイルを別のフォルダー（たとえば「pictures」フォルダー）に保存している場合は、次のようなコードになります。

<img src="pictures/house.png">

外部ソースから画像を埋め込みたい場合は、絶対URLを使用します。外部画像を参照する<img>タグの例は以下のとおりです。

<img src="https://www.example.org/pictures/house.png">

とはいえ、可能な限りローカルファイルから画像を参照するのがベストです。外部画像を参照すると、ブラウザーがローカルファイルから画像を取得する場合よりも多くの処理を行うことになるためです。

HTML画像の実例

<img>タグの実際の使用例を見てみましょう。地元のコーヒーショップ「The Golden Roast」のWebサイトを制作しているとします。トップページにコーヒーカップの画像を表示したいという要望がありました。

ページに追加するよう依頼されたファイル名は「coffee.png」です。この画像は、HTMLページと同じフォルダーに保存されています。サイトにこの画像を追加するには、次のコードを使います。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png">
</body>

コードの実行結果：

HTML画像タグ（img）の使い方完全ガイド｜基本から応用まで徹底解説

コードを分解して見ていきましょう。まず、Webページの主要な要素を格納する<body>タグを使用しました。次に、<h1>タグでページの見出しを定義しました。見出しのテキストは「The Golden Roast」です。

その次の行では、img要素を使って「coffee.png」という画像をコードに追加しました。この画像はHTMLファイルと同じフォルダー内にあるため、src属性でフォルダーを指定する必要はなく、ファイル名だけを記述すれば済みました。

HTML画像の代替テキスト（alt属性）

HTMLで画像を扱う際、代替テキストの追加は重要なポイントです。alt属性で表される代替テキストとは、画像の内容を説明するテキストのことです。

画像を扱うときにalt属性を指定すべき理由はいくつかあります。altテキストは以下のような場面で役立ちます。

  1. 存在しない画像の説明：画像が見つからない場合（指定したフォルダーにファイルが存在しないなど）に、altテキストが表示されます。
  2. 読み込みが遅い画像の説明：閲覧者の回線が遅い場合、画像の読み込みに時間がかかることがあります。
  3. アクセシビリティの向上：スクリーンリーダーを使用している訪問者は、altテキストによって画像の説明を音声で聞くことができます。

altテキストを設定しておけば、何らかの理由で画像が表示できなかった場合でも、ユーザーにはテキストが提示されます。altテキストを指定せずに画像が壊れていると、壊れた画像のアイコンが表示されてしまいます。

代替テキストの記述例

先ほどのコーヒーショップの例の画像に、alt属性を追加してみましょう。指定したいaltテキストは「明るい茶色の木製テーブルの上、コーヒー豆に囲まれた焙煎中のコーヒー」です。次のコードで追加できます。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" alt="明るい茶色の木製テーブルの上、コーヒー豆に囲まれた焙煎中のコーヒー">
</body>

ここで、誰かがcoffee.pngファイルを別のフォルダーへ移動させてしまったとします。すると、Webページはそのファイルを見つけられなくなります。画像が見つからないため、altテキストがページ上に表示されることになります。この場合、訪問者に表示される画面の例は以下のとおりです。

HTML画像タグ（img）の使い方完全ガイド｜基本から応用まで徹底解説

alt属性を追加するときは、簡潔にまとめ、画像そのものを説明するように心がけましょう。コーヒーの例では、画像に写っている内容を説明しました。すでにページ上にあるテキストを繰り返すのは、ユーザーにとって混乱を招くため避けるべきです。

HTML画像のtitle属性（ツールチップ）

title属性を使うと、画像に関する追加情報を提供できます。title属性を設定すると、ユーザーがマウスで画像にホバーしたときにツールチップが表示されます。

画像にツールチップを追加したい場合、title属性は便利です。ただし、title属性はスクリーンリーダーに対応しておらず、マウスのないモバイルデバイスでは表示されない点に注意が必要です。

先ほどの画像に、「テーブルの上のコーヒーカップ」という値を持つtitle属性を追加してみましょう。次のコードを使用します。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" alt="明るい茶色の木製テーブルの上、コーヒー豆に囲まれた焙煎中のコーヒー" title="テーブルの上のコーヒーカップ">
</body>
HTML画像タグ（img）の使い方完全ガイド｜基本から応用まで徹底解説

カーソルを画像の上に置くと、title属性の内容が表示されます。

HTML画像のサイズ指定（width属性・height属性）

width属性とheight属性を使うと、画像の幅と高さをそれぞれ指定できます。

再びコーヒーショップの例に戻りましょう。コーヒーの画像を幅400ピクセル×高さ400ピクセルで表示したいとします。画像がページで占めるスペースを大きくしたくない場合などに有効です。次のコードでこれらのパラメーターを指定できます。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" width="400" height="400">
</body>

コードの実行結果：

HTML画像タグ（img）の使い方完全ガイド｜基本から応用まで徹底解説

ご覧のとおり、この例の画像は先ほどより小さくなっています。最初の例では画像は500×500でしたが、今回はheight属性とwidth属性の両方に400を指定したため、400×400で表示されています。

HTML画像の配置（floatによる回り込み）

画像を扱っていると、ページの左側や右側に画像を回り込ませたい（floatさせたい）ことがあります。floatとは、ページ上での画像の水平方向の配置（左または右）を指します。これを実現するのがCSSのfloatプロパティです。

先ほどのコーヒー画像をページの右側に表示したいとします。次のコードで実現できます。

<body>
	<h1>The Golden Roast</h1>
<img src="coffee.png" width="400" height="400" style="float:right;">
</body>

コードの実行結果：

HTML画像タグ（img）の使い方完全ガイド｜基本から応用まで徹底解説

style属性の中で「float:right;」を使用しました。これにより、画像をページの右側に回り込ませるように指定しています。

まとめ

HTMLの<img>タグを使えば、Webページに画像を配置できます。画像はローカルのファイルやフォルダーから読み込むことも、外部ソースから読み込むことも可能です。

この記事では、HTMLで<img>タグを扱う方法を解説しました。さらに、<img>タグが提供する主要な属性の使い方についても触れました。これで、プロのようにHTMLで画像を扱うための知識が身についたはずです。

HTMLについてさらに学びたい方は、ぜひ「HTMLの学習方法ガイド」もチェックしてみてください。専門家のコツや、オンライン講座・学習リソースの一覧を掲載しています。

  1. HTML DOMの入力画像（Input Image）オブジェクト徹底解説

    HTML DOM 入力画像オブジェクトとはHTML DOM の入力画像（Input Image）オブジェクトは、HTMLドキュメント内の type=image を持つ <input> 要素を表します。このタイプの入力フィールドは、画像を送信ボタンとして使用したい場合に活用されます。ここでは、入力画像オブジェクトの作成方法と、利用可能なプロパティについて詳しく解説します。構文（Syntax）入力画像オブジェクトを作成するための基本構文は以下の通りです。var imageInput = document.createElement(INPUT); imageInput.setAttri

  2. HTMLマッピング画像（イメージマップ）とは？基本構文と実装例を解説

    HTMLマッピング画像（イメージマップ）とは、HTML文書の中でハイパーリンクとして機能する「クリック可能な領域」を持つ、クライアントサイドの画像マップのことです。1枚の画像の中に複数のリンク先を設定できるため、ナビゲーションバーや図解などに活用できます。 map要素とimg要素を関連付けるには、map要素のname属性の値と、img要素のusemap属性の値を一致させます。 基本構文 HTMLマッピング画像の基本的な構文は以下の通りです。 <img src="" alt="" usemap="#name_value">