A-1.srcset属性、w記述子

Webデザイン

カテゴリー: 画像  閲覧数:881 配信日:2015-08-06 20:14


A-1方式.srcset属性 w記述子


幅デスクリプタ
幅に合わせた寸法での表示
→ 画面サイズに合わせて画像読込
→ 幅とハードウェアの画面解像度に基づき(Retina対応)、最も適切な画像リソースを選択して読込
・imgタグsrcset属性w記述子

具体例1
ウィンドウサイズ 読込画像
320px 未満 img-320.jpg 読込
320px 以上 640px 未満 img-640.jpg 読込
・Retinaディスプレイで見た場合、ウィンドウサイズが 320px 未満なら img-640.jpg 読込
<img src="img/img.jpg"
    srcset="img/img-320.jpg 320w,
            img/img-640.jpg 640w"
    alt="画像の説明">


具体例2
ウィンドウサイズ 読込画像
400px 未満 400w.png 読込
400px 以上 600px 未満 600w.png 読込
600px 以上 800px 未満 800w.png 読込
800px 以上 1000px 未満 1000w.png 読込
1000px 以上 1200px 未満 1200w.png 読込
それ以外(ウィンドウサイズが 1200px 以上) 1200w.png 読込
<img
 src="img/800.w.png"
 srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
 alt="幅に合わせた寸法での表示の例">


具体例3
・A-2方式だが、100vwのみの指定なので、実質的にA-1方式
・ウィンドウサイズと同じサイズ(100vw)の画像を自動選択
ウィンドウサイズ 読込画像
400px 未満 400w.png 読込
400px 以上 600px 未満 600w.png 読込
600px 以上 800px 未満 800w.png 読込
800px 以上 1000px 未満 1000w.png 読込
1000px 以上 1200px 未満 1200w.png 読込
それ以外(ウィンドウサイズが 1200px 以上) 1200w.png 読込
<img
 sizes="100vw"
 src="img/800.w.png"
 srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
 alt="幅に合わせた寸法での表示の例">


動作確認
・成功

週間人気ページランキング / 5-4 → 5-10
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 9
2 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 7
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
6 ChromeブックマークURL重複検出が出来ない / 仕様変更に伴いURL重複登録できなくなった | Chromeブックマーク(ブラウザ) 4
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
7 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 3
7 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
7 「bgcolor」「background-color」「background」の違い | CSS 3
8 RGBの種類 / ビットカラー | RGB(色) 2
8 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 2
8 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
8 RGB ⇔ Lab | 色変換(色) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
8 Design 0 2
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
8 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 2
8 Bootstrap v2.3.1 | 2系(Bootstrap) 2
9 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 1
2025/5/11 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2025-5-10
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8581
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4541
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3708
4 Design 0 3670
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2677
6 RGBの種類 / ビットカラー | RGB(色) 2618
7 「bgcolor」「background-color」「background」の違い | CSS 1957
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1842
9 16進数カラーコード / 2進数 1809
10 コズミックブルーが何色か分からない | 色 1791
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1652
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1636
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1586
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1503
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1357
16 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1351
17 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1238
18 HSLとHSVの違い | 色変換(色) 1146
19 「東京都」のカラーコード取得は難しい | 色 1103
20 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1053
2025/5/11 1:01 更新