4カラムレイアウト／16:9画像／srcset sizes 完全版
16:9比率の画像とsrcset sizesを使った4カラムのレスポンシブのレイアウトサンプル。
4-4-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-4-4-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-4-2-2-448-252.jpg 224w,
https://example.com/img/img-4-2-2-384-216.jpg 384w,
https://example.com/img/img-4-2-2-416-234.jpg 416w,
https://example.com/img/img-4-2-2-448-252.jpg 448w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-4-2-2-448-252.jpg"
alt="テスト画像" width="448" height="252" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 192px, (max-width:464px) 208px, 224px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-448-252.jpg 224w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-448-252.jpg 448w
srcsetの中に「224w」「448w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 192px, (max-width:464px) 208px, 224px"
sizesで「224px」と設定として、PC表示の時に
- 384px（表示サイズ192px）
- 416px（表示サイズ208px）
- 448px（表示サイズ224px）
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。
4-3-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-4-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-4-3-2-448-252.jpg 224w,
https://example.com/img/img-4-3-2-384-216.jpg 384w,
https://example.com/img/img-4-3-2-416-234.jpg 416w,
https://example.com/img/img-4-3-2-448-252.jpg 448w,
https://example.com/img/img-4-3-2-544-306.jpg 544w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-4-3-2-544-306.jpg"
alt="テスト画像" width="544" height="306" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 192px, (max-width:464px) 208px, (max-width:880px) 272px, 224px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-4-3-2-448-252.jpg 224w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-4-3-2-448-252.jpg 448w
srcsetの中に「224w」「448w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 192px, (max-width:464px) 208px, (max-width:880px) 272px, 224px"
sizesで「224px」と設定として、PC表示の時に
- 384px（表示サイズ192px）
- 416px（表示サイズ208px）
- 448px（表示サイズ224px）
- 544px（表示サイズ272px）
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。
4-2-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-4-2-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-4-2-2-448-252.jpg 224w,
https://example.com/img/img-4-2-2-384-216.jpg 384w,
https://example.com/img/img-4-2-2-416-234.jpg 416w,
https://example.com/img/img-4-2-2-448-252.jpg 448w,
https://example.com/img/img-4-2-2-832-468.jpg 832w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-4-2-2-832-468.jpg"
alt="テスト画像" width="832" height="468" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 192px, (max-width:464px) 208px, (max-width:880px) 416px, 224px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-448-252.jpg 224w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-448-252.jpg 448w
srcsetの中に「224w」「448w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 192px, (max-width:464px) 208px, (max-width:880px) 416px, 224px"
sizesで「224px」と設定として、PC表示の時に
- 384px（表示サイズ192px）
- 416px（表示サイズ208px）
- 448px（表示サイズ224px）
- 832px（表示サイズ416px）
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。
Menu
