Bookなどの高解像度ディスプレイが増えています。高解像度になると、ひとつひとつのドットが小さくなることで文字や画像が滑らかに表示されてとてもWebサイトもキレイに表示されます。その恩恵を受けられるのは高解像度の画像を用意してあるサイトだけで、今までどおりの画像では逆にぼやけて汚く見えてしまいます。ディスプレイに対応させるには主な方法を紹介。Queryを使い画面サイズごとに画面に合った解像度の画像を「background-image」で表示させる方法。JavaScript「Retina.js」を使い、高解像度ディスプレイの場合「@2x」のプレフィックスが付いた画像を自動で読み込ませる方法。pictureタグpictureタグを使い「source」属性で各画面サイズ、解像度に合わせた画像を指定する方法。「img」の「srcset」属性を使い各画面サイズ、解像度に合わせた画像を指定する方法。Rriver」で詳しく説明されている。srcsetの使い方このブログでは、上記4つの方法で書き方と実装方法が簡単だった「img」タグの「srcset」属性を使う方法を採用した。通常画像と解像度が2倍の画像を用意する。ファイル名の規則は特にないので自分が分かりやすいファイル名にする。画像の指定属性は「src」と「srcset」の2つで行う。src「srcset」に対応していないブラウザ用に通常の「src」属性で画像を指定。srcset「ファイルパス」+「スペース」+「解像度」で画像を指定し、読み込みたい画像を「,」で区切り追加していく。2x"1.5倍の解像度の時は「/uploads/150-marie-lloyd.jpg」を読み込み、2倍の解像度の時は「/uploads/200-marie-lloyd.jpg」を読み込む。因みに解像度指定の「1.5x」や「2x」の「x」はエックス。タグの全体はこのようになる。「Picturefill.js」を使うことで未対応ブラウザへの対応が可能。src="//cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>をタグの前など書けば良い。月50万稼げたら年収は600万で、普通の人以上の生活ができます。1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう!おわりにRetinaディスプレイなどの高解像度ディスプレはとてもキレイですが、このようなことをしっかり行わないとその恩恵を受けられません。HTMLの仕様でもまだ定まっておらず、ブラウザの対応状況もまちまちなので、はやく決定的な指定方法が確立されて欲しいですね。1人で完結しているオールインワンブロガー。経験したり学んだ事を発信し続けていたらブログで生活できるようになりました。自分の能力(ちから)で生きていくを信念に、ストレス無く自分の人生を楽しむことをに全力を注いでいます。このブログの転載、引用については「転載、引用について」をご覧ください。SWT710」レビューオールバーズのスリッポンタイプレビュー【Allbirds】マーケティング脳を身につければ人生が好転する。