3カラムレイアウト/16:9画像/srcset sizes 完全版
16:9比率の画像とsrcset sizesを使った3カラムのレスポンシブのレイアウトサンプル。
3-3-3カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-3-3">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-3-256-144.jpg 256w,
https://example.com/img/img-3-3-3-288-162.jpg 288w,
https://example.com/img/img-3-3-3-608-342.jpg 304w,
https://example.com/img/img-3-3-3-608-342.jpg 608w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-3-608-342.jpg"
alt="テスト画像" width="608" height="342" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 128px, (max-width:464px) 144px, 304px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-3-3-3-608-342.jpg 304w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-3-3-3-608-342.jpg 608w
srcsetの中に「304w」「608w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 128px, (max-width:464px) 144px, 304px"
sizesで「304px」と設定として、PC表示の時に
- 256px(表示サイズ128px)
- 288px(表示サイズ144px)
- 608px(表示サイズ304px)
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」と「464px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。
3-3-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-3-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-2-608-342.jpg 304w,
https://example.com/img/img-3-3-2-384-216.jpg 384w,
https://example.com/img/img-3-3-2-416-234.jpg 416w,
https://example.com/img/img-3-3-2-608-342.jpg 608w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-2-608-342.jpg"
alt="テスト画像" width="608" height="342" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 192px, (max-width:464px) 208px, 304px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-3-3-2-608-342.jpg 304w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-3-3-2-608-342.jpg 608w
srcsetの中に「304w」「608w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 192px, (max-width:464px) 208px, 304px"
sizesで「304px」と設定として、PC表示の時に
- 384px(表示サイズ192px)
- 416px(表示サイズ208px)
- 608px(表示サイズ304px)
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。
3-3-1カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-3-1">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-1-608-342.jpg 304w,
https://example.com/img/img-3-3-1-608-342.jpg 608w,
https://example.com/img/img-3-3-1-768-432.jpg 768w,
https://example.com/img/img-3-3-1-864-486.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-1-864-486.jpg"
alt="テスト画像" width="864" height="486" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, 304px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-3-3-1-608-342.jpg 304w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-3-3-1-608-342.jpg 608w
srcsetの中に「304w」「608w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 384px, (max-width:464px) 432px, 304px"
sizesで「304px」と設定として、PC表示の時に
- 608px(表示サイズ384px)
- 768px(表示サイズ432px)
- 864px(表示サイズ304px)
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
3-2-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-2-2">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-2-2-608-342.jpg 304w,
https://example.com/img/img-3-2-2-384-216.jpg 384w,
https://example.com/img/img-3-2-2-416-234.jpg 416w,
https://example.com/img/img-3-2-2-608-342.jpg 608w,
https://example.com/img/img-3-2-2-832-468.jpg 832w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-2-2-832-468.jpg"
alt="テスト画像" width="832" height="468" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 192px, (max-width:464px) 208px, (max-width:880px) 416px, 304px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-3-2-2-608-342.jpg 304w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-3-2-2-608-342.jpg 608w
srcsetの中に「304w」「608w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 192px, (max-width:464px) 208px, (max-width:880px) 416px, 304px"
sizesで「304px」と設定として、PC表示の時に
- 384px(表示サイズ192px)
- 416px(表示サイズ208px)
- 608px(表示サイズ304px)
- 832px(表示サイズ416px)
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
■画像サイズのイレギュラー
※ウィンドウ幅「416px」の時の画像は16:9の比率の画像が整数にならず、表示枠より少し大きいサイズの16:9の画像を使用。
3-2-1カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-3-2-1">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-2-1-608-342.jpg 304w,
https://example.com/img/img-3-2-1-608-342.jpg 608w,
https://example.com/img/img-3-2-1-768-432.jpg 768w,
https://example.com/img/img-3-2-1-832-468.jpg 832w,
https://example.com/img/img-3-2-1-864-486.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-2-1-864-486.jpg"
alt="テスト画像" width="864" height="486" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, (max-width:880px) 416px, 304px">
</div>
</div>
●通常DPI設定で表示させる倍の画像
https://example.com/img/img-3-2-1-608-342.jpg 304w
●高DPI設定で表示させる倍の画像
https://example.com/img/img-3-2-1-608-342.jpg 608w
srcsetの中に「304w」「608w」とサイズ指定分けした同じ画像を用意して通常DPI設定でも2倍の画像を表示させる。
sizes="(max-width:416px) 384px, (max-width:464px) 432px, (max-width:880px) 416px, 304px"
sizesで「304px」と設定として、PC表示の時に
- 608px(表示サイズ304px)
- 768px(表示サイズ384px)
- 832px(表示サイズ416px)
- 864px(表示サイズ432px)
の画像候補から「サイズが一番近い」画像をデバイスに選んでもらう。
3-1-LRカラム
■要素の右左を逆にする時
<div class="flex-3-3-1-wrap">
<div class="flex-3-3-1-left">
<img decoding="async" loading="lazy" data-srcset="
https://example.com/img/img-3-3-1-left-608-342.jpg 304w,
https://example.com/img/img-3-3-1-left-608-342.jpg 608w,
https://example.com/img/img-3-3-1-left-768-432.jpg 768w,
https://example.com/img/img-3-3-1-left-864-486.jpg 864w"
src="https://example.com/img/spacer.png"
data-src="https://example.com/img/img-3-3-1-left-864-486.jpg"
alt="テスト画像" width="864" height="486" class="lazyload ar16-9 fadein"
data-sizes="(max-width:416px) 384px, (max-width:464px) 432px, 304px">
</div>
<div class="flex-3-3-1-right left">
サンプル文章。
</div>
</div>
要素を逆にする時はflex-3-3-1-wrap
をflex-3-3-1-wrap-rev
にする。
配置を逆にしてもモバイル表示の時は写真が上、テキストが下のレイアウト。