【HTML入門 #02】画像とリンクを表示してみよう！
6/24/2025
著者: yasuzaki
カテゴリ: HTML
タグ:
今回の目標
前回は文字を表示する基本的なHTMLを書きました。今回は、画像を表示したり、リンクを設定したりと、Webページらしい構成を作っていきます。
画像を表示する（<img>タグ）
画像を表示するには、<img> タグを使います。
<img src="sample.jpg" alt="サンプル画像">src属性 … 表示する画像ファイルのパス（例：同じフォルダ内のsample.jpg）alt属性 … 画像が表示できないときの代替テキスト（SEOやアクセシビリティにも重要）
※ 表示したい画像ファイル（例：sample.jpg）をHTMLファイルと同じフォルダに入れておきましょう。
リンクを設定する（<a>タグ）
リンクを作るには、<a> タグ（アンカータグ）を使います。
<a href="https://example.com">別のページへ移動</a>href属性 … リンク先のURLを指定します- タグで囲んだテキストがクリック可能になります
実際のコード例
以下のようにHTMLを構成すると、画像とリンクを一緒に表示できます：
<!DOCTYPE html>
<html>
<head>
<title>画像とリンクの例</title>
</head>
<body>
<h1>画像とリンクを表示する</h1>
<p>以下はサンプル画像です：</p>
<img src="sample.jpg" alt="サンプル画像" width="300">
<p>以下のリンクをクリックすると別のサイトに移動します：</p>
<a href="https://example.com">Example.com</a>
</body>
</html>まとめ
- 画像は
<img src="...">タグで表示できる - リンクは
<a href="...">...</a>で作れる - どちらもWebページに必須の要素！
次回予告
次回は「リスト（箇条書き・番号付き）」を使って、情報を整理して表示する方法を学びます。