IMGとは何の略ですか？

「IMG」とは何の略ですか？

「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 変更