3カラムレイアウト／3:2画像／srcset sizes 完全版

■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる

<div class="main-inner flex gap-13">

<div class="flex-3-3-3-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-3-240-160.jpg 240w,
https://example.com/img/img-3-3-3-270-180.jpg 270w,
https://example.com/img/img-3-3-3-612-408.jpg 306w,
https://example.com/img/img-3-3-3-612-408.jpg 612w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-3-612-408.jpg"
alt="テスト画像" width="612" height="408" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 120px, (max-width:464px) 135px, 306px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-3-3-3-612-408.jpg 306w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-3-3-3-612-408.jpg 612w

srcsetの中に「306w」「612w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 120px, (max-width:464px) 135px, 306px"

sizesで「306px」と設定として、PC表示の時に

• 240px（表示サイズ120px）
• 270px（表示サイズ135px）
• 612px（表示サイズ306px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

■画像サイズのイレギュラー

※ウィンドウ幅「416px」と「464px」「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。

■PC用レイアウトの時の注意

※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-13とflex-3-3-3-for-3-2で調整。

■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる

<div class="main-inner flex gap-13">

<div class="flex-3-3-2-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-2-612-408.jpg 306w,
https://example.com/img/img-3-3-2-372-248.jpg 372w,
https://example.com/img/img-3-3-2-420-280.jpg 420w,
https://example.com/img/img-3-3-2-612-408.jpg 612w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-2-612-408.jpg"
alt="テスト画像" width="612" height="408" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 186px, (max-width:464px) 210px, 306px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-3-3-2-612-408.jpg 306w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-3-3-2-612-408.jpg 612w

srcsetの中に「306w」「612w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 186px, (max-width:464px) 210px, 306px"

sizesで「306px」と設定として、PC表示の時に

• 372px（表示サイズ186px）
• 420px（表示サイズ210px）
• 612px（表示サイズ306px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

■画像サイズのイレギュラー

※ウィンドウ幅「416px」と「464px」「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。

■PC用レイアウトの時の注意

※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-13とflex-3-3-2-for-3-2で調整。

■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる

<div class="main-inner flex gap-13">

<div class="flex-3-3-1-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-1-612-408.jpg 306w,
https://example.com/img/img-3-3-1-612-408.jpg 612w,
https://example.com/img/img-3-3-1-768-512.jpg 768w,
https://example.com/img/img-3-3-1-864-576.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-1-864-576.jpg"
alt="テスト画像" width="864" height="576" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, 306px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-3-3-1-612-408.jpg 306w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-3-3-1-612-408.jpg 612w

srcsetの中に「306w」「612w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 384px, (max-width:464px) 432px, 306px"

sizesで「306px」と設定として、PC表示の時に

• 612px（表示サイズ306px）
• 768px（表示サイズ384px）
• 864px（表示サイズ432px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

■画像サイズのイレギュラー

※ウィンドウ幅「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。

■PC用レイアウトの時の注意

※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-13とflex-3-3-1-for-3-2で調整。

■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる

<div class="main-inner flex gap-13">

<div class="flex-3-2-2-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-2-2-612-408.jpg 306w,
https://example.com/img/img-3-2-2-372-248.jpg 372w,
https://example.com/img/img-3-2-2-420-280.jpg 420w,
https://example.com/img/img-3-2-2-612-408.jpg 612w,
https://example.com/img/img-3-2-2-834-556.jpg 834w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-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, 306px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-3-2-2-612-408.jpg 306w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-3-2-2-612-408.jpg 612w

srcsetの中に「306w」「612w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 186px, (max-width:464px) 210px, (max-width:880px) 417px, 306px"

sizesで「306px」と設定として、PC表示の時に

• 372px（表示サイズ186px）
• 420px（表示サイズ210px）
• 612px（表示サイズ306px）
• 834px（表示サイズ417px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

■画像サイズのイレギュラー

※ウィンドウ幅「416px」「464px」「880px」「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。

■PC用レイアウトの時の注意

※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-13とflex-3-2-2-for-3-2で調整。

■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる

<div class="main-inner flex gap-13">

<div class="flex-3-2-1-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-2-1-612-408.jpg 306w,
https://example.com/img/img-3-2-1-612-408.jpg 612w,
https://example.com/img/img-3-2-1-768-512.jpg 768w,
https://example.com/img/img-3-2-1-834-556.jpg 834w,
https://example.com/img/img-3-2-1-864-576.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-2-1-864-576.jpg"
alt="テスト画像" width="864" height="576" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, (max-width:880px) 417px, 306px">
</div>

</div>

●通常DPI設定で表示させる倍の画像

https://example.com/img/img-3-2-1-612-408.jpg 306w

●高DPI設定で表示させる倍の画像

https://example.com/img/img-3-2-1-612-408.jpg 612w

srcsetの中に「306w」「612w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。

sizes="(max-width:416px) 384px, (max-width:464px) 432px, (max-width:880px) 417px, 306px"

sizesで「306px」と設定として、PC表示の時に

• 612px（表示サイズ306px）
• 768px（表示サイズ384px）
• 834px（表示サイズ417px）
• 864px（表示サイズ432px）

の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。

■画像サイズのイレギュラー

※ウィンドウ幅「880px」「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。

■PC用レイアウトの時の注意

※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-13とflex-3-2-1-for-3-2で調整。

■要素の右左を逆にする時

<div class="flex-3-3-1-wrap">
<div class="flex-3-3-1-left-for-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-1-left-612-408.jpg 306w,
https://example.com/img/img-3-3-1-left-612-408.jpg 612w,
https://example.com/img/img-3-3-1-left-768-512.jpg 768w,
https://example.com/img/img-3-3-1-left-864-576.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-1-left-864-576.jpg"
alt="テスト画像" width="864" height="576" class="lazyload ar3-2 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, 306px">
</div>
<div class="flex-3-3-1-right left">
サンプル文章。
</div>
</div>

要素を逆にする時はflex-3-3-1-wrapをflex-3-3-1-wrap-revにする。

配置を逆にしてもモバイル表示の時は写真が上、テキストが下のレイアウト。

■PC用レイアウトの時の注意

※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSflex-3-3-1-left-for-3-2で調整。