4カラムレイアウト／3:2画像／srcset sizes 完全版
3:2比率の画像とsrcset sizesを使った4カラムのレスポンシブのレイアウトサンプル。
4-4-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex gap-14s6">
<div class="flex-4-4-2-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-4-2-2-450-300.jpg 225w,
https://example.com/img/img-4-2-2-372-248.jpg 372w,
https://example.com/img/img-4-2-2-420-280.jpg 420w,
https://example.com/img/img-4-2-2-450-300.jpg 450w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-4-2-2-450-300.jpg"
alt="テスト画像" width="450" height="300" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 186px, (max-width:464px) 210px, 225px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-450-300.jpg 225w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-450-300.jpg 450w
srcsetの中に「225w」「450w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 186px, (max-width:464px) 210px, 225px"
sizesで「225px」と設定として、PC表示の時に
- 372px（表示サイズ186px）
- 420px（表示サイズ210px）
- 450px（表示サイズ225px）
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」「464px」「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。
■PC用レイアウトの時の注意
※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-14s6とflex-4-4-2-for-3-2で調整。
4-3-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex gap-14s6">
<div class="flex-4-3-2-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-4-3-2-450-300.jpg 225w,
https://example.com/img/img-4-3-2-372-248.jpg 372w,
https://example.com/img/img-4-3-2-420-280.jpg 420w,
https://example.com/img/img-4-3-2-450-300.jpg 450w,
https://example.com/img/img-4-3-2-546-364.jpg 546w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-4-3-2-546-364.jpg"
alt="テスト画像" width="546" height="364" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 186px, (max-width:464px) 210px, (max-width:880px) 273px, 225px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-4-3-2-450-300.jpg 225w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-4-3-2-450-300.jpg 450w
srcsetの中に「225w」「450w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 186px, (max-width:464px) 210px, (max-width:880px) 273px, 225px"
sizesで「225px」と設定として、PC表示の時に
- 372px（表示サイズ186px）
- 420px（表示サイズ210px）
- 450px（表示サイズ225px）
- 546px（表示サイズ273px）
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」「464px」「880px」「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。
■PC用レイアウトの時の注意
※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-14s6とflex-4-3-2-for-3-2で調整。
4-2-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex gap-14s6">
<div class="flex-4-2-2-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-4-2-2-450-300.jpg 225w,
https://example.com/img/img-4-2-2-372-248.jpg 372w,
https://example.com/img/img-4-2-2-420-280.jpg 420w,
https://example.com/img/img-4-2-2-450-300.jpg 450w,
https://example.com/img/img-4-2-2-834-556.jpg 834w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-4-2-2-834-556.jpg"
alt="テスト画像" width="834" height="556" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 186px, (max-width:464px) 210px, (max-width:880px) 417px, 225px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-450-300.jpg 225w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-4-2-2-450-300.jpg 450w
srcsetの中に「225w」「450w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 186px, (max-width:464px) 210px, (max-width:880px) 417px, 225px"
sizesで「225px」と設定として、PC表示の時に
- 372px（表示サイズ186px）
- 420px（表示サイズ210px）
- 450px（表示サイズ225px）
- 834px（表示サイズ417px）
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」「464px」「880px」「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。
■PC用レイアウトの時の注意
※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-14s6とflex-4-2-2-for-3-2で調整。
Menu
