B.picture要素、source要素、media属性

Webデザイン

カテゴリー: レスポンシブ画像  閲覧数:762 配信日:2015-08-17 19:47





B方式.pictureタグ + sourceタグ(media属性 srcset属性) + imgタグ(srcset属性)


画像のアートディレクション
アートディレクションによる選択
→ 表示される画面に応じて画像を出し分け
→ ウィンドウサイズに合わせて画像を切り替え
・pictureタグ
・sourceタグmedia属性、sourceタグsrcset属性
・imgタグsrcset属性、もしくは、imgタグsrc属性


具体例1
・ウィンドウサイズが 1200px 以上なら 1200w.png 読込
・ウィンドウサイズが 1000px 以上なら 1000w.png 読込
・ウィンドウサイズが 800px 以上なら 800w.png 読込
・ウィンドウサイズが 600px 以上なら 600w.png 読込
・ウィンドウサイズが 400px 以上なら 400w.png 読込
・ウィンドウサイズが 200px 以上なら 200w.png 読込
・上記以外(ウィンドウサイズが 200px 未満)なら img srcset で指定した内容(800w.png) 読込
<picture>
 <!--[if IE 9]><video style="display: none;"><![endif]-->
 <source srcset="./img/1200w.png" media="(min-width: 1200px)">
 <source srcset="./img/1000w.png" media="(min-width: 1000px)">
 <source srcset="./img/800w.png" media="(min-width: 800px)">
 <source srcset="./img/600w.png" media="(min-width: 600px)">
 <source srcset="./img/400w.png" media="(min-width: 400px)">
 <source srcset="./img/200w.png" media="(min-width: 200px)">
 <!--[if IE 9]></video><![endif]-->
 <img srcset="./img/800w.png" alt="CSSデモ">
</picture>


動作確認
・成功


C方式.srcset属性 x記述子


ピクセル密度デスクリプタ(1x、1.5x、2x、3x など)を使用
Retina対応
→ 高解像度のディスプレイをサポート
→ Retinaディスプレイ用に画像を切り替え
・「imgタグsrcset属性 x記述子」 もしくは 「sourceタグsrcset属性 x記述子」

上記に「pictureタグ × sourceタグ」が加わる場合もあり
・つまり「srcset属性 x記述子」がある場合は、常にC方式
※「B方式」でかつ「C方式」なケースもあり得ると言うこと!

動作確認
・Retinaディスプレイを保持していないため未検証

週間人気ページランキング / 8-29 → 9-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 12
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 12
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
3 鉄道会社毎のカラーコード | カラーコード(色) 7
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
4 RGBの種類 / ビットカラー | RGB(色) 4
4 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 4
4 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
5 「bgcolor」「background-color」「background」の違い | CSS 3
5 16進数カラーコード / 2進数 3
5 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
5 Click&Clean | Chrome 拡張機能 3
5 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
5 色モデルイメージ図 | 色変換(色) 3
5 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 3
5 Illustrator CS2 でファイル名に「更新済み」を追加しない | Illustrator CS2(Illustrator) 3
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
6 Camera Raw 初期設定に戻す / 問題発生 / Camera Raw 設定の保存場所 2
6 HLS / HSL 2
2025/9/5 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2025-9-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8745
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4575
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3756
4 Design 0 3741
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2740
6 RGBの種類 / ビットカラー | RGB(色) 2685
7 「bgcolor」「background-color」「background」の違い | CSS 2015
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1920
9 16進数カラーコード / 2進数 1852
10 コズミックブルーが何色か分からない | 色 1819
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1679
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1667
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1602
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1515
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1483
16 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1395
17 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1368
18 「東京都」のカラーコード取得は難しい | 色 1252
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1164
20 HSLとHSVの違い | 色変換(色) 1157
2025/9/5 1:01 更新