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属性 | 表示画像サイズの最適化（メディアクエリ表示サイズ） |
対応ブラウザ
対応ブラウザは以下の通りです。
| 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
