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