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