最適な画像サイズを選択する

<img src="画像のURL" srcset="" sizes="">でユーザーの閲覧環境に応じた最適な画像サイズを選択できます。色々な環境で閲覧しているユーザーのことを考えてウェブデザインすることをレスポンシブデザインといいます。

・srcset属性には複数の画像サイズのファイル名の後に幅記述子wを記述します。画像サイズを自動選択するための属性です。

・sizes属性はメディアクエリを使い画像の表示サイズの切り替えを指定し画像サイズを自動選択するための属性です。メディアクエリとはユーザーの閲覧環境に応じて適用スタイルを切り替えるCSS（スタイルシート）の機能のことです。

sizes属性ではvw等の値を使用します。vwはviewport widthの略で vhはviewport heightの略になります。ビューポート（viewport）とはブラウザのウィンドウ幅のことです。100vw, 1000pxのように値1カンマスペース値2のように記述します。

単位	説明
vw	ウィンドウの横幅を100%とした割合
vh	ウィンドウの高さを100%とした割合
vmin	ウィンドウの横幅と高さの小さい方の値に対する割合
vmax	ウィンドウの横幅と高さの大きい方の値に対する割合
max-width	幅の最大値（値が100pxなら100px以下という意味）
min-width	幅の最小値（値が100pxなら100px以上という意味）

2枚の画像を用意します。namikimichi.jpg（並サイズのイラスト）と　namikimichi_mini.jpg（小サイズのイラスト）です。下の例ではウィンドウ幅（ブラウザ幅）が300pxまではnamikimichi_mini.jpgの画像が表示され、 301px～600pxまでならMAXまで設定したウィンドウ幅の100％（600px × 100% = 600px)のサイズが表示され、ウィンドウ幅（ブラウザ幅）が 601px以上であれば画像幅は40pxで表示されるという意味になります。

【ブラウザ表示】（Microsoft Edgeで表示確認済み）

例のページでブラウザを最小化ボタンを押し少しディスプレイ画面より小さくして右端にマウスをポイントし両矢印マークが表示されたら３つのテーブルに向かって左にスライドして下さい。サイズが変化する位置がわかりやすいです。

並木道のイラスト

ソース

■ その他の項目

・最適な画像を使い分ける

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧

Follow @hp_master_2003

<img src="画像のURL" srcset="" sizes="">で ユーザーの閲覧環境に応じた最適な画像サイズを選択できます。 色々な環境で閲覧しているユーザーのことを考えてウェブデザインすることを レスポンシブデザインといいます。

■ その他の項目

<img src="画像のURL" srcset="" sizes="">でユーザーの閲覧環境に応じた最適な画像サイズを選択できます。色々な環境で閲覧しているユーザーのことを考えてウェブデザインすることをレスポンシブデザインといいます。