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

Webデザイン

カテゴリー: レスポンシブ画像  閲覧数:768 配信日: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ディスプレイを保持していないため未検証

週間人気ページランキング / 9-12 → 9-18
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 20
2 「bgcolor」「background-color」「background」の違い | CSS 10
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
3 鉄道会社毎のカラーコード | カラーコード(色) 9
4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 7
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 7
5 Design 0 6
6 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 5
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 3
8 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
8 色モデルイメージ図 | 色変換(色) 3
8 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
9 16進数カラーコード / 2進数 2
9 カラーコード / 色コード | カラーコード(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 XnViewMP | XnView MP 系(ソフトウェア) 2
9 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
9 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
2025/9/19 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2025-9-18
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8778
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4579
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3763
4 Design 0 3753
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2743
6 RGBの種類 / ビットカラー | RGB(色) 2689
7 「bgcolor」「background-color」「background」の違い | CSS 2028
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1928
9 16進数カラーコード / 2進数 1854
10 コズミックブルーが何色か分からない | 色 1819
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1680
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1672
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1604
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1516
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1489
16 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1409
17 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1368
18 「東京都」のカラーコード取得は難しい | 色 1268
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1176
20 HSLとHSVの違い | 色変換(色) 1157
2025/9/19 1:01 更新