ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd byGoogle

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

<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で表示確認済み)

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

並木道のイラスト


ソース

<img src="./image/namikimichi.jpg" srcset="./image/namikimichi_mini.jpg 300w" sizes="(max-width:600px) 100vw, 40px" alt="並木道のイラスト">

■ その他の項目

最適な画像を使い分ける

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧

このエントリーをはてなブックマークに追加