VIDEO LESSON

HTMLのimgタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の六十二本目は、アイエムジー、タグです。
0:08アイエムジーは、ウェブページの中に写真や図などの画像を表示するためのタグです。
0:14学習サイトのトップに置くイラストも、記事の中の説明図も、このタグで表示します。
0:20ただし、ただ画像を置けばよいわけではありません。
0:23画像が見られない人にも内容が伝わるようにオルトで説明を付け、幅と高さを伝えて表示の崩れを防ぐことが大切です。
0:31今回は基本の書き方から、レスポンシブ対応まで順番に学びましょう。
0:36基本の書き方を確認します。
0:38アイエムジーは空要素と呼ばれる種類で、終了タグは書きませんし、内側に文章を入れることもありません。
0:45タグ一つで画像が表示されます。
0:47必須に近いのが、ソース属性とオルト属性です。
0:50ソースには表示したい画像ファイルへのパスを書き、オルトには画像の内容を短い文章で書きます。
0:56画面の例では、猫の写真のファイルを指定し、窓辺で眠る猫、という説明を付けています。
1:02画像は見出しや段落と同じように、ボディの中のふさわしい位置に置きましょう。
1:07パスが間違っていると画像は表示されないので、ファイルの場所をよく確認してください。
1:13中心になる二つの属性を詳しく見ます。
1:16ソースは、読み込む画像のユーアールエルやファイルパスです。
1:21存在しない場所を指定すると、壊れた画像のアイコンだけが残ります。
1:26オルトは代替テキストで、画像が読み込めないときや、音声でページを読むスクリーンリーダーを使っているときに、
1:31画像の代わりに伝わる文章です。
1:37画像自体がリンクになっている場合は、見た目ではなくリンク先が分かる文章にすると親切です。
1:44例えばロゴ画像なら、ロゴ、とだけ書くのではなく、サイト名とトップへのリンクであることが伝わる書き方を心がけましょう。
1:53オルトの書き分けは、実務で特に大切なポイントです。
1:57グラフや図のように情報を持つ画像には、その内容が文字だけでも分かる説明を書きます。
2:04一方、背景の模様や区切り線のような装飾だけの画像は、オルトを空文字にします。
2:11空にすると読み上げの対象から外れ、聞いている人の負担が減ります。
2:16また、オルトの文章に、画像、とか、写真、といった言葉を重ねて書く必要はありません。
2:23何が写っているか、何を伝える図なのか、その核心だけを簡潔にまとめましょう。
2:29判断に迷ったら、その画像が見えなくても内容が理解できるか、を基準にしてください。
2:36次に、幅と高さを表す、ウィドゥスとハイトです。
2:40この二つを書いておくと、ブラウザーは画像を読み込む前から、縦横比をもとに表示する場所の大きさを予測できます。
2:50場所が先に確保されていれば、画像が表示された瞬間に下の文章が押し下げられる、
2:56いわゆるレイアウトのガタつきが起きにくくなります。
3:02ここで書く数値は、画像本来の寸法や比率を伝えるもので、画面上の見た目の大きさはシーエスエスで調整するのが基本です。
3:12比率が実際と違うと画像がゆがむので、元の画像の縦横比に合わせて正しく書きましょう。
3:20読み込みを助ける属性も見ておきましょう。
3:23ローディングにレイジーを指定すると、画面に近づくまで画像の読み込みを後回しにできます。
3:30ページの下の方にある画像が多いときに有効で、最初の表示を軽くできます。
3:36反対にイーガーは、すぐに読み込むという指定です。
3:39注意したいのは、ページ冒頭の主要な画像です。
3:43そこにレイジーを付けると、肝心の画像の表示が遅れてしまうことがあります。
3:49デコーディングのアシンクは、画像の解析を非同期にするヒントですが、表示を保証する命令ではありません。
3:57役割を理解して使い分けましょう。
3:59スマートフォンとパソコンで同じ大きな画像を使うと、通信量が無駄になりがちです。
4:05そこで使うのが、ソースセットとサイズズです。
4:09ソースセットには、小さい画像と大きい画像など、複数の候補を幅と一緒に並べます。
4:15サイズズには、その画像が画面上でおよそどれくらいの幅で表示されるかの見込みを書きます。
4:22ブラウザーはこの二つと画面の幅や解像度を比べて、ちょうどよい候補を自動で選びます。
4:28書き方は少し複雑ですが、表示が速くなり、画質も保てる便利な仕組みです。
4:34実際のシーエスエスのレイアウトと見込みが合っていることが大切です。
4:39ほかの属性も簡単に押さえます。
4:42クロスオリジンは、別のサイトから画像を取得するときのシーオーアールエスの設定で、
4:46配信側の許可と合わせて使います。
4:51リファラーポリシーは、画像を取得するときに参照元の情報をどこまで送るかを決めるものです。
4:58どちらも必要な場面でだけ指定すれば十分です。
5:01また、画像に説明文を付けたいときは、フィギュアタグで画像を囲み、フィグキャプションで説明を添える書き方がよく使われます。
5:11オルトが画像そのものの代替であるのに対し、キャプションは全員に見える補足説明だ、
5:15と役割を分けると分かりやすいでしょう。
5:20活用例として、学習の順番を示す図を表示してみましょう。
5:24ソースには図のファイルを指定し、オルトには、エイチティーエムエルからシーエスエス、
5:30ジャバスクリプトへ進む学習順、と、図の意味が伝わる文章を書いています。
5:36ウィドゥスとハイトで縦横比を伝え、ページの下の方に置く画像なのでローディングはレイジーにしました。
5:44これで、画像が見える人にも、音声で聞く人にも、読み込み中のレイアウトにも配慮した書き方になります。
5:52練習では、ファイルを保存して再読み込みし、開発者ツールで要素が正しく表示されているか確認してみてください。
6:00ブラウザー互換性を確認します。
6:02記事が参照するエムディーエヌの記録では、アイエムジー要素本体はクロームが一以降、
6:08エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、ごく初期から対応しています。
6:14ソースやオルト、幅と高さといった基本の属性も同様に古くから使えます。
6:19一方で、ローディングはクローム七十七以降やサファリ十五点四以降、ソースセットはクローム三十四以降など、
6:23新しい属性ほど対応開始が遅くなります。
6:28要素が使えることと、すべての属性が使えることは別なので、新しい指定を使うときは個別に確認しましょう。
6:35三百二十ピクセル程度の狭い画面でも画像がはみ出さないか、実機で試すことも大切です。
6:41最後にまとめです。
6:42アイエムジータグは、画像を表示する空要素で、ポイントは三つでした。
6:47一つ目、ソースでファイルを指定し、オルトで画像の意味を必ず伝えること。
6:53二つ目、情報を持つ画像には内容に合う説明を書き、装飾だけの画像はオルトを空にすること。
7:00三つ目、ウィドゥスとハイトで縦横比を伝えて表示を安定させ、必要に応じてローディングやソースセットで読み込みを最適化することです。
7:10練習として、手元の写真を一枚選び、意味の伝わるオルトと正しい寸法を付けてページに表示してみてください。
7:18お疲れさまでした。
7:19次に画像を置くときは、見た目だけでなく伝わり方まで意識してみましょう。

この動画で学べること

imgタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。画像を表示。内容を伝える alt、寸法の width・height を設定します。装飾画像は alt="" にします。

解説記事・サンプルコードを読む：HTMLのimgタグとは？属性・使い方・ブラウザー互換性と活用例 →