02. imgタグ

このレッスンでは、HTMLで画像を表示する方法を学びます。モンスターの画像を表示して、バトル画面らしくしていきましょう。

画像を用意する

まず、↓のボタンからモンスターの画像をダウンロードしてください。

ボタンを押すとimg.zipという、ZIPファイルがダウンロードされます。ダブルクリックしてZIPファイルを展開してください。

展開するとimgフォルダができます。このフォルダをbattle.htmlと同じ場所に置いてください。

battle.html
img/
  ├── dark-knight.png
  ├── dark-lord.png
  └── demon-priest.png

imgタグで画像を表示する

battle.htmlの<body>の中に<img>タグを追加します。

<!-- battle.html highlight:8 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
</head>
<body>
    <img src="img/dark-lord.png">
    まおうがあらわれた。
</body>
</html>

確認しよう

ブラウザでbattle.htmlを開いて、「まおう」の画像が表示されていれば成功です。

内容の説明

`<img>`タグと`src`属性

<img>は画像を表示するためのタグです。src属性で、表示したい画像ファイルの場所を指定します。

src="img/dark-lord.png"は、「imgフォルダの中にあるdark-lord.pngというファイル」という意味です。このように、ファイルの場所を表す文字列を「パス」と呼びます。

終了タグがないタグ

レッスン1で、多くのタグは開始タグと終了タグのペアになっていると説明しました。しかし<img>タグには終了タグ（</img>）がありません。

<body>〜</body>のようなタグは、その間に内容を入れる必要があります。一方、<img>タグはsrc属性で画像を指定するだけで完結するため、間に何かを入れる必要がなく、終了タグもありません。このようなタグを「空要素」と呼びます。

画像を小さくする

今のままでは「まおう」の画像が大きすぎます。画像の幅を指定して小さくしましょう。

<img>タグにstyle="width: 400px;"という属性を追加してください。

<!-- battle.html selection:7-10 highlight:8 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
</head>
<body>
    <img src="img/dark-lord.png" style="width: 400px;">
    まおうがあらわれた。
</body>
</html>

widthは英語で幅を表します。<img>タグのstyle属性にwidth: 400px;を指定すると、「その画像の幅を400pxにする」という意味になります。

ブラウザで確認すると、画像とテキストが横に並んで表示されます。縦に並べたいところですが、その方法は次のレッスンで扱います。

試してみよう

src属性の値を変えて、別のモンスターを表示してみましょう
widthの値を変えて、画像の大きさがどう変わるか確認してみましょう

これまでの成果

<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
</head>
<body>
    <img src="img/dark-lord.png" style="width: 400px;">
    まおうがあらわれた。
</body>
</html>

arrow_back前へ次へ: 03. divタグarrow_forward