|
<img src="画像のURL" srcset="" sizes="">で ユーザーの閲覧環境に応じた最適な画像サイズを選択できます。 色々な環境で閲覧しているユーザーのことを考えてウェブデザインすることを レスポンシブデザインといいます。・srcset属性には複数の画像サイズのファイル名の後に幅記述子wを記述します。 画像サイズを自動選択するための属性です。 ・sizes属性はメディアクエリを使い画像の表示サイズの切り替えを指定し 画像サイズを自動選択するための属性です。 メディアクエリとはユーザーの閲覧環境に応じて適用スタイルを切り替えるCSS（スタイルシート）の機能のことです。 sizes属性ではvw等の値を使用します。vwはviewport widthの略で vhはviewport heightの略になります。 ビューポート（viewport）とはブラウザのウィンドウ幅のことです。100vw, 1000pxのように 値1カンマ スペース値2のように記述します。
2枚の画像を用意します。namikimichi.jpg（並サイズのイラスト）と namikimichi_mini.jpg（小サイズのイラスト）です。 下の例ではウィンドウ幅（ブラウザ幅）が300pxまではnamikimichi_mini.jpgの画像が表示され、 301px～600pxまでならMAXまで設定したウィンドウ幅の100％（600px × 100% = 600px)のサイズが表示され、ウィンドウ幅（ブラウザ幅）が 601px以上であれば画像幅は40pxで表示される という意味になります。 【ブラウザ表示】（Microsoft Edgeで表示確認済み） 例のページでブラウザを最小化ボタンを押し少しディスプレイ画面より小さくして右端にマウスをポイントし両矢印マークが表示されたら ３つのテーブルに向かって左にスライドして下さい。サイズが変化する位置がわかりやすいです。ソース <img src="./image/namikimichi.jpg" srcset="./image/namikimichi_mini.jpg 300w" sizes="(max-width:600px) 100vw, 40px" alt="並木道のイラスト"> ■ その他の項目・ 最適な画像を使い分ける
|
