（最終更新日：2023年6月）
✔以下の疑問をお持ちの方へ向けた記事です
「HTMLで画像をどのように挿入するのだろうか？」
「HTMLの画像挿入の書き方を学びたい」
「HTMLの画像挿入の具体的な使用例を見て理解したい」
✔この記事を読むことで得られる知識
- HTMLでの画像挿入の基本的な書き方
- 画像挿入の応用法
- HTMLでの画像挿入を用いた具体的な使用例
この記事では、HTMLでの画像挿入の基本的な使い方から、画像のリサイズや代替テキストの設定など、より実践的な内容も含めて紹介します。
ぜひ最後までお読みください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
HTMLで画像を挿入する基本タグ：img
まずはHTMLで画像をウェブページに挿入するための基本タグ、imgについて説明します。
- imgタグの基本構文
- 画像ソース指定: src属性
- 代替テキスト: alt属性
- 画像のサイズ調整: width & height属性
- 画像の配置: align属性
- タイトル設定: title属性
imgタグの基本構文
imgタグは、ウェブページに画像を表示するために使われます。
基本的な構文はこちら。
<img src="画像のURL" alt="代替テキスト">- src属性：画像のソースを指定
- alt属性：画像が表示できない場合に表示される代替テキストを設定
画像ソース指定: src属性
src属性は、挿入したい画像のソース（URLまたはファイルパス）を指定します。
<img src="images/picture.jpg">imagesディレクトリ内のpicture.jpgが表示されます。
代替テキスト: alt属性
alt属性は、画像が何らかの理由で表示できない場合に代わりに表示されるテキストを設定。
この属性はウェブアクセシビリティの観点から重要であり、視覚障害のある人々がスクリーンリーダーを使用する場合に有用です。
<img src="path/to/image.jpg" alt="美しい自然の風景">画像のサイズ調整: width & height属性
画像サイズの調整は、ウェブページの読み込み速度やレイアウトの安定性に、大きく影響します。
なぜならサイズが指定されていないと、ページの読み込み完了まで、そのスペースが確定せず、レイアウトが変わってしまう可能性があるからです。
設定には、以下2つを決めましょう。
- width属性：画像の幅
- height属性：画像の高さ
ただし2つを同時に設定すると、画像の元のアスペクト比が保たれない場合があります。
ひとつだけ設定し、他方は自動的に調整されるようにするのがおすすめです。
画像の配置: align属性
align属性は、簡単にだけ、覚えておくと良いでしょう。
なぜならHTML5では廃止されているものの、一部の古いブラウザではまだ使用されているからです。
align属性には以下があります。
- “top”
- “middle”
- “bottom”
- “left”
- “right”
ただし、現代のウェブデザインでは、より柔軟で精密な配置制御のためにCSSが主に使用されます。
タイトル設定: title属性
title属性は、画像にマウスカーソルを合わせた時に表示されるツールチップテキストを設定します。
この属性は、画像の追加情報を提供したい場合に便利です。
しかし、重要な情報はalt属性にも記載することが推奨されます。
実際のコードを見てみよう：サンプルコード解説
次に、実際のHTMLコードを見て、imgタグの使用方法を詳しく学んでいきましょう。
- 基本的なimgタグの使用例
- align属性の設定値の違いを理解する
基本的なimgタグの使用例
ここでは、基本的なimgタグの使用例を紹介します。
以下のコードは、src属性で指定した画像をウェブページに表示し、alt属性で代替テキストを設定しています。
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body> <img src="images/sample.jpg" alt="A sample image"> </body>
</html>このコードでは、”images/sample.jpg”という画像をウェブページに表示。
もし画像が見つからない場合や読み込めない場合は、”A sample image”というテキストが表示されます。
align属性の設定値の違いを理解する
align属性は、imgタグ内の画像の配置を調整するために使われます。
主に”top”、”middle”、”bottom”に焦点を当て、それぞれがどのように動作するかを解説します。
- サンプルコード：index.html (top, middle, bottom)
- サンプルコード：index.html (left, right)
サンプルコード：index.html (top, middle, bottom)
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p> <img src="images/sample.jpg" alt="A sample image" align="top"> This is a sample text. </p>
<p> <img src="images/sample.jpg" alt="A sample image" align="middle"> This is a sample text. </p>
<p> <img src="images/sample.jpg" alt="A sample image" align="bottom"> This is a sample text. </p>
</body>
</html>このコードでは、align属性を”top”、”middle”、”bottom”に設定し、それぞれの値がテキストに対して画像をどのように配置するかを示しています。
- “top”：画像の上端がテキスト行の上端に合わさる
- “middle”：画像の中心がテキスト行の中心に合わさる
- “bottom”：画像の下端がテキスト行の下端に合わさる
Webエンジニアの一歩：HTML画像挿入スキル
HTMLで画像を取り扱うための手法を理解することは、Web開発者のスキルセットの一部です。
これは単にビジュアル面を強化するだけでなく、ユーザー体験の向上にも直結します。
以下に、画像挿入の主要なステップをリストアップします。
imgタグの使用: HTMLのimgタグを使用して画像を挿入します。このタグは、Webページに直接画像を配置する最も基本的な方法です。- 画像のソース指定:
src属性を用いて画像の場所を指定します。これは画像ファイルへのパス（URLまたはローカルパス）を含みます。 - 画像の大きさ調整:
widthとheight属性を使用して、表示される画像のサイズを調整できます。 - 代替テキストの提供:
alt属性を用いて、画像が表示されない場合に表示するテキストを指定します。
これは視覚障害のある人々や、画像が読み込まれない状況で有用です。 - 画像のタイトル指定:
title属性を用いて、画像にマウスをホバーした時に表示するテキストを指定します。
以上のステップを用いることで、効果的な画像挿入が可能となります。
これらは基本的なスキルですが、優れたユーザー体験を提供するためには必須の知識となるでしょう。
まとめ：画像挿入の重要性と基本
当記事では、HTMLで画像を挿入する基本的なタグであるimgタグの使用方法と属性を解説しました。
この知識を活用し、ウェブページに魅力的なビジュアルを追加しましょう。
これはWeb開発者としての一歩を踏み出すための大切なステップです。