はじめてのWebデザイン『HTML・CSS』入門

2-5. 画像を表示するタグ(img)

Webページ上で「画像」を表示するimgタグの使い方を解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/05/08最終更新日:2019/05/08

スポンサーリンク

1.画像タグ:imgの使い方

<img>タグは画像を示す要素です。このタグを使うとブラウザに画像を表示させることができます。

<img>タグを利用するには属性をいくつか指定する必要があります。

src属性

表示したい画像の場所を指定します。以下のように記述します。

<img src="dog.jpg" />

この際、dog.jpgは<img>タグを記述するファイルと同じ場所にある必要があります。

違う場所にある場合は以下のようにディレクトリを指定します。

サンプル:
<img src="images/dog.jpg" />

alt属性

alt属性は画像の代替となるテキスト情報です。画像が読み込まれる間に表示されたり、音声読み上げブラウザがこのテキストを読み上げてくれます。

サンプル:
<img src="images/dog.jpg" alt="犬がお座りしている写真" />

width、height属性

画像の高さと横幅を指定します。widthは横幅、heightは高さです。

サンプル:
<img src="images/dog.jpg" width="600" height="315" />

<img>タグの注意点

<img>タグは特殊なタグで通常のタグは開始タグ、終了タグが存在しますが、<img>タグはこれだけで完結します。なので、<img>タグの最後に/をいれてこのタグだけで完結するということを記述します。「/>」で閉じタグを表すことができます。

2.画像タグをindex.htmlに記述する

dog.jpgをこちらからダウンロードし、html-lessonフォルダに保存します。

index.htmlの<body>〜</body>内に以下の内容を記述します(前のレッスンで書いたものは消して構いません)

<img src="dog.jpg" alt="犬がお座りしている写真" height="316" width="300" />

上書き保存してブラウザを更新すると、以下のように表示されます。

画像の表示

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

スポンサーリンク

このレッスンの著者