Modern HTML 1-3｜見出し・文章・コンテンツの意味設計｜見た目ではなく意味からHTMLを選ぶ
toshi
ToshiLab
Modern HTML 1-6｜画像・メディア・レスポンシブHTML｜img・picture・audio・videoを使いこなす
toshi
記事内に商品プロモーションを含む場合があります
最終更新：2026年10月2日
HTMLを順番に学びたい方へ
この記事は、ToshiLabのWEBプログラミング学習記事の一部です。
HTMLを基礎から順番に確認したい方は、WEBプログラミングの入口から進められます。
目次
- この回で分かること
- 前回のミニチェック｜Modern HTML 1-5 回答・解説
- img要素の基本と画像の伝え方
- width・heightで画像読み込み前の領域を確保する
- loading=”lazy”で画面外の画像を遅延読み込みする
- レスポンシブ画像をHTMLで設計する
- picture・sourceで画像そのものを切り替える
- picture・sourceは画像形式の切り替えにも使える
- figure・figcaptionで画像と説明をひとまとまりにする
- audio・videoで音声と動画を扱う
- videoではposterやpreloadも使える
- trackで字幕・キャプションを追加する
- autoplayは慎重に使う
- HTML・CSS・JavaScriptの役割を分ける
- 実務ではどこで使う？
- 今回できるようになったこと
- Modern HTML 1-6 ミニチェック
- まとめ
- 前回を確認する
- 次に読む
この回で分かること
Modern HTML 1-5では、details・summary・dialog・popoverなどを使い、
JavaScriptを書く前にHTML標準でできることを確認する
というNative HTML Firstの考え方を学びました。
Modern HTML 1-6では、対象を画像・音声・動画へ広げます。
今回扱う主な内容は、
・img要素とaltの考え方
・width・heightによる表示領域の確保
・loading=”lazy”による遅延読み込み
・srcset・sizesによるレスポンシブ画像
・picture・sourceによる画像の切り替え
・画像形式の選び方
・audio・videoによるメディアの埋め込み
・sourceによる複数形式の指定
・trackによる字幕・キャプション
・HTML・CSS・JavaScriptの役割分担
です。
画像は、
「ページに表示できれば終わり」
ではありません。
意味、読み込み、レイアウト、画面幅、通信量、アクセシビリティまで考えてHTMLを組み立てることで、より扱いやすいWebページになります。
前回のミニチェック｜Modern HTML 1-5 回答・解説
Modern HTML 1-5では、HTMLだけで作れるインタラクションを学びました。
Q1｜FAQの回答を必要なときだけ開く場合は？
答えは、
details・summary
が候補です。
基本的な開閉だけであれば、ブラウザ標準の動作を利用できます。
FAQや補足説明のように、
「必要な人だけ開いて確認する」
内容と相性があります。
Q2｜重要な削除確認ならdialogとpopoverのどちら？
答えは、
dialog
が候補です。
「本当に削除しますか？」
のように、ユーザーへ明確な判断や対応を求める内容は対話UIとして扱うのが自然です。
一方、popoverはヒントや簡単なメニューなど、一時的な補足UIに向いています。
Q3｜APIの結果に応じて複数UIを連動させる場合もHTMLだけ？
答えは、
いいえ。必要ならJavaScriptを使います。
Native HTML Firstは、
「JavaScriptを使ってはいけない」
という考え方ではありません。
HTML標準で意味と基本動作を作り、
・APIとの通信
・複雑な状態管理
・複数UIの連動
・動的な生成や更新
などが必要になったところでJavaScriptを追加します。
まずHTML、それで不足する部分をJavaScriptで補う。
これがModern HTML 1-5で確認した考え方です。
画像やメディアでもNative HTML Firstは同じです。
まず、
HTMLが持っている画像・メディア用の仕組みを正しく使う
ことから始めます。
そのうえで、
見た目やレイアウトはCSS、
複雑な操作や動的な制御はJavaScript、
というように役割を広げます。
PR：最初の1冊目（必要な方だけ）
PR：Modern HTML 学習の最初の参考書として、必要な方だけ見てください。
出版社自身が「HTMLの基本を一度学んだ人が再入門・ステップアップする本」と位置づけており、内容もHTML仕様、セマンティクス、主要要素、フォーム、インタラクティブ要素、WAI-ARIAまで扱っています。今回の「初心者HTMLをやり直すのではなく、現在のHTMLへ知識をアップデートする」というシリーズ方針とかなり近いです。
※価格や在庫、版数は変わるため、最終確認はリンク先でお願いします。
リンク
img要素の基本と画像の伝え方
HTMLで画像を表示するときの基本となるのがimg要素です。
しかし、imgは単に画像ファイルを画面へ貼り付けるためだけの要素ではありません。
画像のURLだけでなく、
・画像が何を伝えるのか
・読み込み前にどれくらいの領域が必要なのか
・すぐ読み込む必要があるのか
といった情報もHTMLからブラウザへ伝えられます。
まずimg・alt・width・heightの基本形を確認します。
<img
src="lake.webp"
alt="湖の向こうに山並みが広がる風景"
width="1200"
height="800"
>altはファイル名を書く場所ではない
altは、
画像が伝えている内容や役割をテキストで伝えるための属性
です。
例えば、
mountain-01.webp
というファイル名だからといって、
alt=”mountain-01.webp”
とするわけではありません。
記事の中で、
「湖の向こうに山が見える風景」
を読者へ伝える画像なら、その文脈に合った代替テキストを考えます。
重要なのは、
画像だけが見えなくても、その情報をどのように補えるか
です。
装飾だけの画像はaltを空にすることがある
すべての画像に説明文を書くわけでもありません。
背景的な飾りや、内容の理解に影響しない装飾画像では、
alt=””
を指定することがあります。
次の意味のある画像と装飾画像の例で確認します。
<img
src="profile-photo.webp"
alt="ToshiLabの記事制作画面"
width="800"
height="533"
>
<img
src="background-decoration.webp"
alt=""
width="400"
height="400"
>altは、
「画像には必ず何か文章を書かなければならない」
という欄ではありません。
その画像が本文でどのような役割を持つのかを考え、
意味のある画像なら適切な代替テキストを、
純粋な装飾なら空のaltを、
というように判断します。
リンクやボタンの画像では役割をaltで伝える
画像がリンクやボタンとして使われている場合には、単に画像の見た目を説明するのではなく、
その画像を操作すると何が起こるのか
を伝えることが重要です。
altは画像ファイルそのものを説明する欄ではなく、そのページ内で画像が持っている意味や役割から考えます。
width・heightで画像読み込み前の領域を確保する
imgにはwidthとheightを指定できます。
これは単に、
「画像を600pxで表示する」
という見た目だけの話ではありません。
画像本来の縦横比をブラウザが早い段階で把握できるため、画像が読み込まれる前から必要な表示領域を確保しやすくなります。
その結果、
画像が後から読み込まれて文章が大きく動く
といったレイアウトのずれを抑えやすくなります。
img・alt・width・heightの基本でもwidthとheightを指定しています。
loading=”lazy”で画面外の画像を遅延読み込みする
長いページでは、最初からすべての画像を読み込む必要がない場合があります。
画面のかなり下にある画像なら、
loading=”lazy”
を指定することで、ブラウザへ遅延読み込みのヒントを伝えられます。
lazy loadingと重要画像の例で確認します。
<!-- ページ上部の重要な画像 -->
<img
src="hero.webp"
alt="Modern HTMLシリーズのメインビジュアル"
width="1536"
height="1024"
fetchpriority="high"
>
<!-- 画面下部にある画像 -->
<img
src="article-example.webp"
alt="レスポンシブ画像の設定例"
width="1536"
height="1024"
loading="lazy"
>ただし、
すべての画像へloading=”lazy”を付ければよい
というわけではありません。
ページを開いた直後に表示される重要な画像まで遅延させると、かえって表示が遅く感じられることがあります。
画面外の画像にはlazy loadingを検討し、
最初から必要な画像は通常どおり読み込む、
という使い分けが大切です。
発展｜fetchpriorityという選択肢
特に重要な画像については、
fetchpriority=”high”
で取得優先度のヒントをブラウザへ伝える方法もあります。
ただし、すべての画像をhighにすれば速くなるわけではありません。
優先度を上げすぎると他の重要なリソースと競合するため、
本当に重要な画像へ限定して検討する
機能です。
レスポンシブ画像をHTMLで設計する
CSSで画像を、
max-width: 100%;
のように縮めれば、画面からはみ出さない表示を作ることはできます。
しかし、
スマートフォンでもPC用の大きな画像ファイルを毎回ダウンロードしていたら、
見た目はレスポンシブでも、配信する画像までは最適化されていません。
そこでHTMLでは、
・srcset
・sizes
・picture
・source
を使って、
どの画像をブラウザへ届けるか
まで設計できます。
srcsetで画像候補を用意する
srcsetでは、
ブラウザが選択できる複数の画像候補を指定できます。
例えば、
・480px幅
・800px幅
・1200px幅
の画像を用意し、それぞれの実際の幅をw記述子で伝えます。
sizesで画像がどれくらいの幅で表示されるか伝える
srcsetに幅記述子を使う場合、sizesを組み合わせます。
sizesは、
現在のレイアウトでは、この画像がどれくらいの幅で表示される予定なのか
というヒントをブラウザへ伝えます。
srcset・sizesの例で確認します。
<img
src="landscape-800.webp"
srcset="
landscape-480.webp 480w,
landscape-800.webp 800w,
landscape-1200.webp 1200w
"
sizes="
(max-width: 600px) 100vw,
(max-width: 1024px) 80vw,
800px
"
alt="湖と山が広がる風景"
width="1200"
height="800"
>ブラウザは、
srcsetに用意された候補とsizesの情報などを使いながら、適切な画像を選びます。
そのため、
「スマートフォンなら必ず480w」
とHTML側が固定的に命令しているわけではありません。
候補と条件を伝え、最終的な選択をブラウザへ任せる
という考え方です。
picture・sourceで画像そのものを切り替える
srcset・sizesは、
同じ内容の画像について、適切な解像度を選ばせたい場合に向いています。
一方で、
スマートフォンでは人物を大きく見せたい、
PCでは背景まで含めた横長画像を見せたい、
というように構図そのものを変更したい場合があります。
このような考え方を、
アートディレクション
と呼びます。
pictureとsourceを使うことで、表示条件に合わせて異なる画像を候補として指定できます。
pictureによるアートディレクションの例で確認します。
<picture>
<source
media="(max-width: 600px)"
srcset="hero-mobile.webp"
width="600"
height="800"
>
<source
media="(max-width: 1024px)"
srcset="hero-tablet.webp"
width="1024"
height="768"
>
<img
src="hero-desktop.webp"
alt="湖の向こうに山が広がる風景"
width="1200"
height="675"
>
</picture>pictureには最後にimgを置く
pictureを使う場合でも、最後にはimgを置きます。
picture内のsourceは、表示条件や画像形式に応じた画像候補を
ブラウザへ伝える役割を持ちます。
一方、実際の画像要素となるのはimgです。
sourceの条件に一致する候補がない場合には、imgのsrcがフォールバックとして使われます。
画像の代替テキストとなるaltも、基本的にはこのimgへ設定します。
picture・sourceは画像形式の切り替えにも使える
pictureは画面幅だけではなく、
ブラウザが対応している画像形式
によって候補を切り替える用途にも使えます。
例えば、
・AVIF
・WebP
・JPEG
の候補を用意し、対応形式から選択させる構成です。
画像形式を切り替える参考例で確認します。
<picture>
<source
srcset="hero.avif"
type="image/avif"
>
<source
srcset="hero.webp"
type="image/webp"
>
<img
src="hero.jpg"
alt="湖と山が広がる風景"
width="1200"
height="800"
>
</picture>画像形式は、
「写真だから絶対JPEG」
「透過だから絶対PNG」
と固定的に決めるのではなく、
・画質
・透過の必要性
・ファイルサイズ
・ブラウザ対応
・制作フロー
・元画像の特徴
などから判断します。
figure・figcaptionで画像と説明をひとまとまりにする
Modern HTML 1-3で学んだfigureとfigcaptionも、画像記事では重要です。
画像とそのキャプションを、
ひとつの自己完結したまとまりとして扱う意味がある場合
にはfigureが候補になります。
figure・figcaptionを使った例で確認します。
<figure>
<img
src="responsive-image-example.webp"
alt="PC・タブレット・スマートフォンで異なる画像表示を比較した例"
width="1200"
height="800"
>
<figcaption>
画面幅や表示条件に合わせて適切な画像を届ける例
</figcaption>
</figure>ただし、
画像があるから必ずfigureにする
というルールではありません。
本文の一部として普通に配置する画像ならimgだけで十分な場合もあります。
audio・videoで音声と動画を扱う
HTMLには、音声を扱うaudioと動画を扱うvideoがあります。
外部プレイヤーや独自JavaScriptを用意しなくても、
ブラウザ標準の再生UIを使って基本的な再生ができます。
さらにsourceを使えば複数形式を用意でき、trackを使えば字幕やキャプションなどの時間同期テキストも追加できます。
controlsでブラウザ標準の再生UIを使う
audioやvideoにcontrolsを指定すると、
ブラウザが再生・一時停止・音量・シークなどの基本操作UIを提供します。
まずaudio・controls・sourceを使った例で確認します。
<audio controls preload="metadata">
<source
src="voice.opus"
type="audio/ogg; codecs=opus"
>
<source
src="voice.mp3"
type="audio/mpeg"
>
<p>
お使いのブラウザはaudio要素に対応していません。
<a href="voice.mp3">音声ファイルを開く</a>
</p>
</audio>sourceを複数用意すると、ブラウザは再生可能な候補を順番に確認できます。
typeでMIMEタイプを伝えておくと、ブラウザが再生できる形式か判断しやすくなります。
音声だけのコンテンツでは文字起こしも考える
audioで音声を再生できるようにするだけでは、音声を聞くことができないユーザーへ内容を伝えられない場合があります。
ポッドキャストや音声解説など、録音済みの音声だけで情報を提供する場合には、内容をテキストで確認できる文字起こし（transcript）も用意することを検討します。
HTMLのaudio要素で再生できることと、コンテンツ自体へアクセシブルにアクセスできることは別の問題です。
メディアを表示・再生できれば完成ではなく、その情報をどのように利用できるかまで考える
ことが大切です。
videoではposterやpreloadも使える
videoも基本的な考え方はaudioと同じです。
controlsとsourceを使って動画を提供できます。
さらに、
poster
で再生前に表示する画像を指定できます。
preloadでは、
ページ表示時にメディアをどの程度事前読み込みしてほしいかというヒントをブラウザへ伝えられます。
video・poster・preloadを使った例で確認します。
<video
controls
preload="metadata"
poster="video-poster.webp"
width="1280"
height="720"
>
<source
src="movie.webm"
type="video/webm"
>
<source
src="movie.mp4"
type="video/mp4"
>
<p>
お使いのブラウザはvideo要素に対応していません。
<a href="movie.mp4">動画ファイルを開く</a>
</p>
</video>preloadはブラウザへのヒントです。
指定したからといって、必ずその通りの読み込みになるとは限りません。
trackで字幕・キャプションを追加する
動画は、
映像と音声が再生できれば完成
とは限りません。
会話内容を文字で確認したいユーザーや、音声を聞けない環境で閲覧しているユーザーもいます。
trackを使うと、WebVTT形式のファイルを関連付けて、
・字幕
・キャプション
・チャプター
・説明
などの時間同期テキストを提供できます。
trackでキャプションを提供する例を確認します。
<video
controls
preload="metadata"
width="1280"
height="720"
>
<source
src="lesson.mp4"
type="video/mp4"
>
<track
kind="captions"
src="captions-ja.vtt"
srclang="ja"
label="日本語キャプション"
default
>
</video>subtitlesとcaptionsは同じではない
subtitlesは主に、
会話内容を別の言語などで文字として提供する
用途です。
captionsは、
会話だけでなく、
・効果音
・音楽
・話者
・重要な音声情報
など、音を聞かなくても内容を理解しやすくする情報を含めることがあります。
autoplayは慎重に使う
audioやvideoにはautoplayがあります。
しかし、
ページを開いた瞬間に突然音が鳴る
動作は、ユーザー体験を大きく損なう可能性があります。
また、現在のブラウザでは音声付きメディアの自動再生が制限される場合があります。
そのため、
自動再生できるから使う
のではなく、
本当に必要な場面なのかを考えます。
HTML・CSS・JavaScriptの役割を分ける
画像やメディアでも、
HTMLだけですべてを完成させる必要はありません。
HTMLでは、
・画像やメディアの意味
・画像候補
・表示条件
・再生可能なソース
・標準コントロール
・字幕やキャプション
などを指定します。
CSSでは、
・表示サイズ
・レイアウト
・余白
・object-fit
・レスポンシブな見た目
などを調整します。
JavaScriptは、
・独自プレイヤー
・高度な再生制御
・動的なソース変更
・状態連携
・解析や独自操作
などが必要になった場合に追加します。
画像や動画を見たら、
すぐにCSSやJavaScriptから考えるのではなく、
HTMLに目的に合った標準機能がないか
を先に確認します。
HTMLで意味と基本機能、
CSSで見た目、
JavaScriptで必要な拡張。
この順序を持つと、役割を整理しやすくなります。
実務ではどこで使う？
ブログや技術記事の画像
alt・width・heightを適切に設定し、画面外の画像ではloading=”lazy”を検討します。
ToshiLabの記事画像も、この考え方と直接つながります。
アイキャッチやヒーロー画像
ページ上部の重要な画像は、何でもlazy loadingにするのではなく、初期表示との関係を考えます。
必要に応じてsrcset・sizesや画像形式の最適化も検討します。
商品・作品・ポートフォリオ画像
画面幅に応じて適切な解像度を選ばせる場合はsrcset・sizesが候補になります。
スマートフォンだけ構図を変えたい画像
PCでは横長、スマートフォンでは被写体を大きく見せるなど、構図そのものを変える場合はpicture・sourceによるアートディレクションを検討できます。
音声コンテンツ
ナレーション、ポッドキャスト、音声サンプルなどではaudioが候補になります。
動画コンテンツ
操作説明、デモ、講座などではvideoを利用でき、trackによる字幕・キャプションも検討します。
今回できるようになったこと
・img要素の基本を理解できる
・画像の役割からaltを考えられる
・装飾画像でalt=””を使う理由を理解できる
・width・heightで表示領域を確保できる
・loading=”lazy”を使う場面を判断できる
・srcsetとsizesの役割を説明できる
・picture・sourceでアートディレクションができる
・画像形式を条件から選ぶ考え方を持てる
・figure・figcaptionを適切に使える
・audio・videoの基本を理解できる
・複数のsourceを用意できる
・trackで字幕・キャプションを提供できる
・autoplayを慎重に判断できる
・HTML・CSS・JavaScriptの役割を分けて考えられる
Modern HTML 1-6 ミニチェック
Q1
記事本文のかなり下にある説明画像があります。
ページを開いた瞬間には必要ありません。
この画像の初期読み込み負荷を抑えるため、img要素で検討できる属性は何でしょうか？
Q2
同じ写真について、
480px・800px・1200px幅の画像を用意しました。
ブラウザに複数の画像候補を伝え、レイアウト上の表示幅をヒントとして渡したい場合、主にどの2つの属性を組み合わせるでしょうか？
Q3
動画内の会話だけでなく、
効果音や話者などの音声情報も文字で伝えたいとします。
trackのkindでは、
subtitlesとcaptionsのどちらがより目的に合うでしょうか？
ミニチェックの答えは次の記事の冒頭に掲載します。
「Modern HTML｜ミニチェック回答・解説」
で確認できるようにします。
回答集では正解だけでなく、
なぜその要素になるのか
まで解説します。
まとめ
Modern HTML 1-6では、
画像・レスポンシブ画像・音声・動画をHTMLで扱う方法を学びました。
今回の大きなポイントは、
メディアは「表示できたら完成」ではない
ということです。
画像では、
意味を伝えるalt、
レイアウトを安定させるwidth・height、
読み込みを調整するloading、
適切な画像を届けるsrcset・sizes・picture・source
があります。
音声・動画では、
audio・video、
controls、
source、
track
など、ブラウザ標準の仕組みを利用できます。
HTMLが用意している機能を理解したうえで、
CSSやJavaScriptを必要な部分へ追加する。
画像やメディアでも、
Native HTML First
の考え方は変わりません。
前回を確認する
Modern HTML 1-5では、
details・dialog・popoverを使ったHTML標準のインタラクション
について整理しました。
Modern HTML 1-5 | details・dialog・popoverを使ったHTML標準のインタラクション
Modern HTML 1-5｜HTMLだけで作れるインタラクション｜details・dialog・popoverを使う
次に読む
次回は、
Modern HTML 1-7｜HTMLとアクセシビリティ
へ進みます。
HTML要素が持っている意味やブラウザ標準の機能を、
キーボード操作・支援技術・ラベル・ランドマークなどの観点から整理します。
ミニチェックの回答は1-7で掲載
Modern HTML 1-7｜HTMLとアクセシビリティ｜セマンティクス・キーボード操作・ARIAの基本
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
