HTMLで画像を表示させる、<img>タグの使い方

2026年8月10日 11:12

前回のおさらい

前回は、タグを使ってブラウザにテキストを表示させるところまでやりました。メモ帳でHTMLファイルを書いて、ブラウザで開くという流れも一通り体験してもらえたと思います。

今回は、そこに画像を表示させる方法を紹介します。

画像を表示するには<img>タグを使います。
これまで出てきたタグなどとは違い、<img>タグには閉じタグが不要です。

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

前回と同じように、メモ帳を使って進めます。

まず、表示させたい画像を1枚用意して、これから作るHTMLファイルと同じフォルダに入れておきます。

続けて、メモ帳に以下のコードを書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>練習</title>
</head>
<body>
    <p>こんにちは</p>
    <img src="sample.jpg" alt="サンプル画像">
</body>
</html>

前回のこんにちはの次の行に追加画像のコードを追加しました。
<img src="sample.jpg" alt="サンプル画像">
sample.jpgはこちらでも用意しました。
htmlファイルとして保存してください。

保存したhtmlファイルをブラウザで開くとこんな感じになります。

こんにちはの下に、指定した画像が表示されていれば成功です。

これで、テキストと画像をブラウザに表示させる基本が一通りできるようになりました。次回は、この見た目をCSSで装飾していく(文字色を変えたり、余白を調整したり)ところに進んでいく予定です。

今回使ったサンプルファイルも、よろしければご自由にお使いください。

前回の記事