• Home
  • Web制作
  • Webページの「顔」を彩る！imgタグを使いこなすための完全ガイド

Webページの「顔」を彩る！imgタグを使いこなすための完全ガイド

schedule update
Tags: HTML

はじめに：imgタグとは？

Webサイトを彩り豊かにする画像。その画像を表示するために欠かせないのが imgタグ です。 imgタグは、HTMLの中でも特に使用頻度の高いタグの一つと言えるでしょう。

今回は、imgタグの基本的な使い方から、画像の表示を最適化するための応用的なテクニックまでご紹介します。

あわせて読みたい
画像表示を最適化！img要素のloading属性でWebページ表示速度アップを目指そう！

1. imgタグの基本：src属性とalt属性

imgタグを使うには、<img> と </img> の間に、画像に関する情報を記述します。 特に重要なのが、 src属性 と alt属性 の2つ。

1-1. src属性：画像のURLを指定

src属性は、表示したい画像のURLを指定するために使います。 Web上にある画像はもちろん、ご自身のPCやサーバーに保存されている画像も表示可能です。

記述例

<img src="https://example.com/image.jpg" alt="説明文">

1-2. alt属性：画像の代替テキスト

alt属性には、画像の内容を説明するテキストを記述します。 画像が表示されない場合に代替テキストとして表示されたり、スクリーンリーダーなどの支援技術によって読み上げられたりするため、アクセシビリティの観点からも非常に重要です。

記述例

<img src="https://example.com/image.jpg" alt="海の風景">

2. 画像サイズを指定する：width属性とheight属性

imgタグでは、 width属性 と height属性 を使うことで、画像の幅と高さを指定できます。

記述例

<img src="https://example.com/image.jpg" alt="説明文" width="300" height="200">

ポイント

  • width属性とheight属性は、画像の縦横比を保ったままサイズを変更したい場合に便利です。
  • サイズを指定しない場合は、画像の元のサイズで表示されます。

3. レスポンシブ対応：様々な画面サイズに対応しよう

近年、パソコンだけでなく、スマートフォンやタブレットなど、様々なデバイスでWebサイトを閲覧することが当たり前になっています。

そこで重要になるのが、 レスポンシブ対応 です。 異なる画面サイズでも画像が適切に表示されるように、imgタグにCSSを組み合わせる方法を見ていきましょう。

記述例

<img src="https://example.com/image.jpg" alt="説明文" class="responsive-image">

.responsive-image {
  max-width: 100%;
  height: auto;
}

ポイント

  • max-width: 100%; で、画像が親要素の幅を超えないように設定します。
  • height: auto; で、高さを自動調整し、縦横比を維持します。

4. title属性：画像に補足情報を追加

title属性は、画像にマウスポインターを合わせた際に、補足情報をツールチップとして表示するものです。 alt属性では伝えきれない詳細な情報を加えたい場合に有効です。

記述例

<img src="https://example.com/image.jpg" alt="説明文" title="撮影場所：沖縄">

5. まとめ：imgタグを使いこなして、魅力的なWebページを！

今回は、Webページに画像を表示する際に欠かせないimgタグについて解説しました。 基本的な使い方から、レスポンシブ対応、アクセシビリティまで、幅広い知識を身につけることで、より効果的に画像を活用し、魅力的なWebページを作成することができます。

関連記事