imgとは
- ここで説明する img とは次の語句からなるHTMLの要素です。
- image
- 読み: イメージ
意味: 画像
img要素の概要
img 要素は、文書内に画像を埋め込んで表示するための要素です。
a 要素に内包された img 要素を作成すれば画像にリンクの機能をつけることもできます。
この要素は、単独タグのみで機能します。
<img src="URL" alt="画像の説明">
サンプルコードと実行結果
まずはじめに原寸大の画像サンプルを表示してみます。
サンプルコード: HTML (サイズ未指定の原寸大)
<body>
<img src="ywork.png" alt="画像サイズのサンプル">
</body>
このサンプルでは、親要素の横幅を 300px と設定しています。 この親要素に対して 100% で画像を表示してみます。
サンプルコード: HTML (親要素の100%比率)
<body>
<img src="ywork.png" width="100%" alt="画像サイズのサンプル">
</body>
続いては、画像の横幅を 75px に指定した例です。 画像の高さは指定していませんので、横幅との相対比率で高さも変更されます。
サンプルコード: HTML (width="75px")
<body>
<img src="ywork.png" width="75px" alt="画像サイズのサンプル">
</body>
最後のサンプルは 画像の横幅と高さの両方を指定しています。
サンプルコード: HTML (width="150px" height="50px")
<body>
<img src="ywork.png" width="150px" height="50px" alt="画像サイズのサンプル">
</body>
使用できる属性
補足
指定できる画像形式は、gif. jpg. png などがよく使われているようです。
src 属性は必須です。これには埋め込みたい画像ファイルのURL指定します。
alt 属性は画像の説明をテキストで表します。これは必須ではありませんが、画像が表示されない環境の場合に代替えテキストとして使用されるため、 何を表している画像かという適切な情報があることはユーザーにとって親切です。 また、SEO の観点からみても画像の alt 属性は重要視されています。