【画像】img要素

img要素で画像を表示する

ブラウザに画像を表示させたいときは空要素のimg要素を使用します。

<img src="画像ファイル名" alt="代替テキスト">

src属性で画像を指定する

img要素では下記のようにsrc属性を使って表示させる画像を指定します。src属性の指定は必須となっています。

指定の方法はリンクと同じく絶対パス、または相対パスで指定します。

alt属性で代替テキストを設定する

画像を見ることが出来ないときなどに、画像の代わりに使用するテキストを設定します。

HTML5ではalt属性の省略が可能なケースもありますが、これにはいろいろな条件があるようです。img要素を使用する場合、基本的にはalt属性を設定する方がよさそうです。

画像にキャプションを付ける

画像にキャプションを付けたい場合はfigcaption要素とfigure要素を使います。

具体的には下記のように設定します。

• figcaption要素に画像のキャプションを設定する
• figcaption要素とimg要素をfigure要素の子要素にする

<figure>
  <figcaption>キャプション</figcaption>
  <img src="img/img.png" alt="サンプル画像" />
</figure>

img要素のまとめ

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。