Webページを作るうえで、画像は欠かせませんね。
この記事では、超初心者向けにHTMLの<img>タグの使い方をわかりやすく解説します！
<img>タグとは？
<img>タグは、画像をWebページ上に表示するためのタグです。
基本の書き方:
<img src="https://picsum.photos/200/300" alt="サンプル画像">💡 ポイント:
src（ソース）は、画像ファイルの場所（URLとかどのフォルダに置いているか）を指定します。alt（代替テキスト）は、画像が表示できないときに表示されるテキストです。（通信が悪い時とかに活躍するよ！）
実践してみよう！
下記をコピペでhtmlファイルとして保存し、リンクがどのように動くか確認してみてください。
<!DOCTYPE html>
<html>
<head>
<title>画像表示の基本</title>
</head>
<body>
<h1>画像の表示サンプル</h1>
<img src="https://picsum.photos/200/300" alt="サンプル画像">
</body>
</html>画像の種類別の解説！
外部サイトの画像を表示する場合:
<img src="https://picsum.photos/200/300" alt="外部画像の例">💡 ポイント: 外部サイトのURLをそのままsrcに指定するだけでOK！
自分のPC内の画像を表示する場合:
自分のパソコンにある画像を表示する場合も、srcでどのファイルかを指定してあげます。
ただURLはないので、パスというものを使って指定します。
HTMLファイルと同じフォルダに画像を保存する:
- こちらのリンクからサンプル画像を保存します： https://picsum.photos/200/300
- 保存する際、ファイル名を
image.jpgとして保存してください。 - 画像ファイル（
image.jpg）を、HTMLファイルと同じ場所に保存します。 - htmlを以下のように記述して、表示してみてください：
<!DOCTYPE html>
<html>
<head>
<title>画像表示の基本</title>
</head>
<body>
<h1>画像の表示サンプル</h1>
<img src="image.jpg" alt="ローカル画像の例">
</body>
</html>画像を保持するフォルダを分ける場合:
1. htmlファイルが置いてあるフォルダの中で「images」というフォルダを作ります
2. その中に画像を（photo.jpg）という名前で保存します。
3. htmlを以下のように記述して、表示してみてください：
<!DOCTYPE html>
<html>
<head>
<title>画像表示の基本</title>
</head>
<body>
<h1>画像の表示サンプル</h1>
<img src="images/photo.jpg" alt="フォルダ内の画像">
</body>
</html>images/の部分が、「imagesというフォルダにある画像」という意味になっています。
画像のサイズを変更する方法
画像のサイズは、width（幅）とheight（高さ）属性で指定できます。
<img src="https://picsum.photos/200/300" alt="サイズ調整例" width="200" height="150">💡 ポイント:
- 200や150は「ピクセル（px）」で、画像の大きさを表します。
widthだけ指定すると、縦横比が自動で調整されます。
ピクセルって何？
ピクセル（px）は、画面を構成する小さな点のことです。
画面は無数の点（ピクセル）でできており、画像の「幅」や「高さ」を「ピクセル200個分！」みたいに指定します。
リンク付きの画像を作る方法
画像をクリックすると別のページに移動できるようにするには、<a>タグと組み合わせます。
<a>タグって何？
<a>タグは、リンクを作成するためのタグです。
このタグを使うことで、クリックしたときに別のページやサイトに移動できるようになります。
<a>タグの詳細は下記の記事を参考にしてください！
💡 ポイント:
href属性でリンク先のURLを指定します。<a>タグの中に画像タグを入れることで、画像そのものをクリックできるリンクにできます。
<a href="https://www.example.com">
<img src="https://picsum.photos/200/300" alt="リンク付き画像">
</a>おさらいクイズ！
これが解けたら、今回の内容はバッチリ！ ✅
1️⃣ 画像を表示する正しいコードはどれ？
A.
<img href="image.jpg" alt="画像の例">B.
<img src="image.jpg" alt="画像の例">✅ 答え: → Bが正解！ 画像を表示するには、src属性で画像のパスを指定します。
2️⃣ 画像が表示されないときに表示されるテキストは何？
A. title属性
B. alt属性
✅ 答え: → Bが正解！ alt属性は、画像が表示されない場合の代替テキストとして表示されます。
まとめ
<img>タグは画像を表示するための基本タグ！src属性で画像の場所を指定、alt属性で代替テキストを設定。- 画像のサイズ調整やリンク付き画像も簡単に作成可能！
コメントを残す