HTML

【画像】img要素

みいと

img要素で画像を表示する

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

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

src属性で画像を指定する

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

src=”画像ファイル名”

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

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

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

alt=”代替テキスト”

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

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

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

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

  • figcaption要素に画像のキャプションを設定する
  • figcaption要素とimg要素をfigure要素の子要素にする
<figure>
  <figcaption>キャプション</figcaption>
  <img src="img/img.png" alt="サンプル画像" />
</figure>

img要素のまとめ

最後にimg要素のまとめ。
まとめ

  • 画像を表示するにはimg要素を使う
  • 表示する画像はsrc属性で指定する
  • alt属性で代替テキストを設定する
  • 画像は絶対パス、または相対パスで指定する
  • キャプションを付ける場合はfigure要素・figcaption要素を使う

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました