Retinaディスプレイを搭載したiPhone 4が発売されて一年半。
巷では高解像度のiPadやMacBookの発売が噂され、Mac OS XではiPhoneのRetinaディスプレイに相当するHiDPIモードがほぼ完成に近付いています。

これら高解像度ディスプレイを搭載した環境では、互換性を維持するため、低解像度の環境に合わせて作られたコンテンツは基本的に低解像度のまま表示されます。

それはウェブブラウザにおいても例外ではありません。従来のウェブページは何の問題も無く表示されますが、新しい高解像度のデバイスには、新しい高解像度のコンテンツを提供したいものです。

Retinaディスプレイを搭載したiPad、そしてパソコンが普及した時、ウェブ制作の手法も変化を求められます。来るべき時代に備え、今のうちにRetinaディスプレイへの対応方法を確認しておきましょう。

※ 以下に記した手法はMacおよびiOSのSafariで動作確認を行っていますが、
これらの手法が将来もずっと利用できるという保証はありません。
マイクロソフトが余計なことをして全て台無しになるという可能性にご留意下さい。(笑)



CSSで出来ることはCSSでやる
CSS3対応ブラウザの普及で、角丸、グラデーション、ドロップシャドウなど、従来は画像が必要だったデザインも、CSSだけで表現する事が可能になってきました。

CSSを使った角丸（border-radius）、グラデーション（background:linear-gradient等）、ドロップシャドウ（box-shadow）は基本的に全て解像度非依存なので、これらを使用しておけばRetinaディスプレイへの対応はノープロブレムです。


画像はTumblrでの例。

画像を使った角丸とborder-radiusを使った角丸が混在していますが、後者は高解像度になっても美しい丸みが維持されています。また、box-shadowなどで表現されたボタンのハイライトなどもジャギーが発生していませんね。

また、通常のテキストは全て解像度非依存です。何もしなくても、常に最適な解像度でレンダリングされるでしょう。

画像を使用しつつ高解像度に対応する方法もありますが（後述）、そっちは結構面倒なので、なるべくCSSで出来る事はCSSでやった方がいいです。



ベクター画像（SVG等）を使う

画像はapple.comでの例。
メニューのリンゴマークやテキストなどにSVG画像が使われています。
SVGなどのベクター画像は当然解像度非依存ですので、Retinaディスプレイにも容易に対応できます。



背景画像を使う場合、二種類の解像度を用意する
.icon{
    background-image:  url(32x32.png);
    background-size:   32px 32px;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .icon{
        background-image:  url(64x64.png);
    }
}あらかじめ「background-size」で背景画像の大きさを固定しておき、Media Queryの「min-device-pixel-ratio」条件分岐でRetina環境のみ高解像度の画像を読み込むように設定します。
※ device-pixel-ratioの概念については後述。

上記のような書き方をしておけば、従来の通常解像度のパソコンや、CSS3に未対応の古いブラウザを使用している場合、「32x32.png」の方の画像が使用されます。
互換性もバッチリ！
※ 現在はWebKit系のブラウザしか対応していないため、上記の例では「-webkit-min-device-pixel-ratio」と記述していますが、将来的には「min-device-pixel-ratio」といった記述が通用するようになるでしょう。

いわゆる「CSSスプライト」を使用している場合、Retina環境への対応は画像の差し替えと「background-size」の設定だけでOKです。
「background-position」の値を変える必要はありません。


画像は当サイトの例。
メニュー部分に二種類の解像度のCSSスプライトが用意されています。


画像はTwitterのツイートボタン。鳥のアイコン部分が背景画像になっていて、二種類の解像度のCSSスプライトが用意されています。



そもそもdevice-pixel-ratioって何よ？
Retinaディスプレイでのウェブページの表示は、互換性の維持のため、CSSにおける「1px」がディスプレイ上の「2ピクセル」として扱われます。

CSS単位の「px」と、実際の画面上での「ピクセル」がどれだけ乖離しているか、を表す数値が「device-pixel-ratio」です。

従来の普通のパソコンの「device-pixel-ratio」は全て「1」です。古いiPhoneなども「1」になります。

それに対し、Retinaディスプレイを搭載したiPhone 4は、実際の画面解像度が「640 x 960ピクセル」ですが、CSSから取得出来る仮想的な画面解像度は「320 x 480px」ですので、「device-pixel-ratio」は「2」です。画面がHiDPIモードのMacも「2」になります。

