3カラムレイアウト 4:3 Images picture 詳細版
4:3比率の画像とpictureを使った3カラムのレスポンシブのレイアウトサンプル。
3-3-3カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-3-3">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-3-240-180.jpg" width="240" height="180">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-3-272-204.jpg" width="272" height="204">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-3-3-3-608-456.jpg" alt="テスト画像" width="608" height="456" class="lazyload ar4-3 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-3-3-3-240-180.jpg
●ウィンドウサイズ417px～464pxの時に表示させる画像
https://example.com/img/img-3-3-3-272-204.jpg
●それ以外（ウィンドウサイズ465px以上）の時に表示させる画像
https://example.com/img/img-3-3-3-608-456.jpg
■画像サイズのイレギュラー
※ウィンドウ幅「416px」と「464px」の時の画像は4:3の比率の画像が整数にならず、表示枠より少し大きいサイズの4:3の画像を使用。
3-3-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-3-2">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-2-368-276.jpg" width="368" height="276">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-2-416-312.jpg" width="416" height="312">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-3-3-2-608-456.jpg" alt="テスト画像" width="608" height="456" class="lazyload ar4-3 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-3-3-2-368-276.jpg
●ウィンドウサイズ417px～464pxの時に表示させる画像
https://example.com/img/img-3-3-2-416-312.jpg
●それ以外（ウィンドウサイズ465px以上）の時に表示させる画像
https://example.com/img/img-3-3-2-608-456.jpg
3-3-1カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-3-1">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-1-768-576.jpg" width="768" height="576">
<source media="(min-width:465px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-1-608-456.jpg" width="608" height="456">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-3-3-1-864-648.jpg" alt="テスト画像" width="864" height="648" class="lazyload ar4-3 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-3-3-1-768-576.jpg
●ウィンドウサイズ465px以上の時に表示させる画像
https://example.com/img/img-3-3-1-608-456.jpg
●それ以外（ウィンドウサイズ417px～464px）の時に表示させる画像
https://example.com/img/img-3-3-1-864-648.jpg
■間違いやすいのでメモ
※一番サイズの大きい「ウィンドウサイズ417px～464pxの時の画像」をimgに設定して、記述を削減してる。
3-2-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-2-2">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-2-368-276.jpg" width="368" height="276">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-2-416-312.jpg" width="416" height="312">
<source media="(min-width:881px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-2-608-456.jpg" width="608" height="456">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-3-2-2-832-624.jpg" alt="テスト画像" width="832" height="624" class="lazyload ar4-3 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-3-2-2-368-276.jpg
●ウィンドウサイズ417px～464pxの時に表示させる画像
https://example.com/img/img-3-2-2-416-312.jpg
●ウィンドウサイズ881px以上の時に表示させる画像
https://example.com/img/img-3-2-2-608-456.jpg
●それ以外（ウィンドウサイズ465px～880px）の時に表示させる画像
https://example.com/img/img-3-2-2-832-624.jpg
■間違いやすいのでメモ
※一番サイズの大きい「ウィンドウサイズ465px～880pxの時の画像」をimgに設定して、記述を削減してる。
3-2-1カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-2-1">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-1-768-576.jpg" width="768" height="576">
<source media="(min-width:881px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-1-608-456.jpg" width="608" height="456">
<source media="(min-width:465px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-1-832-624.jpg" width="832" height="624">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-3-2-1-864-648.jpg" alt="テスト画像" width="864" height="648" class="lazyload ar4-3 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-3-2-1-768-576.jpg
●ウィンドウサイズ881px以上の時に表示させる画像
https://example.com/img/img-3-2-1-608-456.jpg
●ウィンドウサイズ465px～880pxの時に表示させる画像
https://example.com/img/img-3-2-1-832-624.jpg
●それ以外（ウィンドウサイズ417px～464px）の時に表示させる画像
https://example.com/img/img-3-2-1-864-648.jpg
■間違いやすいのでメモ
※一番サイズの大きい「ウィンドウサイズ417px～464pxの時の画像」をimgに設定して、記述を削減してる。
3-1-LRカラム
■要素の右左を逆にする時
<div class="flex-3-3-1-wrap">
<div class="flex-3-3-1-left">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-1-left-768-576.jpg" width="768" height="576">
<source media="(min-width:465px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-1-left-608-456.jpg" width="608" height="456">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-3-3-1-left-864-648.jpg" alt="テスト画像" width="864" height="648" class="lazyload ar4-3 fadein">
</picture>
</div>
<div class="flex-3-3-1-right left">
サンプル文章。
</div>
</div>
要素を逆にする時はflex-3-3-1-wrapをflex-3-3-1-wrap-revにする。
配置を逆にしてもモバイル表示の時は写真が上、テキストが下のレイアウト。
Menu
