ページ内に画像を挿入するimgタグの解説+応用編!HTMLタグとは?

HTMLを学習していると必ず出てくるのが、画像を挿入する<img>タグについて。一見シンプルなタグですが、以外にも初心者がつまづくポイント。

今回はそんなimgタグについて、使い方からフォルダの階層、CSSでの装飾方法まで、サンプルコードを参考にしながらご紹介していきます!

HTMLで画像を挿入するにはどうすればいいの?

今回は、imgタグの

・基本的な使い方
・imgタグの頻出属性の使い方
・レスポンシブな画像の表示

について説明します。

imgタグとは

imgタグの読み方

imgタグは「イメージタグ」と読みます。英語のImageが短縮され、imgタグとして使われています。

imgタグの説明

imgタグはHTML内で画像を挿入する際に使用します。パソコン内に保存している画像を挿入する他、URLを指定して画像を挿入する方法があります。

パソコン内に保存している画像を挿入する方法は、画像までのパスがややこしいことが多いですが、自分で画像を削除しない限り画像が表示され続けます。

対称にURLを指定する方法では、URLを張り付けるだけなので設定は簡単ですが、その画像自体が削除されてしまえば画像は表示されなくなってしまいます。作成されてから更新されずに存在するサイトを閲覧した際、画像が表示されなくなっているシーンをよく見かけるのではないでしょうか?

▽リンク切れで表示されなくなった画像

imgタグで利用できる属性

imgタグでは以下の属性を使うことができます。

属性 説明
src属性 画像のURLを指定
alt属性 画像の説明テキスト・画像が表示されなかった際の代替テキスト
height属性 画像の高さ指定
width属性 画像の幅指定
usemap属性 イメージマップ名を指定する
ismap属性 サーバサイドのイメージマップ指定
srcset属性 画像の選択候補・表示画像のサイズ最適化(URL横幅、URL比率)
sizes属性 表示画像サイズの最適化(メディアクエリ表示サイズ)
注意
HTML5が公開され、画像の配置を指定するalign属性はサポートされなくなりました。同等の設定をするには、CSSのプロパティで指定しましょう。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12~
Firefox  1~
Internet Explorer  4~
Opera  6~
Safari  1~
スマートフォン用ブラウザ 対応状況
Android webview  対応あり
Android版Chrome 対応あり
Android版Firefox  対応あり
Android 版 Opera  対応あり
iOS版Safari  対応あり
Samsung Internet  対応あり

imgタグの基本的な使い方

imgタグの使い方

imgタグは<body></body>の間に記載します。ここではネット上の画像をURL指定して画像を張り付けました。

src属性に””(ダブルクォーテーション)でURLを記載し、URLが切れてしまったなど、画像が表示されなくなっても何の画像があったか分かるように、altには画像の名前を指定しておきます。

See the Pen
pobpBKK
by rabbittyu (@rabbittyu)
on CodePen.

実際にはこのようにして、タイトルや本文と合わせて画像を表示させます。なんだか本当に公開されているホームページっぽくなってきましたね!ここでは画像の縦サイズをheight属性を使って1000pxに、横サイズをwidth属性を使って1800pxに設定しています。

See the Pen
PozEggK
by rabbittyu (@rabbittyu)
on CodePen.

 

imgタグの応用的な使い方

しかしパソコンやスマートフォン、現在は様々な通信機器からインターネットにアクセスするので、「レスポンシブ」なページの設定が求められます。HTML5から新しく追加されたsrcset属性やsizes属性を使用していきましょう!

ここではsrcset属性を使用してレスポンシブな画像を表示します。レスポンシブとは、表示するウィンドウのサイズによって画像の表示サイズも変わるサイトのこと。

See the Pen
zYBpQOg
by rabbittyu (@rabbittyu)
on CodePen.

srcは必須なので、srcを指定した後にsrcsetを記載します。1xや2xがポイント!1xはウィンドウサイズが小さい場合に適用され、さらに大きいウィンドウで表示させた場合は、2xの設定により1xの2倍の画像サイズで表示されます。

まとめ

今回はHTMLで画像を挿入するimgタグについて解説しました!画像を挿入することで、一気にユーザから見てわかりやすいページになりますが、サイズの設定やリンク切れ時の対応など、案外複雑。

最初のうちは何を記載するのか、何でサイズが変わるのか、調べながらの作業になると思いますが慣れてくればいとも簡単に操れます!まずは

  • 画像は<img>タグを使用して挿入する
  • src属性で画像のパスやURLを指定する(必須!)
  • alt属性で画像に名前を付ける

以上の3点のみしっかり抑えておきましょう!

参考文献:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img
http://www.htmq.com/html5/img.shtml
https://www.tagindex.com/html5/embed/img_srcset_sizes.html