中くらいの解像度のAndroid機では「1.5」などの値が設定されていることが多いようです。

この「device-pixel-ratio」をMedia Queryの条件分岐に用いたのが、先述の…
@media only screen and (-webkit-min-device-pixel-ratio:2){…だったというわけです。

※ iPhoneではviewportの設定によって表示サイズが変動しますが、device-pixel-ratioには影響しません。基本的にdevice-pixel-ratioの値はデバイス毎に固定です。



JavaScriptでdevice-pixel-ratioを取得する
対応したブラウザでは、「window.devicePixelRatio」でdevice-pixel-ratioの値を取得する事が出来ます。
hoge = 1;
if(window.devicePixelRatio){
    hoge = window.devicePixelRatio;
}

if(hoge >= 2){
    alert("Retinaディスプレイ！！");
}else{
    alert("ふつうのディスプレイ。");
}特殊な例かもしれませんが、JavaScriptでコンテンツを表示しているような場合、この方法で表示する画像を振り分けるなどの対応が可能になるでしょう。

ウェブサーバ側でdevice-pixel-ratioを取得する方法は今のところ無いようです。JavaScriptで取得した値をどうにかしてサーバに送りましょう。



img要素は…どうしよう？
<img src="1280x720.png" width="640" height="360" />とりあえず巨大な画像を指定しておいて、widthとheightに半分の数値を書けばいいかな？
よくわかんね。



ファビコン（favicon.ico）はマルチサイズ対応にする

通常、いわゆるファビコンでは「16x16」ピクセルの画像が使用されていますが、Retinaディスプレイ環境では「32x32」の画像が使われるようになるでしょう。

Windowsのアイコン形式である「ICO」ファイルは、元々、様々な解像度の画像を一つのファイルに同梱する事が可能な形式です。ファビコンには最低限、「16x16」と「32x32」の二種類の画像を入れておきましょう。

普通のファビコン作成ツールなどでは「16x16」の解像度にしか対応していない場合が多いので要注意。本格的なICOファイル編集ソフトが必要になるでしょう。



Retinaディスプレイは持ってないけど、Retinaディスプレイでの表示を試したい！
MacのHiDPIモード、およびSafariを使用することで擬似的に高解像度表示を再現することが出来ます。HiDPIモードは今のところ隠し機能ですので、自己責任でお願いします。詳しいやり方はぐぐってください。

HTMLを書いていると出くわす、意味のわからない略語の数々。
元の意味が分かればきっと覚えやすくなる！

というわけで、ウェブ関連言語の英単語、略語の意味を一覧にしてみました。

※要素そのものの役割・意味ではなく、元の英語の意味を主に記述しています。このリストを参考に文書をマークアップしないで下さい。
※全ての要素を網羅はしていません。
※万が一、間違いがあってもしりません。



<a href="">
a → anchor（アンカー）
アンカーは船の錨(いかり)のこと。
WYSIWYGエディタなどでは鎖の絵がアイコンになってる事が多いですね。
昔はリンクの終点に<a name="">みたいなのを置いて、ページ内の特定部分にリンクを張ったりしたので、まさしく「アンカー」だったけど、今は大抵のリンクは投げっぱなしですね。

href → hyperlink reference（ハイパーリンク・リファレンス）
リファレンスは「参照」のこと。リンクは参照の行為である。


<img src="" alt="" />
img → image（イメージ）
画像のことですね。

src → source（ソース）
ソースは調味料じゃなくて「出典」「源(みなもと)」の方。
画像の埋め込みは参照の行為ではない。

alt → alternate（オルターネート）
オルターネートは「代替の」という意味。
オルターネート・テキスト（代替テキスト）を入れますね。


<br />
br → break（ブレーク）
ブレークは「ぶっ壊す」という意味。
英語で「改行」のことを「line break（行をぶっ壊す）」と言う。


<p>
p → paragraph（パラグラフ）
パラグラフは段落のこと。


<div>
div → division（ディビジョン）
ディビジョンは区切りのこと。
会社の部とか課とかを何とかディビジョンと言ったりしますね。


<span>
span（スパン）
スパンは「範囲」のこと。


<head> <body>
head（ヘッド）
ヘッドは頭のこと。
ドキュメント・ヘッド（文頭）と昔の仕様書には書かれている。
ほとんどの内容は人間には見えないけどね！

body（ボディ）
ボディは身体のこと。


<link rel=""> <link rev="">
link（リンク）
カタカナ語として定着してしまった「リンク」ですが、
「つながり」「絆」という意味ですね。

rel → relationship（リレーションシップ）
関係性のこと。

rev → reverse（リバース）
リバースは「逆」のこと。リバース・リンク。


<iframe>
iframe → inline frame（インライン・フレーム）
フレームは枠、額縁のこと。インラインは一列の、列に並んだ、というようなこと。
昔、ウェブブラウザのウインドウ全体を区切り、表示領域を分ける「フレーム」という機能があった。それに対し、ページに内包される表示領域はインラインフレームと呼ばれた。


<embed />
embed（エンベッド）
エンベッドは埋め込むこと。
余談だが、embedはembの過去形ではない。


<section> <header> <nav> <article> <aside> <footer>
section（セクション）
セクションは文章の節のこと。
header（ヘッダー）
ヘッダーはこの場合、文書の先頭にごちゃごちゃ書く部分ですかね。
nav → navigation（ナビゲーション）
ナビゲーションは「案内」のこと。
article（アーティクル）
アーティクルは「記事」のこと。
aside（アサイド）
アサイドは「余談」のこと。
footer（フッター）
ヘッダーの反対。


<h1> 〜 <h6>
h → heading（ヘッディング）
ヘッディングは表題、見出しのこと。


<ol> <ul> <li>
ol → ordered list（オーダード・リスト）
オーダー（順位付け）されたリストのこと。
番号付きリスト。

ul → unordered list（アンオーダード・リスト）
アンオーダード、つまりオーダー（順位付け）されてないリストのこと。
番号付いてないリスト。

li → list item（リスト・アイテム）
リストのアイテム（項目）ってことですね。


<dl> <dt> <dd>
dl → definition list（デフェニション・リスト）
デフェニションは「定義」という意味。
定義リスト。

dt → definition term（デフェニション・ターム）
タームは「語」というか「用語」というか「言葉」という意味ですかね。
定義する語がこの中に入りますね。

dd → definition description（デフェニション・デスクリプション）
デスクリプションは「説明」。
定義する語に対応する説明文を中に入れますね。
昔はインデントをするためだけにこれらの "タグ" を使う人がいました。


<form action="" method="">
form（フォーム）
フォームは、記入用紙のこと。お役所に提出する書類を何とかフォームと言ったりします。

action（アクション）
行動、行為、作用のこと。

method（メソッド）
方式のこと。
GETとPOSTは、HTTP通信の方式を指定しています。


<input type="radio" name="" value="" />
radio（ラジオ）
ラジオボタンのこと。
昔のカー・ラジオで、一つのボタンを押すと他のボタンが元に戻る仕組みがあり、それが由来となりました。

name（ネーム）
名前のことです。

value（バリュー）
値(あたい)という意味です。


<input type="submit" />
submit（サブミット）
提出という意味です。


<canvas>
canvas（キャンバス）
キャンバスは帆布(はんぷ)のことです。
船の帆に使うための丈夫な布で、枠に貼って絵を描くのにも使われました。
余談ですが、著者はキャンパス・ノートを絵を描くのに使っていたことがあります。
無論、キャンバスとキャンパスは全く別の英単語です。


<table> <tr> <th> <td>
table（テーブル）
食卓…ではなく、表のことです。
昔のイギリス英語で、スケジュールのことを「タイムテーブル」といいました。

tr → table row（テーブル・ロー）
ローは「行」のことです。行列の行、つまり横方向の並びのことです。

th → table header（テーブル・ヘッダ）
td → table data（テーブル・データ）
ヘッダとデータ。見出しと情報ですね。


<td rowspan="" colspan="">
rowspan → row span（ロー・スパン）
スパンは「またがる」。
スパンする行(ロー)の数を数字で入力するわけですね。

colspan → column span（コラム・スパン）
コラムは「列」。行列の列、つまり縦方向の並びのことです。
スパンする列(コラム)の数を数字で入力するわけですね。


<ins> <del>
ins → inserted（インサーテッド）
del → deleted（デリーテッド）
インサーテッド（追加された）部分と、デリーテッド（削除された）部分。


<em> <strong> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark>
em → emphasis（エンファシズ）
強調。
strong（ストロング）
強い。
small（スモール）
小さい。
s → strikethrough（ストライクスルー）
取り消し線。
cite（サイト）
引用、言及、引き合いに出すこと。作品名などが入る。
q → quote（クオート）
引用。citeと違って、こっちは引用文そのものが入る。
dfn → define（デファイン）
定義。
abbr → abbreviation（アブレビエーション）
略語。
time（タイム）
時刻。
code（コード）
プログラムのコード。
var → variable（バリアブル）
プログラムの変数。
samp → sample（サンプル）
プログラムの出力サンプル。
kbd → keyboard（キーボード）
パソコンのキーボード。
sub → subscript（サブスクリプト）
下付き文字。
sup → superscript（スーパースクリプト）
上付き文字。
i → italic（イタリック）
古フランス語？で「イタリアの」という意味。イタリアで発明された斜字体のこと。
b → bold（ボールド）
勇ましい。ずうずうしい。太字体のこと。
u → underline（アンダーライン）
下線。
mark（マーク）
マーキング。ハイライト。


<ruby> <rt> <rp>
ruby（ルビー）
ルビ、フリガナのことです。
昔のイギリスの印刷用語です。活字サイズにそれぞれ名前がついていて、5.5ポイントの活字をルビーと呼んでいました。これが日本に輸入された時にフリガナに使われ、フリガナという意味で広まりました。
ダイアモンド（4.5pt）、パール（5pt）、エメラルド（6.5pt）など、宝石の名前が付いた活字サイズはいくつかあります。

rt → ruby text（ルビー・テキスト）
ルビそのものですね。

rp → ruby parentheses（ルビー・パレンテシーズ）
パレンテシーズは丸括弧のこと。身も蓋もねぇな。


<bdi dir="ltr"> <bdo dir="rtl">
bdi → bidirectional isolated（バイディレクショナル・アイソレーテッド）
バイディレクショナルは双方向。
アイソレーテッドは独立した。
bdo → bidirectional override（バイディレクショナル・オーバーライド）
オーバーライドは覆す。上書き。
dir → direction（ディレクション）
ltr → left to right（レフト・トゥ・ライト）
rtl → right to left（ライト・トゥ・レフト）
ディレクションは方向。


&lt; → <
lt → less than（レス・ザン）
「より小」記号、いわゆる「小なり」のこと。
「A < B」は、「A is less than B（AはBより小さい）」

&gt; → >
gt → greater than（グレーター・ザン）
「より大」記号、いわゆる「大なり」のこと。
「A > B」は、「A is greater than B（AはBより大きい）」

&copy; → ©
copy → copyright（コピーライト）
直訳すると複製権。著作権のこと。
最初にコピーライトを著作権って訳した人は凄いね！
著作権表示に使われるマーク。

&reg; → ®
reg → registered（レジスタード）
レジスタードは「登録された」。
レジスタード・トレードマーク（登録商標）に使われる。
迂闊に使用すると罪になるかもしれないマーク。

&nbsp;
nbsp → non-breaking space（ノンブレーキング・スペース）
自動改行を防止する特別なスペース。
実際には改行とか関係なく、「連続して書いても帳消しにならない便利なスペース」という意味で使われることがほとんどですね。

&amp; → &
amp → ampersand（アンパーサンド）
語源はラテン語か何か。英語でいうところのand記号。

&quot; → "
quot → quotation（クオーテーション）
クオーテーション・マーク。引用符。


vertical-align: baseline
vertical（バーティカル）
垂直。

align（アライン）
整列。

baseline（ベースライン）
基線。


margin: border: padding:
margin（マージン）
余白。

border（ボーダー）
境界線。

padding（パディング）
埋草、水増し、詰め物。


border-radius:
radius（レディアス）
半径。角丸の半径のことを「アール」って言う人がたまにいる。


width: 64px
width（ウィッズ）
幅。日本ではこの単語の読み方を巡って派閥が出来ているらしい。

px→pixel（ピクセル）
これからの時代、解説が難しい単位になっていくでしょう。

height: 3em
height（ハイト）
高さ。

em（エム）
emという印刷業界の単位。原義はアルファベットの「M」です。かつて「M」の字は正方形という決まりがあり、「M」の字の横幅を測っていた名残りでこのような単位があります。