サブページメイン写真

3カラムレイアウト 16:9 Images picture 詳細版

16:9比率の画像と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-256-144.jpg" width="256" height="144">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-3-288-162.jpg" width="288" height="162">
<img decoding="async" loading="lazy" 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">
</picture>
</div>

</div>

●ウィンドウサイズ416px以下の時に表示させる画像

https://example.com/img/img-3-3-3-256-144.jpg

●ウィンドウサイズ417px~464pxの時に表示させる画像

https://example.com/img/img-3-3-3-288-162.jpg

●それ以外(ウィンドウサイズ465px以上)の時に表示させる画像

https://example.com/img/img-3-3-3-608-342.jpg

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

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

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-384-216.jpg" width="384" height="216">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-2-416-234.jpg" width="416" height="234">
<img decoding="async" loading="lazy" 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">
</picture>
</div>

</div>

●ウィンドウサイズ416px以下の時に表示させる画像

https://example.com/img/img-3-3-2-384-216.jpg

●ウィンドウサイズ417px~464pxの時に表示させる画像

https://example.com/img/img-3-3-2-416-234.jpg

●それ以外(ウィンドウサイズ465px以上)の時に表示させる画像

https://example.com/img/img-3-3-2-608-342.jpg

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

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

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-432.jpg" width="768" height="432">
<source media="(min-width:465px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-1-608-342.jpg" width="608" height="342">
<img decoding="async" loading="lazy" 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">
</picture>
</div>

</div>

●ウィンドウサイズ416px以下の時に表示させる画像

https://example.com/img/img-3-3-1-768-432.jpg

●ウィンドウサイズ465px以上の時に表示させる画像

https://example.com/img/img-3-3-1-608-342.jpg

●それ以外(ウィンドウサイズ417px~464px)の時に表示させる画像

https://example.com/img/img-3-3-1-864-486.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-384-216.jpg" width="384" height="216">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-2-416-234.jpg" width="416" height="234">
<source media="(min-width:881px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-2-608-342.jpg" width="608" height="342">
<img decoding="async" loading="lazy" 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">
</picture>
</div>

</div>

●ウィンドウサイズ416px以下の時に表示させる画像

https://example.com/img/img-3-2-2-384-216.jpg

●ウィンドウサイズ417px~464pxの時に表示させる画像

https://example.com/img/img-3-2-2-416-234.jpg

●ウィンドウサイズ881px以上の時に表示させる画像

https://example.com/img/img-3-2-2-608-342.jpg

●それ以外(ウィンドウサイズ465px~880px)の時に表示させる画像

https://example.com/img/img-3-2-2-832-468.jpg

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

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

■間違いやすいのでメモ

※一番サイズの大きい「ウィンドウサイズ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-432.jpg" width="768" height="432">
<source media="(min-width:881px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-1-608-342.jpg" width="608" height="342">
<source media="(min-width:465px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-2-1-832-468.jpg" width="832" height="468">
<img decoding="async" loading="lazy" 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">
</picture>
</div>

</div>

●ウィンドウサイズ416px以下の時に表示させる画像

https://example.com/img/img-3-2-1-768-432.jpg

●ウィンドウサイズ881px以上の時に表示させる画像

https://example.com/img/img-3-2-1-608-342.jpg

●ウィンドウサイズ465px~880pxの時に表示させる画像

https://example.com/img/img-3-2-1-832-468.jpg

●それ以外(ウィンドウサイズ417px~464px)の時に表示させる画像

https://example.com/img/img-3-2-1-864-486.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-432.jpg" width="768" height="432">
<source media="(min-width:465px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-3-3-1-left-608-342.jpg" width="608" height="342">
<img decoding="async" loading="lazy" 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">
</picture>
</div>
<div class="flex-3-3-1-right left">
サンプル文章。
</div>
</div>

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

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

Menu