HTMLの画像表示タグ<img>を初心者向けに解説！わかりやすい基本の使い方

新人と先輩の会話形式で理解しよう

新人

「HTMLで画像を表示する方法を教えてください！」

先輩

「画像を表示するには<img>タグを使いますよ。このタグを使えば、ウェブページに簡単に画像を埋め込むことができます。」

新人

「具体的にはどのように書けばいいですか？」

先輩

「それでは、基本の使い方を一緒に見ていきましょう！」

1. 画像タグ<img>の基本的な使い方

画像を表示するには、<img>タグを使い、画像の場所を指定するsrc属性と、画像が表示できないときに代わりに表示される説明を設定するalt属性が必要です。


<img src="example.jpg" alt="サンプル画像">

ブラウザ表示

上記の例では、example.jpgという名前の画像がページに表示されます。また、画像が見つからない場合や読み込めなかったときに「サンプル画像」という説明が表示されます。

画像のパスには2つの指定方法があります。1つ目は同じフォルダ内にある画像ファイルへの「相対パス」を指定する方法で、2つ目はインターネット上の画像を表示するための「絶対パス」を使う方法です。

同じフォルダ内に保存している画像を表示するには、ファイル名だけを指定します。


<img src="cat.jpg" alt="かわいい猫の画像">

ブラウザ表示

この例では、cat.jpgという画像ファイルが同じフォルダ内にある場合に表示されます。

ウェブ上の画像を表示したい場合は、URLを指定します。


<img src="https://example.com/dog.jpg" alt="犬の画像">

ブラウザ表示

この例では、インターネット上の画像ファイルを指定して表示しています。

画像の表示サイズを指定したいときには、width属性とheight属性を使います。ピクセル単位で幅と高さを設定できます。


<img src="flower.jpg" alt="花の画像" width="300" height="200">

ブラウザ表示

この例では、画像の幅を300ピクセル、高さを200ピクセルに指定しています。画像のサイズがページ全体のレイアウトに合うように調整しましょう。

画像が表示できない場合に備え、alt属性を必ず指定しましょう。この属性は、検索エンジンが画像の内容を理解するためにも使われます。


<img src="mountain.jpg" alt="美しい山の風景">

ブラウザ表示

例えば、検索結果に画像が表示されやすくなるため、画像の内容に即した説明を入れることがポイントです。