1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>srcsetã¨sizes</title> 6<meta name="description" content="ã¬ã¹ãã³ã·ãç»åã®ããã®æ°ããææ³ãsrcsetã¨sizesãç´¹ä»"> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 9<link rel="preconnect" href="https://s3-ap-northeast-1.amazonaws.com" crossorigin> 10<link rel="stylesheet" href="./css/minimal.css">
11<script> 12(function(d) { 13 var config = { 14 kitId: 'wvd1kpq', 15 scriptTimeout: 3000, 16 async: true 17 }, 18 h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) 19})(document); 20</script>
20 21</head> 22<body> 23 24<main> 25 26<header role="banner"> 27 <h1>srcset<span class="amp">ã¨</span>sizes</h1> 28 <div class="meta"> 29 <p class="author">ã¨ãªãã¯ã»ãã¼ãã£ã¹</p> 30 <p class="translator">é´æ¨ä¸<span class="separator">ï¼</span>訳</p> 31 </div> 32</header> 33 34<section id="part-1"> 35 36<h2>ãã¼ã1ï¼ã¡ãã£ã¢ã»ã¯ã¨ãªã®ã©ããã¾ããã®ãï¼</h2> 37 38<p>ãããããåãã¦ã§ããµã¤ããä½ã£ã¦ããæä»£ã<a href="http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html">1993å¹´2æ23æ¥</a>ãã<a href="http://alistapart.com/article/responsive-web-design/">2010å¹´5æ25æ¥</a>ã®éã ã£ãããç»åã®æ±ããªãã¦ãã§ããã£ããï¼ ããã¯ãããªãµãã«åç´ã ã£ãã</p> 39 40<ul> 41<li>å¹ ã®åºå®ãããã¬ã¤ã¢ã¦ããã«ãã¿ã¤ãã</li> 42<li>ç»åã<em>ãã£ãã</em>ä½ãã¯ã»ã«ããæ¸¬ã――ãã®ç»åã¯<em>ãããã</em>ã¦ã¼ã¶ã¼ã®ç»é¢ã§<em>å¤ãããªã</em>ã¹ãã¼ã¹ãå ãããã¨ã«ãªã</li> 43<li>Photoshopã®ã¨ã³ã¸ã³ãããã</li> 44<li>ç»åããã£ã測ã£ãã¨ããã®ãµã¤ãºã§ãã¦ã§ãç¨ã«ä¿åããã</li> 45<li>ããã<code><img></code>ã¿ã°ã§ãã¼ã¯ã¢ãããã</li> 46<li>ã°ã©ã¹ã«ãã¼ã«ã注ãï¼ã¾ãã¯æ°é®®ãªã°ãªã³ãã¼ã¹ã®ç¼¶ãéãï¼ãä»äºããã¾ããã£ããã¨ãç¥ã</li> 47</ul> 48 49<figure> 50 <img alt="ç©´ã®å¤§ãããå·»ãå°ºã§æ¸¬ãè±ç·" 51 src="./img/measuring-hole/half.png" 52 srcset="./img/measuring-hole/full.png 2118w, 53 ./img/measuring-hole/half.png 1059w, 54 ./img/measuring-hole/quarter.png 530w, 55 ./img/measuring-hole/8th.png 265w"> 56</figure> 57 58<figure> 59 <img alt="ãç»åãã¨æ¸ããããããã¯ããµã¤ãºã«åããã¦åãåºãè±ç·" 60 src="./img/measuring-image/half.png" 61 srcset="./img/measuring-image/full.png 2448w, 62 ./img/measuring-image/half.png 1224w, 63 ./img/measuring-image/quarter.png 612w, 64 ./img/measuring-image/8th.png 306w"> 65</figure> 66 67<figure> 68 <img alt="ãããã¯ããã³ãã¼ã§ç©´ã«ã¯ãè¾¼ãè±ç·" 69 src="./img/hammering/half.png" 70 srcset="./img/hammering/full.png 2232w,
71 ./img/hammering/half.png 1116w, 72 ./img/hammering/quarter.png 558w, 73 ./img/hammering/8th.png 279w"> 74</figure> 75 76<figure> 77 <img alt="ã°ãªã³ãã¼ã¹ã®ç¼¶ãæã«æºé¢ã®ç¬ã¿ãæµ®ãã¹ãè±ç·" 78 src="./img/yay-peas/half.png" 79 srcset="./img/yay-peas/full.png 1613w, 80 ./img/yay-peas/half.png 807w, 81 ./img/yay-peas/quarter.png 404w, 82 ./img/yay-peas/8th.png 202w"> 83</figure> 84 85<p>ã¨ãããè¡æãªãé è¨è ãèéããç¾ãã¦ã¯ããã®ææ³ã«æ½ãåé¡ã«ã¤ãã¦<a href="http://alistapart.com/article/dao/">æ·±é ãªçå®</a>ã説ããã¨ããã£ããããã§ããã®ããæ¹ã¯ã20å¹´ãã®éãã¦ã§ãã»ãã¶ã¤ãã¼ãçæ¥ã¨ãããã®ãã¡ã«åãå ¥ãããã¦ããã</p> 86 87<p>ããããæä»£ã¯å¤ããã</p> 88 89<p><time datetime="2010-05-25">4å¹´å</time>ãã¤ã¼ãµã³ã»ãã¼ã³ããã<a href="http://alistapart.com/article/responsive-web-design/">ããè¨äºãæ¸ãã</a>ã<time datetime="2010-06-07">ãã®13æ¥å¾</time>ãã¹ãã£ã¼ã´ã»ã¸ã§ããºã¯<a href="http://ja.wikipedia.org/wiki/IPhone_4">ããæºå¸¯é»è©±</a>ãçºè¡¨ãããçªå¦ã¨ãã¦ã<a href="http://unstoppablerobotninja.com/entry/fluid-images">ãã«ã¼ãï¼æµåçï¼</a>ãã§ã<a href="http://ja.wikipedia.org/wiki/%E3%83%AC%E3%83%86%E3%82%A3%E3%83%8A%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4">ã¬ãã£ãï¼é«ç²¾ç´°ï¼</a>ããªç»åãéè¦ã«ãªã£ããããã¦ãã以æ¥ãããããã ããã<a href="https://www.google.com/search?q=site:lists.whatwg.org%20responsive%20images">æ¯ããã</a>ãèããã¦ããã</p> 90 91<figure> 92 <video id="oops" loop autoplay muted controls> 93 <source src="./video/oops/oops-1080.mp4" type="video/mp4"> 94 <source src="./video/oops/oops-1080.ogv" type="video/ogg"> 95 </video> 96</figure> 97 98<p>ãã«ã¼ãã¨ãã¬ãã£ãã¨ãã¬ã¹ãã³ã·ãã¨ããã£ãç»åãå®è£ ãããã¨ã«ãªã£ãã¨ããåãã¯ã¾ãã©ãããã ããããç´æçã«ãã¬ã¹ãã³ã·ãã»ã¬ã¤ã¢ã¦ãã§ä½¿ãã®ã¨åãéå ·ã«æã伸ã°ãããããªãããªããããã¡ãã£ã¢ã»ã¯ã¨ãªã ï¼</p> 99 100<figure> 101 <img alt="3ã¤ã®ãµã¤ãºã®ãããã¯ã«å¼µãç´ãããè±ç·ããå°ããç©´ã«ã¯ããããä¸ãããã®ç©´ã«ã¯ãããã大ããç©´ã«ã¯ããã" 102 src="./img/media-queries/half.png" 103 srcset="./img/media-queries/full.png 2221w, 104 ./img/media-queries/half.png 1111w, 105 ./img/media-queries/quarter.png 556w, 106 ./img/media-queries/8th.png 278w"> 107</figure> 108 109<p>ãã©ã¦ã¶ã¼ã¯ãã¾ã èªã¿è¾¼ãã§ãªãã¦ã§ããµã¤ãã«ã¤ãã¦ã¯ãªãã«ãç¥ããªããã©ãèªåãã¡ãæç»ããããªãå é¨ã®ç°å¢ã«ã¤ãã¦ã¯ãã¤ãã«ææ¡ãã¦ããããã¥ã¼ãã¼ãã®ãµã¤ãºããã¦ã¼ã¶ã¼ã®ç»é¢ã®è§£å度ãããããã£ããã¨ãã¡ãã£ã¢ã»ã¯ã¨ãªã®çãã¯ãã¦ã§ãã»ãã£ããããã¼ãç¹å®ã®ç°å¢ã«åãã¦ãªã«ãã§ããããã«ããããã¨ãããã®ã ããããã¥ã¼ãã¼ãã®å¹ ã1,000px以ä¸ãªãããµã¤ããã¼ãå·¦å´ã«è¡¨ç¤ºãããããã§ãªããã°ãããã¤ãã¡ã¤ã³ã®ã³ã³ãã³ãã®ä¸ã«ãããã¦ã¼ã¶ã¼ã®ç»é¢ãã¬ãã£ããªã大ããªç»åã使ããããã§ãªããã°å°ããªãã¤ã</p> 110 111<p>ã«ã³ã¿ã³ã«ã³ã¿ã³ã</p> 112 113<figure> 114 <img alt="ãã©ã¼ã¯ã¨ãã¤ããæã«ã°ãªã³ãã¼ã¹ãã»ãã°ãè±ç·" 115 src="./img/easypeas/half.png" 116 srcset="./img/easypeas/full.png 2258w, 117 ./img/easypeas/half.png 1129w, 118 ./img/easypeas/quarter.png 565w, 119 ./img/easypeas/8th.png 283w"> 120</figure> 121 122<p>ã§ãæ®å¿µãªãã¨ã«ãã¬ã¹ãã³ã·ãç»åã§ã¯è©±ãéã£ã¦ãããå¤ãã®å ´åãå®éã«ç»åã®ã½ã¼ã¹ãåã£ã¦ããã®ã«ã¡ãã£ã¢ã»ã¯ã¨ãªã使ãã¨ã<a href="http://www.xanthir.com/b4Su0">ã¯ã½ã¾ãããã¨</a>ãã«ãªããã ã</p> 123 124<figure> 125 <img alt="ã°ãªã³ãã¼ã¹ãã»ãã°ã£ãã¾ã¾ã³ã£ããããè±ç·ããã¸ã£ï¼ã" 126 src="./img/gulp/half.png" 127 srcset="./img/gulp/full.png 2244w, 128 ./img/gulp/half.png 1122w, 129 ./img/gulp/quarter.png 561w, 130 ./img/gulp/8th.png 281w"> 131</figure> 132 133<p>
133ã¡ãã£ã¢ã»ã¯ã¨ãªã使ã£ã¦ã¬ã¹ãã³ã·ãç»åã®ã½ã¼ã¹ãåã£ã¦ããã¨ã¾ãããã¨ã«ãªãã®ã¯ãªããããã®çç±ãã¡ãã£ã¨æ¢ã£ã¦ã¿ãããã¾ããã»ã¨ãã©ã®ãã¶ã¤ãã¼ã¯ããã¼ã¸ã®ã¬ã¤ã¢ã¦ããã¬ã¹ãã³ã·ãã«å¤åãããã¨ãã1ã¤ã®å¤æ°ï¼ãã¥ã¼ãã¼ãã®å¹ ï¼ããã¨ã«ãããã¨ã«æ £ããã£ã¦ããã§ãã¬ã¹ãã³ã·ã<em>ç»å</em><sup id="fnref-1"><a href="#fn-1">1</a></sup>ãæ±ãã¨ãªãã¨ã3ã¤ãã®å¤æ°ããããã§ãããã ã</p> 134 135<ul> 136<li>ã¬ã¤ã¢ã¦ãã«ãããç»åã®ï¼CSSãã¯ã»ã«ã§ã®ï¼æç»ãµã¤ãº</li> 137<li>ç»é¢å¯åº¦</li> 138<li>ãµã¤ãºã®ç°ãªãç»åãã¡ã¤ã«ããããã®å¯¸æ³</li> 139</ul> 140 141<p>ã¤ã¾ããã¡ãã£ã¢ã»ã¯ã¨ãªãããããããªãã£ã¦ãã¨ã</p> 142 143<p>ãã®3ã¤ããããã°ãåé¡ã®è§£æ±ºã¯ã©ãã£ã¦ãã¨ãªããã²ã¨çµã®ã½ã¼ã¹ããã£ããããã®ä¸ã§å¯¸æ³ã<var>æç»ãµã¤ãº</var>Ã<var>ç»é¢å¯åº¦</var>ãã大ããã¦ããã¤ãã¡ã°ãå°ããªãã¤ãé¸ã¹ã°ããã</p> 144 145<p>ã ããããï¼ æ®å¿µãªãã<var>æç»ãµã¤ãº</var>ã£ã¦ãã¤ã¯çªãæ¢ããã®ã«ã¡ãã£ã¨æããããã ãã¦ã§ãã»ãã£ããããã¼ã¯ããã¤ãç¥ããã¨ã<em>ã§ããªã</em>ããªããªããç»åã®ãµã¤ãºãåºå®ãããã¬ãã·ãã«ã«ããã¨ãç»åã¯ä¼¸ã³ç¸®ã¿ããã®ã§ãã¬ã¹ãã³ã·ãã»ã¬ã¤ã¢ã¦ãã§ã¯<var>æç»ãµã¤ãº</var>ã¯ããããå¯è½æ§ãèãããããããã¦ã³ã£ãããããããããªããã©ããã©ã¦ã¶ã¼ãç»åã®èªã¿è¾¼ã¿ãã¯ãããã¨ãããã©ã¦ã¶ã¼ã<var>æç»ãµã¤ãº</var>ãã¾ã ç¥ããªããã ã<var>æç»ãµã¤ãº</var>ãæ±ºã¾ãã®ã¯ãã®ãã¼ã¸ã®CSS次第ãªãã ãã©ãCSSãè§£æãããã®ã¯ãç»åã®èªã¿è¾¼ã¿ãã¯ãã¾ã£ããã£ã¨ãã¨ãªãã ã</p> 146 147<p>ã¡ãã£ã¢ã»ã¯ã¨ãªãç»åã½ã¼ã¹ã«å½ã¦ã¯ããã¨ããã®<var>æç»ãµã¤ãº</var>ãããããªãã¨ããåé¡ããã¾ãé¿ããããããã«è¦ãããã¡ãã£ã¢ã»ã¯ã¨ãªã«ãã£ã¦<var>æç»ãµã¤ãº</var>ã¯æ¬¡ã®2ã¤ããæ±ããããããã«ãªãâ¦â¦</p> 148 149<ul> 150<li>ãã¥ã¼ãã¼ãã®å¯¸æ³</li> 151<li>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªãµã¤ãº</li> 152</ul> 153 154<p>ããã¦è£½ä½è ã¯ãã¡ãã£ã¢ã»ã¯ã¨ãªã§ãã¥ã¼ãã¼ãã®å¯¸æ³ã¨ç»é¢å¯åº¦ã ããæå®ããã°ããããã®ã»ãã®å ¨é¨ã«ã¤ãã¦ã<s>ããã¤ãã®</s>ããããã®<s>ã«ã³ã¿ã³ãª</s>ãããããè¨ç®ãæ¸ã¾ãããã¨ã§ãã</p> 155 156<p>ã©ããªè¨ç®ãã£ã¦ï¼ ã¡ãã£ã¨ãããã¦ã¿ããã</p> 157 158<figure> 159 <img alt="妿 ¡ã®æºã§ãé»åã¨éçãæã«æºåä¸ç«¯ã®è±ç·" 160 src="./img/study-up/half.png" 161 srcset="./img/study-up/full.png 2244w, 162 ./img/study-up/half.png 1122w, 163 ./img/study-up/quarter.png 561w, 164 ./img/study-up/8th.png 281w"> 165</figure> 166 167<p>ï¼æ³¨æãåã¯ã·ã³ãã«ã«æ¸ããã¨åªãã¦ããã©ããããã親æãªãèªè 諸åã®ãç®ã«ãããä¾ã¯ãã¡ãã£ã¢ã»ã¯ã¨ãªã®è¨ç®ã®éç¨ãã©ãã ãéå±ãã¤ééãããããã示ãããã ãã«ãããã ãã ãããããã®ãã¨ã飲ã¿è¾¼ããã¨æã£ãããããã«<a href="#part-2">ãã¼ã2</a>ã«é£ãã§ããããããã¾ããªãããï¼</p> 168 169<p>æå ã«åãç»åã®3ã¤ã®ãã¼ã¸ã§ã³ãããã¨ãããã</p> 170 171<ul> 172<li><code>large.jpg</code>ï¼1024 à 768ï¼</li> 173<li><code>medium.jpg</code>ï¼640 à 480ï¼</li> 174<li><code>small.jpg</code>ï¼320 à 240ï¼</li> 175</ul> 176 177<p>ããã¦ããã®ãã¡ã®1ã¤ãåãåºãããã¬ãã·ãã«ãªã°ãªããã®ä¸ã§èªã¿è¾¼ã¿ããã¨ãããã°ãªããã®ã«ã©ã ã¯ãã¯ããã¯1ã¤ã ãã©ããã¥ã¼ãã¼ãã大ãããã°3ã¤ã«åãæ¿ããã<a href="http://ericportis.com/assets/2014-03-24-srcset-sizes/wolves/">ãããªãµãã«</a>ã</p> 178 179<p>ããã«ã1xã¨2xã®<code>ããã¤ã¹ãã¯ã»ã«æ¯</code>ããµãã¼ããããã</p> 180 181<p>ãã¦ã¡ãã£ã¢ã»ã¯ã¨ãªãã©ããã£ã¦çµã¿ç«ã¦ããï¼ æåããè¦ã¦ãããã</p> 182 183<p><code>large.jpg</code>ã¯æ¬å½ã«å¿ è¦ãªã¨ãã«ã ãèªã¿è¾¼ã¾ããã¹ãã ãã¤ã¾ã<code>
183small.jpg</code>ã¨<code>medium.jpg</code>ãã©ã¡ããå°ããããã¨ãã ãããã£ã¨æ£ç¢ºã«è¨ãã¨ã次ã®å¼ãæãç«ã¤ã¨ãã ãã<code>large.jpg</code>ãèªã¿è¾¼ã¾ãã¦ã»ããã</p> 184 185<pre><code><var>æç»ãããå¹ </var> à <var>ç»é¢å¯åº¦</var> 186 > <var>次ã«å°ãããã¡ã¤ã«ã®å¹ </var> 187</code></pre> 188 189<p>åãã¡ã®ä¾ã§ã¯ã<var>æç»ãããå¹ </var>ã¯åç´ã«<var>ãã¥ã¼ãã¼ãã®å¹ </var>ã«å¯¾ãããã¼ã»ã³ãã¼ã¸ã ããããã£ã¦ã</p> 190 191<pre><code><var>æç»ãããå¹ </var> = 192 <var>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </var> à 193 <var>ãã¥ã¼ãã¼ãã®å¹ </var> 194</code></pre> 195 196<p>次ã«å°ãããã¡ã¤ã«ã¯<code>medium.jpg</code>ãªã®ã§ã</p> 197 198<pre><code><var>次ã«å°ãããã¡ã¤ã«ã®å¹ </var> = 640px 199</code></pre> 200 201<p>ããã¤ããã²ã¨ã¾ã¨ãã«ããã¨æ¬¡ã®ä¸çå¼ã«ãªãã</p> 202 203<pre><code><var>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </var> à 204<var>ãã¥ã¼ãã¼ãã®å¹ </var> à 205<var>ç»é¢å¯åº¦</var> 206 > 640px 207</code></pre> 208 209<p><var>ãã¥ã¼ãã¼ãã®å¹ </var>ãä¸å¿ã«ããã¨æ¬¡ã®ããã«ãæ¸ããã</p> 210 211<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 212 640px ÷ 213 ( <var>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </var> à 214 <var>ç»é¢å¯åº¦</var> ) 215</code></pre> 216 217<p>ããã¦ããããã¡ãã£ã¢ã»ã¯ã¨ãªãçµã¿ç«ã¦ãã«ã¯ã<var>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </var>ã¨<var>ç»é¢å¯åº¦</var>ãã¨ãå¯è½æ§ã®ããå¤ãã¹ã¦ã«ã¤ãã¦ããããã対å¿ãã<var>ãã¥ã¼ãã¼ãã®å¹ </var>ãæ±ããªãããããªãã</p> 218 219<p><var>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </var>ã¯æ¬¡ã®2ã¤ã®ãã¡ã©ã¡ããã ããã¬ã¤ã¯ãã¤ã³ãï¼36emï¼ã«å±ãåãªã100<a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">vw</a>ããã以éãªã33.3vwã</p> 220 221<p><var>ç»é¢å¯åº¦</var>ã«ã¤ãã¦ã¯â¦â¦ãªãã¨ãããã<a href="http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density">ããããã®å¯è½æ§ãèãããã</a>ãã ãã©ãåãã¡ããµãã¼ããã<code>device-pixel-ratio</code>ã¯1xã¨2xã ãã¨æ±ºããã</p> 222 223<p><var>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </var>ã®å¯è½æ§ã2ã¤ã«ã<var>ç»é¢å¯åº¦</var>ã®å¯è½æ§ã2ã¤ãããããããåãããã¨4ã¤ã®ã·ããªãªãèããªã
223ããããªãã£ã¦ãã¨ã«ãªããã²ã¨ã¤ãã¤è¦ã¦ãããã</p> 224 225<h3 id="1x-ã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å">1xã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å</h3> 226 227<p>ããã§ã®ãã¬ã¤ã¯ãã¤ã³ãã¯36emãªã®ã§ã次ã®ãã¨ã¯ããã£ã¦ãã</p> 228 229<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> < 36em 230</code></pre> 231 232<p>ã<var>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </var> = 100vwãã¨ã<var>ç»é¢å¯åº¦</var> = 1xããããã£ãèããä¸çå¼ã«å ¥ãã¦ã¿ããã</p> 233 234<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 235 640px ÷ ( 100vw à 1x ) = 640px = 40em 236</code></pre> 237 238<p>ãã®2ã¤ãåãããã¨ãããããªãçµæã«ãªãã</p> 239 240<pre><code>36em > <var>ãã¥ã¼ãã¼ãã®å¹ </var> > 40em 241</code></pre> 242 243<p>ã¤ã¾ãåãã¡ã¯ãã®ã·ããªãªã¯æ¨ã¦ã¦ãã¾ã£ã¦ãã――1xã§ã¬ã¤ã¢ã¦ããã·ã³ã°ã«ã»ã«ã©ã ã®ã¨ãã<code>large.jpg</code>ãå¿ è¦ã«ãªããã¨ã¯ãªãã </p> 244 245<h3 id="2x-ã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å">2xã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å</h3> 246 247<p>ã¾ãã¯ãã£ãã¨åãã</p> 248 249<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> < 36em 250</code></pre> 251 252<p>ã§ãä»åº¦ã¯2xã«å½ã¦ã¯ããã</p> 253 254<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 255 640px ÷ ( 100vw à 2x ) = 320px = 20em 256</code></pre> 257 258<p>ãã®2ã¤ãçµã¿åãããã¨â¦â¦</p> 259 260<pre><code>36em > <var>ãã¥ã¼ãã¼ãã®å¹ </var> > 20em 261</code></pre> 262 263<p>ã¤ã¾ãã2xã®ç»é¢ã§<code>large.jpg</code>ãèªã¿è¾¼ãã§ã»ããã®ã¯ããã¥ã¼ãã¼ãããã®ç¯å²å ã ã£ãå ´åã¨ãããã¨ã«ãªãã</p> 264 265<h3 id="1x-ã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å">1xã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å</h3> 266 267<p>ä»åã¯ãã¬ã¤ã¯ãã¤ã³ã以ä¸ãªã®ã§ãããã</p> 268 269<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 36em 270</code></pre> 271 272<p>ããã¦1xã®ç»é¢ã§ã¯3ã«ã©ã ã»ã¬ã¤ã¢ã¦ããªã®ã§ãããã</p> 273 274<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 275 640px ÷ ( 33.3vw à 1x ) = 1920px = 120em 276</code></pre> 277 278<p>ãã¥ã¼ãã¼ãã120emãã大ãããªããã¡ãã36emãã大ããããã ããã36emã®æ¹ã¯å¿ãã¡ãã£ã¦ããã1xã®ç»é¢ã§<code>large.jpg</code>ãèªã¿è¾¼ã¿ããã®ã¯ã次ã®å ´åã¨ãããã¨ã«ãªãã</p> 279 280<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 120em 281</code></pre> 282 283<p>ãããæ¬¡ã§æå¾ã ï¼</p> 284 285<h3 id="2x-ã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å">2xã§ãã¬ã¤ã¯ãã¤ã³ã以ä¸ã®å ´å</h3> 286 287<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 36em 288</code></pre> 289 290<p>â¦â¦ããã¦â¦â¦</p> 291 292<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 293 640px ÷ ( 33.3vw à 2x ) = 960px = 60em 294</code></pre> 295 296<p>â¦â¦2xã®ç»é¢ã§<code>large.jpg</code>ãèªã¿è¾¼ãã®ã¯ããã®å ´åã</p> 297 298<pre><code><var>ãã¥ã¼ãã¼ãã®å¹ </var> > 60em 299</code></pre> 300 301<p>ãããããã¤ããã¡ãã£ã¢ã»ã¯ã¨ãªã§ã²ã¨ã¾ã¨ãã«ãããã</p> 302 303<pre><code>( (min-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or 304( (max-device-pixel-ratio: 1.5) and (min-width: 120.001em) ) or 305( (min-device-pixel-ratio: 1.5) and (min-width: 60.001em) ) 306</code></pre> 307 308<p>ããã¨åãè¨ç®ã<code>medium.jpg</code>ç¨ã«ç¹°ãè¿ãã®ã¯ãèªè ã®ç·´ç¿åé¡ã¨ãã¦ãããã</p> 309 310<p>ãããã¦åºæ¥ä¸ãã£ãã®ãã<code><picture></code>ã®æåã®ææ¡ã«ã®ã£ã¨ã£ããããªãã¼ã¯ã¢ããã</p> 311 312<pre><code><picture> 313 314 <source src="large.jpg" 315 media="( (min-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or 316 ( (max-device-pixel-ratio: 1.5) and (min-width: 120.001em) ) or 317 ( (min-device-pixel-ratio: 1.5) and (min-width: 60.001em) )" /> 318 <source src="medium.jpg" 319 media="( (max-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or 320 ( (max-device-pixel-ratio: 1.5) and (min-width: 60.001em) ) or 321 ( (min-device-pixel-ratio: 1.5) and (min-width: 10.001em) )" /> 322 <source src="small.jpg" /> 323 324 <!-- fallback --> 325 <img src="small.jpg" alt="A rad wolf" /> 326 327</picture> 328</code></pre> 329 330<p>ãã£ãé çãâ¦â¦ï¼</p> 331 332<p>ãªã«ãããã®ãã¼ã¯ã¢ããã®å±±ã¯ã<code>device-pixel-ratio</code>ã2ãã大ããã1ããå°ããå ´åããµãã¼ããã¦ãªããã2ã¨1ã®éã®
332å¤ã«ãã¦ããµãã¼ãã¯ä¸ååããã<code>device-pixel-ratio</code>ãããåºããµãã¼ããããã¨ããããèããªãããããªãã·ããªãªãããã¨å¢ããã</p> 333 334<p>ããã¦ãã®ãã¼ã¯ã¢ããã®<em>ææª</em>ãªã¨ããã¯ãããã«å«ã¾ããå¤ã1ã¤ã§ã夿´ãããã¨ããã¨ãã«ããããã«ãªããã½ã¼ã¹ç»åã®ãµã¤ãºããµãã¼ãããããã¤ã¹ã®è§£å度ãã¾ãã¯ç»åã®ãµã¤ãºã«é¢ããã¬ã¤ã¢ã¦ãã®ã¢ã¹ãã¯ãæ¯――ãããã夿´ãããã³ãåãã¡ã¯ãã®è¨ç®ãããã¶ãããç´ãããªãã¨ãããªãã</p> 335 336<figure> 337 <img alt="é£ã¹ãã°ãªã³ãã¼ã¹ããã¤ã¬ã§åãè±ç·" 338 src="./img/barf/half.png" 339 srcset="./img/barf/full.png 2244w, 340 ./img/barf/half.png 1122w, 341 ./img/barf/quarter.png 561w, 342 ./img/barf/8th.png 281w"> 343</figure> 344 345<p>ããã<a href="#part-2">ãã¼ã2</a>ã¸æ¥ããã</p> 346 347</section> 348 349<section id="part-2"> 350 351<h2>ãã¼ã2ï¼srcsetï¼sizesï¼æé«ï¼</h2> 352 353<p>ã©ãããã¡ãã£ã¢ã»ã¯ã¨ãªã¯ãã®ä»äºã«ã¯åãã¦ãªããããããã¦ãã©ããããï¼</p> 354 355<p>ããã§ããã£ãè¦ãã¬ã¹ãã³ã·ãç»åã®åºæ¬ã¨ãªã夿°ã®ãªã¹ãã«æ»ã£ã¦ããããã<em>ãã¤</em>å¤åãã<em>誰ãä½ãç¥ã£ã¦ããã®ã</em>ãèãã¦ã¿ããã</p> 356 357<table> 358 <thead> 359 <tr><th>夿°</th><th>製ä½è ã<br>ã³ã¼ããæ¸ãã¨ã</th><th>ãã©ã¦ã¶ã¼ã<br>ãã¼ã¸ãèªã¿è¾¼ãã¨ã</th></tr> 360 </thead> 361 <tbody> 362 <tr><th>ãã¥ã¼ãã¼ãã®å¯¸æ³</th><td class="no">ç¥ããªã</td><td class="yes">ç¥ã£ã¦ã</td></tr> 363 <tr><th>ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </th><td class="yes">ç¥ã£ã¦ã</td><td class="no">ç¥ããªã</td></tr> 364 <tr><th>ç»é¢å¯åº¦</th><td class="no">ç¥ããªã</td><td class="yes">ç¥ã£ã¦ã</td></tr> 365 <tr><th>ã½ã¼ã¹ã»ãã¡ã¤ã«ã®å¯¸æ³</th><td class="yes">ç¥ã£ã¦ã</td><td class="no">ç¥ããªã</td></tr> 366 </tbody> 367</table> 368 369<p>䏿¹ããç¥ã£ã¦ããã®ã¨ãããã䏿¹ã¯å¿ ããç¥ããªããã§ããç¹ã«æ³¨ç®ï¼ 製ä½è ã¨ãã©ã¦ã¶ã¼ãç¥ã£ã¦ããã¨ã¯ç°ãªããäºãã«ãããªãåã£ã¦ããæãã¯éµã®ç¥ãå½¼ãã¯éã®ç¥ãåãã®ãã¯ã¼ãã²ã¨ã¤ã«åãããã°â¦â¦</p> 370 371<p>ãã®ã®ã£ãããã©ãåãããï¼</p> 372 373<p>ã¡ãã£ã¢ã»ã¯ã¨ãªã¯ç½å®³å¯¾çã®è©°ãåããã¿ãããªãã®ã ãåãã¡ã¯ãã©ã¦ã¶ã¼ã«ãã話ãããããããªããåã¯ãã¥ã¼ãã¼ããã©ã®ãããã®å¤§ããã«ãªããããããªããã ãã©ãã§ããããã®ãããã®å¤§ãããªãããã®ãã¡ã¤ã«ã使ã£ã¦ã»ããããããã£ã¨å¤§ãããã°ããã£ã¡ããã¨ããã£ã¡ã®ãã¤ã¯ç»é¢ãã¬ãã£ãã ã£ãå ´åã«ä½¿ããã©ãã§ãã¬ã¤ã¢ã¦ãã3ã«ã©ã ã«åãæ¿ãã£ãããããããªãã¦â¦â¦ããåãã¯æ§ã ãªå¯è½æ§ã«ã¤ãã¦ã®ã©ãã«ããã¡ã¤ã«ã«è²¼ã£ã¦ããããã®ã©ãã«ã«æ¸ãã¦ããå 容ã¯ããã©ã¦ã¶ã¼ã¯ãç¥ã£ã¦ãããã¨ã ãã©ãã³ã¼ããæ¸ãã¦ãåãã¯ãç¥ããªãããã¨ã ã</p> 374 375<p>ã§ããã£ãè¦ãã¨ãããå®éã«ãããããã®ã¯ã¨ã¦ã骨ãæããã</p> 376 377<p>ãããããããã®ç¶æ ãã²ã£ããè¿ãããã©ãã ããï¼</p> 378 379<p>ãã©ã¦ã¶ã¼ã«å¯¾ãã¦ãã¡ããã¡ãããç½å®³å¯¾çãæä¾ãããããã«ãã·ã³ãã«ã«<em>ãã©ã¦ã¶ã¼ãç¥ããªããã¨ãæãã¦ãã£ãã</em>ï¼ ã¤ã¾ãããã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªãµã¤ãºã¨ãã½ã¼ã¹ã»ãã¡ã¤ã«ã®å¯¸æ³ãã<em>åã</em>ã¯ãã®ã©ã¡ããç¥ã£ã¦ãããããã®ç¥ã£ã¦ããã¨ããã©ã¦ã¶ã¼ã¨å ±æã§ãããããã©ã¦ã¶ã¼ã¯ã½ã¼ã¹ãé¸ã¶ã®ã«å¿ è¦ãªãã¨ããã¹ã¦æã«å ¥ããã¨ã«ãªãããããªãï¼</p> 380 381<p>ã ããï¼ å®éã<a href="http://picture.responsiveimages.org/"><code><picture></code>仿§ã®ææ°ã«ãã¦ãã£ã¨ãå大ãªãè稿</a>ã®ã<code>sizes</code>屿§ã¨ã<code>srcset</code>ã®ä¸ã®<code>w</code>ãã£ã¹ã¯ãªãã¿ã¼ã¯ãã¾ãã«ãã®ããã«ãããã ããã£ãã®è¡¨ãããä¸åº¦è¦ã¦ã¿ããã</p> 382 383<table> 384 <thead> 385 <tr><th>夿°</th><th>製ä½è ã<br>ã³ã¼ããæ¸ãã¨ã</th><th>ãã©ã¦ã¶ã¼ã<br>ãã¼ã¸ãèªã¿è¾¼ãã¨ã</th></tr> 386 </thead> 387 <tbody> 388 <tr><th>ãã¥ã¼ãã¼ãã®å¯¸æ³</th><td class="no">ç¥ããªã</td><td class="yes">ç¥ã£ã¦ã</td></tr> 389 <tr><th>
389ãã¥ã¼ãã¼ãã«å¯¾ããç»åã®ç¸å¯¾çãªå¹ </th><td class="yes">ç¥ã£ã¦ã</td><td><s class="no">ç¥ããªã</s> <span class="yes">ç¥ã£ã¦ãï¼</span> <code>sizes</code>ãããã°ï¼</td></tr> 390 <tr><th>ç»é¢å¯åº¦</th><td class="no">ç¥ããªã</td><td class="yes">ç¥ã£ã¦ã</td></tr> 391 <tr><th>ã½ã¼ã¹ã»ãã¡ã¤ã«ã®å¯¸æ³</th><td class="yes">ç¥ã£ã¦ã</td><td><s class="no">ç¥ããªã</s> <span class="yes">ç¥ã£ã¦ãï¼</span> <code>srcset</code>ãããã°ï¼</td></tr> 392 </tbody> 393</table> 394 395<figure> 396 <img alt="ãsizesãã¨ãsrcsetãã®éã«ãããè¹ã¨è±ç·ãæºé¢ã®ç¬ã¿ãæµ®ãã¹ã両æãåºãã¦ãã" 397 src="./img/rainbow/half.png" 398 srcset="./img/rainbow/full.png 2208w, 399 ./img/rainbow/half.png 1104w, 400 ./img/rainbow/quarter.png 552w, 401 ./img/rainbow/8th.png 276w"> 402</figure> 403 404<p>ããã詳ããè¦ãåã«ã確èªãã¦ãããããã¨ã3ã¤ããã</p> 405 406<p>ã¾ã第ä¸ã«ãããããå®è£ ãã¦ãããã©ã¦ã¶ã¼ã¯ã¾ã ãªããè¦éãã¯æãã<sup id="fnref-2"><a href="#fn-2">2</a></sup>ãã©ã仿§ã¯ã¾ã æµåçã ï¼ç»åã®ãµã¤ãºãæµåçãªã®ã¨ãã£ããï¼ãã ãã使ãã®ã¯ã¡ãã£ã¨å¾ ã£ã¦ã»ãããä»ã¯ã¾ã åããªããã©ããããã使ããããã«ãªãã</p> 407 408<p>ãµãã¤ãããã¤ã¦ã<a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035855.html"><code>srcset</code></a>ã¨å¼ã°ããã¬ã¹ãã³ã·ãç»åã®ææ¡ããã£ããåãã¡ã話é¡ã«ãã¦ããæ°ããææ¡ãã<em>åãã<code>srcset</code>ã¨å¼ã°ãã</em>屿§ããã¨ã«ãã¦ãããå¤ã<code>srcset</code>ãæ°ãã<code>srcset</code>ããã«ã³ãåºåãã®<abbr>URL</abbr>ã®ãªã¹ãã§<code>w</code>ãã£ã¹ã¯ãªãã¿ã¼ã使ããã©ãããããã®<code>w</code>ã¯<em>ã¾ã£ããéãæå³</em>ãªãã ï¼ å¤ã<code>w</code>ã¯ã¡ãã£ã¢ã»ã¯ã¨ãªã®ã·ã§ã¼ããã³ãã§ã<em>ãã¥ã¼ãã¼ã</em>ã®å¹ ãããããã¦ãã䏿¹ãæ°ãã<code>w</code>ã¯<em>ãã¡ã¤ã«</em>ã®å¹ ããããããåãã¯ããããæ°ãã<code>w</code>ã«ã¤ãã¦è¦ã¦ããã®ã§ãä»ã®ã¨ããã¯ããã¡ã³ã»ã¤ã³ã»ãã©ãã¯ãã®è¨æ¶æ¶å»è£ ç½®ã¿ãããªãã¤ã使ã£ã¦ã<code>srcset</code>ã¨<code>w</code>ã«ã¤ãã¦ç¥ã£ã¦ããã¨ãããã¶å¿ãã¦ã»ããã</p> 409 410<figure> 411 <img alt="ãã«ã" 412 src="./img/men-in-black/half.png" 413 srcset="./img/men-in-black/full.png 2236w, 414 ./img/men-in-black/half.png 1118w, 415 ./img/men-in-black/quarter.png 559w, 416 ./img/men-in-black/8th.png 280w"> 417</figure> 418 419<p>å¿ããããªï¼ ããã</p> 420 421<p>ã¿ã£ã¤ãã¯ã以åã®<code><picture></code>仿§ãæå¾ ãè¾¼ãã¦è¿½ã£ããã¦ãã²ã¨ã¸ã®ãç¥ãããæ°ãã<code><picture></code>仿§ã§ããã¡ãã£ã¢ã»ã¯ã¨ãªã«ããã½ã¼ã¹ã®åãæ¿ãã¨ãã½ã¼ã¹URLã§ã®è§£å度ãã£ã¹ã¯ãªãã¿ã¼ã¯æå¹ã ããã<a href="http://usecases.responsiveimages.org/#art-direction">ã¢ã¼ãã»ãã£ã¬ã¯ã·ã§ã³</a>ããã<a href="http://usecases.responsiveimages.org/#device-pixel-ratio-based-selection">åºå®ãµã¤ãºã®ç»åãè§£å度ã«ãã£ã¦åºãåã</a>ãããã¦ããªããééããªããããã®æ©è½ã使ããã¨ã«ãªãã ãããã§ãã·ã³ãã«ã«ç»åã伸ã³ç¸®ã¿ãããã ããªããããã§ç´¹ä»ããæ°ãããã¼ã«ã使ããã</p> 422 423<p>ãªã¼ã±ã¼ãããã§ããããã£ã±ããæºåãæ´ã£ãã<a href="http://ericportis.com/assets/2014-03-24-srcset-sizes/wolves/">ãã£ãã®ä¾</a>ã«æ»ã£ã¦ãä»åº¦ã¯<code>srcset</code>ã¨<code>sizes</code>ã使ã£ã¦ã¿ããã</p> 424 425<p>確èªãã¨ãã¨ãåãã¡ãç¨æããç»åã«ã¯3ã¤ã®ãã¼ã¸ã§ã³ãããã</p> 426 427<ul> 428<li><code>large.jpg</code>ï¼1024 à 768ï¼</li> 429<li><code>medium.jpg</code>ï¼640 à 480ï¼</li> 430<li><code>small.jpg</code>ï¼320 à 240ï¼</li> 431</ul> 432 433<p>ããã¦36emã®ãã¬ã¤ã¯ãã¤ã³ãã§ã°ãªããã1ã«ã©ã ãã3ã«ã©ã ã«åãæ¿ããã</p> 434 435<p>ãã¼ã¯ã¢ããã¯ããã</p> 436 437<pre><code><img src="small.jpg" 438 srcset="large.jpg 1024w, 439 medium.jpg 640w, 440 small.jpg 320w" 441 sizes="(min-width: 36em) 33.3vw, 442 100vw" 443 alt="A rad wolf" /> 444</code></pre> 445 446<p><a href="http://picture.responsiveimages.org/">âpictureâ仿§</a>ããã¨ã«ãã¦ãã®ã«<code><picture></code>è¦ç´ ãè¦å½ãããªããã£ã¦æ°ã¥ãããããããªãã<code>srcset</code>ã¨<code>sizes</code>屿§ã¯<code><img></code>è¦ç´ ã«ãçµã¿è¾¼ããã¨ãã§ãããã ããã®ä¾ã®ããã«ãã·ã³ãã«ã§ããã¢ã¼ãã»ãã£ã¬ã¯ã·ã§ã³ãããç»åãã©ã¼ãããã®åãæ¿ããããããªããããªã¨ããã¬ã¹ãã³ã·ãç»åã
446®ãã¼ã¯ã¢ããã«ã¯åãã®å¤ãå人ã§ãã<code><img></code>ã使ããããããããã»ããããã</p> 447 448<p>ããªãã¿ã®<code><img></code>ã«ãæ°ãã屿§ãã²ã¨ã¤ãã¤è¦ã¦ãããã</p> 449 450<pre><code>src="small.jpg" 451</code></pre> 452 453<p>ãã£ã¨ãããã¯ã¡ã£ã¨ãæ°ãããªãã£ããï¼ ãã®<code>src</code>ã¯ãã©ã¼ã«ããã¯ã§ã<code>srcset</code>ã¨<code>sizes</code>ãçè§£ã§ããªããã©ã¦ã¶ã¼ã§ããä»ã¾ã§ã¨åãããã«ç»åãèªã¿è¾¼ãããã®ãã®ãªãã ãæ¬¡ï¼</p> 454 455<pre><code>srcset="large.jpg 1024w, 456 medium.jpg 640w, 457 small.jpg 320w" 458</code></pre> 459 460<p>ããã¤ãã»ã¨ãã©èª¬æãããªãããã<code>srcset</code>ã¯ãå©ç¨å¯è½ãªç»åã®URLãã«ã³ãåºåãã®ãªã¹ãã§åãåããããããã®ç»åã®å¹ ã¯<code>w</code>ãã£ã¹ã¯ãªãã¿ã¼ã§æå®ãããããç»åã1024 à 768ã§ãã¦ã§ãç¨ã«ä¿åããããªãããã®ç»åã¯<code>srcset</code>å ã§<code>1024w</code>ã¨æå®ããã°ãããç°¡åã</p> 461 462<figure> 463 <img alt="ãä¸ãããã®ç©´ã«ã¯ããããããä¸ãããã®ãããã¯ãã«è²¼ãæ¿ããè±ç·" 464 src="./img/declarative/half.png" 465 srcset="./img/declarative/full.png 2236w, 466 ./img/declarative/half.png 1118w, 467 ./img/declarative/quarter.png 559w, 468 ./img/declarative/8th.png 280w"> 469</figure> 470 471<p>æå®ãã¦ãã®ã¯å¹ ã ããã£ã¦ã¨ãã«æ³¨æããªãã§é«ããæå®ããªãã®ãã£ã¦ï¼ ãã®ã¬ã¤ã¢ã¦ãã§ã®ç»åã¯å¹ ã§å¶å¾¡ããã¦ãããã®å¹ ã¯CSSã§æç¤ºããã¦ããã©ãé«ãã¯æå®ããã¦ãªããå®éã®ã¬ã¹ãã³ã·ãç»åã®ã»ã¨ãã©ãå¹ ã«ãã£ã¦æ±ºã¾ãã®ã§ã仿§ã§ã¯å¹ ã ããæ±ããã¨ã«ãã£ã¦ã·ã³ãã«ããä¿ã¨ãã¨ãã¦ããã ã</p> 472 473<p>å°æ¥çã«ã¯ããã¡ã¤ã«ã®é«ãã<code>h</code>ãã£ã¹ã¯ãªãã¿ã¼ã§æå®ã§ããã»ããããçç±ã<a href="https://github.com/ResponsiveImagesCG/picture-element/issues/85">ããã¤ã</a> <a href="https://github.com/ResponsiveImagesCG/picture-element/issues/86">ãããã©</a>ï¼å人çã«ããããã¯ç´ æ´ããããã¨ã ã¨æãï¼ãä»ã®ã¨ããã¯ã¾ã ã</p> 474 475<p>ããã¦æ³¨æãã¦ããããã®ã¯ã<code>srcset</code>ã®ä¸ã®ã½ã¼ã¹ã«ã<code>1x</code>/<code>2x</code>ã¨ãã£ãè§£å度ãã£ã¹ã¯ãªãã¿ã¼ã<code>w</code>ãã£ã¹ã¯ãªãã¿ã¼ã®<em>ããã</em>ã«æå®ãããã¨ã<em>ã§ãã</em>ãã©ã<code>1x</code>/<code>2x</code>ã¨<code>w</code>ã¯<em>æ··ãã¦ä½¿ããªããã¨</em>ãããã¤ããåã<code>srcset</code>ã®ä¸ã§ä½¿ã£ã¡ããã¡ãã¼ãã¿ã¤ã</p> 476 477<figure> 478 <img alt="ã2xãã¨ã640wãã®è²¼ãç´ãä¸ç·ã«ããã°ããã«é·ã«æãããè±ç·" 479 src="./img/lightning/half.png" 480 srcset="./img/lightning/full.png 2237w, 481 ./img/lightning/half.png 1119w, 482 ./img/lightning/quarter.png 560w, 483 ./img/lightning/8th.png 280w"> 484</figure> 485 486<p>ãªã¼ã±ã¼ãããã<code>srcset</code>ã¨<code>w</code>ã</p> 487 488<p>ãã¨ãã©ã¦ã¶ã¼ãã½ã¼ã¹ãé¸ã¶ããã«å¿ è¦ãªã®ã¯ãã¬ã¤ã¢ã¦ãã®ä¸ã§ç»åãã©ããªãµã¤ãºã§æç»ããããã ãããã®ããã«ã¯<code>sizes</code>ãããããã£ãã®ä¾ãè¦ã¦ã¿ããã</p> 489 490<pre><code>sizes="(min-width: 36em) 33.3vw, 491 100vw" 492</code></pre> 493 494<p>ãã©ã¼ãããã¯ããã</p> 495 496<pre><code>sizes="[ã¡ãã£ã¢ã»ã¯ã¨ãª] [é·ã], [ã¡ãã£ã¢ã»ã¯ã¨ãª] [é·ã] ..." 497</code></pre> 498 499<p>ãã®ããã«ã¡ãã£ã¢ã»ã¯ã¨ãªã¨é·ããçµã¿åãããããã©ã¦ã¶ã¼ã¯ãããããããã®ãè¦ã¤ããã¾ã§ã¡ãã£ã¢ã»ã¯ã¨ãªãè¦ã¦ãããããè¦ã¤ããã°ããã®ã¡ãã£ã¢ã»ã¯ã¨ãªã¨ãã¢ã«ãªã£ãé·ãããã½ã¼ã¹ãåã£ã¦ããããºã«ã®æå¾ã®ãã¼ã¹――æç»ãããç»åã®å¹ ãã¾ãã¯ãã¥ã¼ãã¼ãã«å¯¾ããç¸å¯¾çãªå¹ ã¨ãã¦ä½¿ãã</p> 500 501<p>ããªãã ã£ã¦ï¼ãã¨ãåã¯è¨ããããããªãããã¡ãã£ã¢ã»ã¯ã¨ãªï¼ ã¡ãã£ã¢ã»ã¯ã¨ãªã¯ã¾ããã£ã¦è¨ã£ã¦ãªãã£ãã£ãï¼ã</p> 502 503<p>åãè¨ã£ãã®ã¯ãã¡ãã£ã¢ã»ã¯ã¨ãªãã½ã¼ã¹ãé¸ã¶ã¡ã«ããºã ã¨ãã¦ä½¿ãã®ã¯ã¾ãããã£ã¦ãã¨ãªãã ãããã§ãã£ã¦ãã®ã¯ããã¨ã¯éãããã©ã¦ã¶ã¼ããã®ãã¼ã¸ã®CSSã§ç¥ããã¨ã«ãªããã¬ã¤ã¯ãã¤ã³ãã«ã¤ãã¦ãã»ãã®ã¡ãã£ã¨ã ãå åããã¦æãã¦ããã¦ããã ï¼ãã®ã»ãã®ã¡ãã£ã¨ã®æéã<a href="http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/">ãããéè¦ï¼</a>ï¼ãæåã®ä¾ã§ã¯ãã¬ã¤ã¢ã¦ãã®ãã£ã1ã¤ã®ãã¬ã¤ã¯ãã¤ã³ãï¼36emï¼ã®ããã«ãããã¤ãã®ã¯ã¨ãªãç¡é§ã«ãªã£ã¦ãã®ãè¦ãã¦ãããªï¼ 60emã20emã10em――ã£ã¦ã®ãã¨ã£ã¡ããã£ã¦ãããï¼ ãã®ç¹ã<code>sizes</code>ã®ãã¬ã¤ã¯ãã¤ã³ãã¯ããã®ãã¼ã¸ã®ãã¬ã¤ã¯ãã¤ã³ãããã®ã¾ã¾åæ ãããã®ã«ãªãã¯ããããã¦ããããã®ã¡ãã£ã¢ã»ã¯ã¨ãªã«ç¶ãé·ããããã®ã¡ãã£ã¢ã»ã¯ã¨ãªããããããã¨ãã®ç»åã
503®å¹ ãæå®ãããã ã</p> 504 505<p>ã¨ããããã§ããã©ã¦ã¶ã¼ã¯å¿ è¦ãªæ å ±ããã¹ã¦æã«å ¥ãããã®ãã¾ã§ããªã¾ããã®ã§ãééã£ã¦ã°ããã®åã人éã<a href="#part-1">ãã¼ã1</a>ã§ããã¯ãã«ãªã£ããããªè¨ç®ã¯ããã¨ã¯ãã©ã¦ã¶ã¼ãã£ã¦ãããããã®éã«åãã¯ããã¤ããã§ã°ãªã³ãã¼ã¹ãé£ã¹ã¯ããããããç¥ã®æå³ãããããã«ã</p> 506 507<p>ããã«ï¼ ã¡ãã£ã¢ã»ã¯ã¨ãªã®ä¾ã§ã¯1xã¨2xã®ç»é¢ããã«ãã¼ã§ããªãã£ãã®ãè¦ãã¦ãããªï¼ ãã£ã¡ã®ãã¼ã¯ã¢ãããªã<em>ã©ããª</em><code>device-pixel-ratio</code>ã§ã対å¿ã§ãããããã©ã®è§£å度ããµãã¼ãããã®ãé©å½ãã¨è¿·ãå¿ è¦ã¯ãªãããã¨ã2016å¹´ã«4.8625xã®ã¹ãã¼ãã¦ã©ãããç»å ´ããã¨ãã¦ãã<code>srcset</code>ã¨<code>sizes</code>ãªãã«ãã¼ã§ããã</p> 508 509<p>ã¾ã ããï¼ ãã®è§£æ±ºçã¯ãã©ã¦ã¶ã¼ã«é¸æã®å¹ ããããããã½ã¼ã¹ã¨çµã³ã¤ããã¡ãã£ã¢ã»ã¯ã¨ãªã¯çãå½ãã®ããããã®çµæã«ãªããããçãªãããã©ã¦ã¶ã¼ã¯ãã®ã½ã¼ã¹ãèªã¿è¾¼ã¾ãªãã<em>ãããªã</em>ãã§ã<code>sizes</code>ã¨<code>srcset</code>ã¯ããã¾ã§é åºãããªãã仿§ã§ã¯ãéä¿¡ãé ãã£ããé«ãã¤ãããããã¨ããå°ããã½ã¼ã¹ãèªã¿è¾¼ããªãã·ã§ã³ãèªãããã¦ããã</p> 510 511<p>ãã©ããããã¹ã¦ãã¾ãããããã«æããããã¨åã¯è¨ãããã£ããã¨ããªãããªãããæ¡ä»¶åå²çã¢ããã¼ãããã宣è¨çã¢ããã¼ãã®ã»ãã«å©ç¹ããããã¨ç´å¾ãã¯ãããããã§ãã¡ãã£ã¨å¾ ã£ã¦â¦â¦é·ãã£ã¦ãªã«ï¼ã</p> 512 513<p><a href="http://www.w3.org/TR/css3-values/#lengths">é·ãã¯ãããã種é¡ãèããããã</a>ï¼ 絶対å¤ï¼<code>99px</code>ã<code>16em</code>ï¼ã§ãç¸å¯¾å¤ï¼ä¾ã«åºã¦ãã<code>33.3vw</code>ã¨ãï¼ã§ãããã å®éã®ã¬ã¤ã¢ã¦ãã§ã¯ãããã§ã®ä¾<em>ã¨ã¯éã£ã¦</em>ã絶対å¤ã¨ç¸å¯¾å¤ãçµã¿åãããã¦ããã¨ãããããããã¨æããããã§ã<a href="http://caniuse.com/calc">æå¤ã«ããã£ãããµãã¼ãããã¦ã</a> <a href="http://dev.w3.org/csswg/css-values/#calc-notation"><code>calc()</code>颿°</a>ã®ç»å ´ã<a href="http://ericportis.com/assets/2014-03-24-srcset-sizes/wolves/wolfroll.html">ä¾ã®3ã«ã©ã ã®ã¬ã¤ã¢ã¦ãã«12emã®ãµã¤ããã¼ã追å ããã¨ããã</a>ãããã«ã¯<code>sizes</code>屿§ããã調æ´ããã°ããã</p> 514 515<pre><code>sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 516 100vw" 517</code></pre> 518 519<p>ã§ããããï¼</p> 520 521<p>ãããã£ãããã£ããåã¯ææ ®æ·±ãããè¨ãããããããããªãããæ°ããç¥èãã©ã£ã¨æµãè¾¼ãã§ãããã¨ã«ã²ã©ãç²ãã¦ï¼ã§ãåæã«ãããããã¦ï¼ããããããã©ããã¾ã ã²ã¨ã¤æ®ã£ã¦ã――ããã«ã¶ãä¸ãã£ã¦ã<code>100vw</code>ã¯ãªãã ï¼ ã¡ãã£ã¢ã»ã¯ã¨ãªãæ¸ãå¿ããã®ãï¼ã</p> 522 523<p>仿§ã®è¨èãåãã¦è¨ãã¨ãã¡ãã£ã¢ã»ã¯ã¨ãªã¨ãã¢ã«ãªã£ã¦ããªãé·ãã¯ãããã©ã«ãã®é·ããã ããããããããã¡ãã£ã¢ã»ã¯ã¨ãªããªãã£ãã¨ãããã®é·ãã使ããããã¤ã¾ãã巨大ãªããã¼ã¸å ¨ä½ã«ã¾ãããå¹ ã®ããã¼ç»åãªãããã¼ã¯ã¢ããã¯ãããªãµãã«ã·ã³ãã«ã«ãªãã</p> 524 525<pre><code><img src="small.jpg" 526 srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" 527 sizes="100vw" 528 alt="A rad wolf" /> 529</code></pre> 530 531<p>ã«ã³ã¿ã³ãã«ã³ã¿ã³ã</p> 532 533<figure class="full"> 534 <img alt="空ã£ã½ã®ã°ãªã³ãã¼ã¹ã®ç¼¶" 535 src="./img/empty-can/half.png" 536 srcset="./img/empty-can/full.png 4108w, 537 ./img/empty-can/half.png 2054w, 538 ./img/empty-can/quarter.png 1027w, 539 ./img/empty-can/8th.png 514w, 540 ./img/empty-can/16th.png 257w"> 541</figure> 542 543</section> 544 545<footer class="footnotes" id="footnotes"> 546 <ol> 547 <li id="fn-1">å°ãªãã¨ã<a href="http://tabatkins.github.io/specs/respimg/#variable-size">伸ã³ç¸®ã¿ãã</a>
547ç»åã®å ´åã¯ã<a href="#fnref-1">â©</a></li> 548 <li id="fn-2">ããã¦åãï¼ãããããã®åãï¼ï¼<a href="https://www.indiegogo.com/projects/picture-element-implementation-in-blink">ãã®ç¶æ³ããã£ã¨è¯ããããã¨ãã§ãã</a>ï¼<a href="#fnref-2">â©</a></li> 549 </ol> 550</footer> 551 552</main> 553 554<footer role="contentinfo"> 555 <p class="credit">ãã®ã³ã³ãã³ãã¯<a href="http://ericportis.com/posts/2014/srcset-sizes/">Srcset and sizes â ericportis.com</a>ï¼2014å¹´3æ24æ¥å ¬éï¼ã®æ¥æ¬èªè¨³ã§ããæ¬æä¸ã®å種æè¡ä»æ§ããã®å®è£ ã«ã¤ãã¦ã®è¨è¿°ã¯ãªãªã¸ãã«çå ¬éæã®ãã®ã§ãããç¾æç¹ã®ãã®ã¨ã¯ç°ãªãå ´åãããã¾ãããã¹ã¦ã®ããã¹ãã¨ã¤ã©ã¹ãã¬ã¼ã·ã§ã³ã¯<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">ã¯ãªã¨ã¤ãã£ãã»ã³ã¢ã³ãºè¡¨ç¤º3.0ã©ã¤ã»ã³ã¹</a>ã®ãã¨ã«æä¾ããã¦ãã¾ãã</p> 556 <table class="colophon"> 557 <tbody> 558 <tr> 559 <th>èè </th> 560 <td><a href="http://ericportis.com/">ã¨ãªãã¯ã»ãã¼ãã£ã¹ï¼Eric Portisï¼</a></td> 561 </tr> 562 <tr> 563 <th>訳è </th> 564 <td><a href="http://terkel.jp/">é´æ¨ä¸ï¼Takeru Suzukiï¼</a></td> 565 </tr> 566 <tr> 567 <th>å ¬éæ¥</th> 568 <td><time datetime="2014-09-07">2014å¹´9æ8æ¥</time></td> 569 </tr> 570 <tr> 571 <th>æ´æ°å±¥æ´</th> 572 <td><a href="https://github.com/terkel/srcset-sizes/commits/gh-pages">Commits · terkel/srcset-sizes · GitHub</a></td> 573 </tr> 574 </tbody> 575 </table> 576</footer> 577 578</body> 579</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.