HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎10. img要素-画像を表示させる

      2018/02/22

img要素

img要素(image)は画像を表示する要素です。初期値はインラインの要素です。終了タグはありません。下記のファイルをダウンロードして、コードを記述して画像が表示されるか確認してみてください。
img01.zip

src属性

画像の場所を相対パスまたは、絶対パスで指定します。必須属性ですので省略できません。相対パスと絶対パスは、11章で詳しく解説します。

width属性、height属性

必須属性ではありませんが、記述すると画像の多いページでは、表示が多少早くなります。値の単位は、px指定の場合は単位をつけません。相対値の%の場合は単位をつけます。%は親要素の幅からの相対値です。画像本来のサイズからの相対値ではありません。

alt属性

代替テキストを記述する属性。代替テキストとは画像の説明文です。画像が表示できない通信状態の時に、画像の変わりにテキストが表示されます。また音声ブラウザの場合は、読み上げのテキストになります。alt属性は必須属性です。ただし値を入れるか、入れないかは任意です。これは矢印やアイコンなど説明が必要ない画像もあるからです。先ほどのコードのalt属性の値を省略した場合は下記になります。

alt属性に値がある場合、Googleなどの画像検索でヒットする確率が上がります。
Google ウェブマスター向け公式ブログ「画像検索についての A to Z」

HTMLで使用できる画像は拡張子が .jpg(ジェイペグ), .png(ピング), gif(ジフ)の3種類になります。

まとめ

  • img要素は画像を表示する要素。
  • src属性は画像の場所を指定する属性。
  • width属性、height属性は表示スピードが上がるので指定したほうが良い。
  • alt属性は必須。ただしalt属性の値は場合によって省略しても良い。

 - HTML・CSS