「IMG」とは何の略ですか？
「IMG」は「Image」の略であり、HTML文書内に画像を表示するために使用するタグです。Webページに視覚的な要素を追加することで、ユーザー体験を向上させるために不可欠な要素と言えるでしょう。
IMGタグの基本的な使い方
IMGタグは、開始タグと終了タグを持たない「空要素」と呼ばれるタグの一つで、以下のように記述します。
<img src="画像のURL" alt="代替テキスト">
各属性の意味は以下の通りです。
| 属性 | 説明 |
|---|---|
src |
画像ファイルのURLを指定します。必須属性です。 |
alt |
画像が表示されない場合に表示される代替テキストを指定します。必須ではありませんが、アクセシビリティの観点から必ず記述することが推奨されます。 |
IMGタグのその他の属性
IMGタグには、上記以外にも様々な属性を指定することができます。以下に、代表的な属性をいくつか紹介します。
| 属性 | 説明 |
|---|---|
width |
画像の幅をピクセルまたはパーセンテージで指定します。 |
height |
画像の高さをピクセルまたはパーセンテージで指定します。 |
title |
画像にマウスポインタを合わせた際に表示されるツールチップテキストを指定します。 |
使用例
以下のコードは、IMGタグを使用して画像を表示する例です。
<img src="https://example.com/images/sample.jpg" alt="サンプル画像" width="500" height="300">
上記コードを実行すると、"https://example.com/images/sample.jpg"に located する画像が、幅500ピクセル、高さ300ピクセルで表示されます。もし画像が表示されない場合は、「サンプル画像」という代替テキストが表示されます。
参考資料
よくある質問
Q1: 画像のサイズを指定しないとどうなるのですか？
A1: 画像のサイズを指定しない場合、ブラウザは画像の元のサイズで表示しようとします。そのため、レイアウトが崩れてしまう可能性があります。必ずwidth属性とheight属性でサイズを指定するか、CSSを使用してサイズを調整するようにしましょう。
Q2: alt属性はどのような時に役立つのですか？
A2: alt属性は、以下の様な状況で役立ちます。
- 画像ファイルが読み込めない場合：代替テキストが表示されることで、ユーザーはどのような画像であるかを知ることができます。
- 視覚障碍者の方がスクリーンリーダーを使用している場合：スクリーンリーダーは代替テキストを読み上げることで、画像の内容を伝えます。
Q3: 複数の画像を横に並べて表示するにはどうすれば良いですか？
A3: 複数の画像を横に並べて表示するには、CSSのdisplay: inline-block;プロパティを使用します。詳細については、CSSの参考資料などを参照してください。
その他の参考記事:jquery img src 変更