読者です 読者をやめる 読者になる 読者になる

KOI

ポケモンだいすき同人女の話です。

「なんとなく」初心者から脱却しよう-Retinaディスプレイ編

雑記 会社 有益
 ここ最近仕事でやっとデザインだけではなくコーディングにも進ませてもらえることが増えて、自分の「なんとなくこうやればできていた」感覚のせいで何度も先輩からリテイクをいただき、苦しんでおります。
 私は師にHTMLやCSSJavaScriptなどを「なんとなくこうやればこうなるのだ」と頭に入れておけば良いと言われて(本当に初心者向けのスクールだったのだけど)その通りにその「なんとなく」の感覚を身につけてそれなりのものを作れるようになったしそれなりのものに見えるようになった。
 だけど、実際現場ではそうはいかない「なんとなく」は初心者が理解するための登竜門であって「なんとなく」から「卒業」してようやくプロのスタートに立てるのだ。ってついさっき気付いたことなんだけどね。なので自分のためにもちょっとまとめておこうとブログを描いている次第です。
 

Retinaディスプレイって何?

 

 まずは通常のディスプレイの仕組みから。普通は1インチ(1inch)のピクセルの密度をピクセル解像度と言って、ppi(pixel par inch)ということになる。
ちなみに類似の単位のdpi(dots par inch)は1インチ中のドット数のことを指す。
ドットとピクセルの違いは?
ドットはディスプレイの物理的な点のこと
ピクセルはディスプレイ上で光っている点のこと
 ppiとdpiは違う意味だけど、実際は1ドット単位で光っているので、ディスプレイ上では同じ値を示していると考えて大丈夫。(あくまでもディスプレイ上なので、印刷とは別個に考えます。)
 
 通常のディスプレイはディスプレイの物理的なドット数とディスプレイに表示されているピクセルが同じになります。(これをドットバイドットっていうんだって)*1
 ここでやっと出てくる、例のやつ、Retinaディスプレイディスプレイの物理的なドット数2倍になっています。となるとどうなるか。今まで通りにディスプレイに表示されているピクセル数を作成すると画像がボヤける原因になります。*2
 

まとめ 

 な〜〜〜〜るほどな
 ただ2倍にしとけばいいっしょ〜!じゃダメなんだ、ちゃんと理解することでちゃんと身について先輩に同じ指摘を何度もさせることも無くなるわけだ!よかったよかった。 
 いろいろなRetinaディスプレイに関する記事を見ていると、云々カンヌンで様々な解像度のディスプレイが登場してきて2倍とか3倍とかそういう問題じゃなくなってきているようです。それもきちんと論理を理解していれば応用がきくけど、「なんとなく2倍にしとけばいいっしょ」じゃ時代に取り残されちゃうんだね。
 
 

コーディングにおいての初歩的なメモ

 

imgタグ

 100px*100pxのtest.png画像をそのままのサイズでRetinaディスプレイ上で輪郭を綺麗なまま表示させるなら200px*200pxのtest@2x.png画像を用意して、
<img src=“test@2x.png” width=“100” hright=“100”>
と記述すれば良い。そうすれば、Retinaディスプレイの謎技術で、100*100の領域に200*200の画像を表示される。
 
 また、HTML5からはsrcsetが便利だそうで。
srcsetには
Retinaディスプレイ用に画像を切り替える
ことができるそうです。
 他にもいろいろあるそうなので、こちらを参照してください。
 srcsetは下記のように使用します。
<img src=“test.png”      srcset=“test.png 1, test@2x.png 2x”>
 
src
 srcsetに対応していないブラウザはこれを読み込みます。
srcset
 コンマ区切りで画像と、その画像が読み込まれる条件を指定します。通常のディスプレイなら「test.png」が、Retinaディスプレイなら「test@2x.png」が読み込まれます。この時srcの画像は読み込まれません。条件の‘2x’はサイズ指定なので、自動で気に1/2に縮小して表示してくれるものになります。
 
 

CSS

 画像をHTML要素のbackground-imageとしてCSSで指定知りてる場合は、画像の切り替えをCSSですることができる。びっくり。
方法は2つ
  • Media Query
  • CSS4 image-set
 
Media Query
 背景に100px*100pxのtest.pngを設定する場合は
*{        background-image:url(’test.png’); }
です。が、Retinaディスプレイの対応をする場合は
  1. background-sizeで通常のサイズを指定する
  2. メディアクエリのmin-device-pixel-ratioかmin-resolutionでRetinaディスプレイを判別
の手順を踏む必要があります。らしいよ〜
 CSSに関して、というかメディアクエリに関して全然全く詳しくないので、ここに書いてあることを自分の脳に叩き込むために打ち込んでるわけですけど。
*{     background-image: url(“text.png”);     background-size:100px 100px; } @media screen and (-webkit-min-device-picel-ratio:2),(min-resolution:2dppx){     *{         background-image: usl("test@2x.png”);     }
}
という記述にすればメディアクエリとしてRetinaディスプレイに対応できるみたいです。

min-device-pixel-ratioは、w3cの仕様に無いwebkitの独自拡張です。
標準化が進んでいるのはmin-resolutionの方ですが、webkitがmin-resolutionに対応していないので、webkitだけmin-device-pixel-ratioを使用しています。

min-resolutionで指定しているdppxとは、dot per pixelを表す単位です。
2 dot per pixelなのでRetinaディスプレイが該当するわけです。
この部分の単位には、他にもdpcmやdpiなども指定できるようです。

へ〜
 
 
CSS4 image-set
 
 iOSがver6の時にsafariで使えるようになった記述方法のようです。
*{  background-image:image-set(url(“test.png”) 1x, url("test@2x.png”) 2x) }
仕組みはsrcsetに似た感じなのかな。
 
 
 ちなみにうちの会社では
 1280px*500pxのsample@2x.png背景画像に対して1280pxの方が可変なので、
*{  background-image:url(sample@2x.png);       background-size:auto 250px; }
という記述にしていました。これが一番なんか分かりやすいな。会社万歳。
 
 
 
 
 わけわからなかったposition属性のrelativeとabsoluteがあやふやだった問題で悩まされていたので、次そのこともまとめておきたいなあ。理解しちゃえば簡単なことだったんだけど・・笑

*1:例:100px*100pxの画像をそのままポンと置いても100px*100pxのまま綺麗に表示される。

*2:例:100px*100pxの画像を綺麗に表示させたいなら2倍の200px*200pxで作成しなければいけない。