コンテンツ
- 必要な知識： 基本的なHTML5とCSS
- 必要なもの： テキストエディタ、画像プロセッサ、HDスマートフォンまたはタブレット
- プロジェクト時間： 1時間
上記は、OS XLionを実行している最新の24インチiMac上の1999年頃のWindows98デスクトップ全体のスクリーンショットです。切手のようです。画面解像度の変更は、Webデザインの変更に影響します。設計者は、90年代には前例のない一連の技術を展開できるようになりました。タイポグラフィにはヒントの豊富なTFT互換フォントと垂直リズムを使用し、クリーンな組織のために十二進法のメトリックに対してグリッドレイアウトを作成します。バランスの取れた背景と見事なロゴは、24ビットのカラーホイールベースのパレットとますます複雑になるグラデーション技術から生まれています。
多くの場所で画面サイズが縮小するにつれて、解像度は増加しています。超高ピクセル密度のディスプレイ、スマートフォン、タブレットは、新鮮な技術を育む新しい環境を提供します。しかし、ピクセル密度技術が基づいている原則は、多くの現代のWeb開発者が認識しているよりも古いものです。
16年前にさかのぼります–多くの優れたデザイナーが革新的な計画を立てるために腰を下ろしました。 CSSは、1996年の新しいテクノロジーであり、現在のWebページのスタイリングに関する信頼できる標準ではありませんでした。 CSS作成者の計画は、スタイル命令をデバイスへの依存から分離することでした。たとえば、CSSで画面上のWebページのスタイルを設定できるようにするだけでなく、印刷されたWebページのスタイルも設定できるようにしたいと考えていました。その大胆な目的のために、彼らはピクセルの定義に次の句を挿入しました。
「出力デバイスのピクセル密度が一般的なコンピューターディスプレイのピクセル密度と大きく異なる場合、UAはピクセル値を再スケーリングする必要があります。推奨される参照ピクセルは、ピクセル密度が90dpiで、アームの長さのリーダーからの距離を持つデバイス上の1ピクセルの視角です。名目上の腕の長さが28インチの場合、視角は約0.0227度です。」
これは、CSSの「px」がデバイスピクセルを意味することは決してないことを意味します。また、長さの単位でもありません。 CSS pxは、角度測定として定義されます。
これは、CSSピクセルが単なるデバイスピクセルであると自然に想定している一部の開発者を驚かせます。実際にはこれは真実かもしれませんが、詳細はもっと複雑です。
01.要点
CSSの当初の計画は、モニターだけでなくプリンターもサポートすることでしたが、モニターの機能も変更されることがすぐに明らかになりました。 CSSピクセルが単なるデバイスピクセルである場合、画面の解像度が上がるにつれて、時間の経過とともにすべてがますます小さく表示されます。角度測定の設計は、印刷だけでなく、解像度に依存しないという考えにもよく適合しました。これは、ベンダーによって開発されている最新のCSS3を含むCSSの後続のバージョンが、pxを角度測定として定義した理由を説明しています。 （唯一の変更点は、参照ピクセル密度を90dpiから96dpiに増やし、CSS参照ピクセルをわずかに鋭角の0.0213度にすることです。）
pxは非線形の角度であるため、角度の測定値が180度未満のものはすべてCSSpxで測定できます。ジェレミークラークソンの身長は6フィート5インチです。 100ヤードの安全な距離から、彼は57.5pxの高さであるように見えます。地球の月は、満月のときの幅が24.3ピクセルで、クラークソンの約半分です。単位は非線形であるため、期待どおりにスケーリングできるとは限りません。たとえば、1000pxは21.075度ですが、2000pxは40.813度で、2倍よりわずかに小さくなっています。
変換は、魔法の図5376といくつかの単純な三角法を使用して実行されます。魔法の数字は、次の値を掛けることで得られます。
- 参照ピクセル密度、96ppi。 1インチあたりのドット数は、画面解像度の目的で、ppi、1インチあたりのピクセル数とも呼ばれます。
- ユーザーとディスプレイの間の距離、28インチ。この距離はかつてフランダースのエル、イン・オールディン・ステル・ミシュアメントと呼ばれていました。エルは人が到達できる距離です。
- 無次元量、または単位のない数、2。これを適切に投入します。関連する三角法は2倍の角度を使用し、角度を2倍にする前にピクセル距離を半分にする必要があります。
使用される単位は古いインペリアルインチであるため、角度が度ではなくラジアンで測定される式で相殺されます。
角度= arctan（px / 5376）×2
px = 5376×tan（角度/ 2）
02.ピクセルのパッキング
CSS 2.1は、96ppiを新しい参照解像度にしました。ただし、ディスプレイは96ppiのままではありませんでした。この記事の冒頭にあるiMacのスクリーンショットは、約109ppiを使用するディスプレイで撮影されました。参照ピクセルがこのデバイスに付着している場合、96ppiデバイスで1pxと同じ見かけの角度寸法で参照ピクセルを表示するには、1.1354（109ppi / 96ppi）デバイスピクセルが必要になります。これは物理的に不可能であるため、ピクセルは表示の分割できない最小単位であるため、アンチエイリアス処理する必要があります。ほとんどのアプリケーションでは、これによりレンダリングがぼやけて魅力的ではなくなります。
このため、2011年6月にW3C勧告になっただけで、何年も前にドラフトされていたCSS 2.1は、参照ピクセルがベースとなるアンカーとしてのみ使用されることを意図していることを明確にするテキストを導入しました。実価。 pxの単位は、「参照ピクセルに最も近いデバイスピクセルの整数」を参照することをお勧めします。つまり、28インチのユーザーから離れた場所で使用するデバイスが144ppi（96ppi×1.5）を超える場合、CSSピクセルを2つのデバイスピクセルを意味するようにスケーリングする必要があります。 240ppi（96ppi×2.5）を超える場合は、CSSピクセルを3つのデバイスピクセルを意味するようにスケーリングする必要があります。などなど。
ベンダーにとってピクセルスケーリングの欠如を問題にするのに十分な解像度のディスプレイが存在しなかったため、実際にはこれはとにかく議論の余地がありました。これは、少なくともベクターグラフィックスの外側では、参照ピクセルがデバイスピクセルと同形であると見なされたことを意味します。
デバイスピクセルとしてのCSSピクセルの一般的な（誤）概念は、iPhone4が326ppi画面でリリースされた2010年6月に異議を唱えられました。 Appleのマーケティングゲームは、それを「解決策」としてブランド化しました。明らかに、iPhoneがユーザーから28インチ離れたCSS標準で使用されることはめったにありません。使用が近いほど、ピクセルが大きく表示され、知覚されるピクセル密度が低下します。 CSS 2.1は、28インチで144ppiのアップスケールしきい値を推奨しました。 iPhone 4の326ppiの場合、これと同じ見かけの知覚ピクセル密度は、12.368インチ（28インチ×144ppi / 326ppi）以上の距離で到達します。これは、実際の使用では距離に非常に近い距離です。そのため、高級なしきい値に達しました。
さらに、AppleはiPhone 4の画面が326ppiで、知覚可能な最高レベルのピクセル密度に到達すると主張しているにもかかわらず、メーカーは依然として密度を上げ続けています。たとえば、HTC Rezound（2011年11月）には342ppiのディスプレイがあり、RIMでさえ356ppiの画面を備えたBlackberryを開発しました。電力が貴重なモバイルデバイスでは、RIMがバッテリー寿命を延ばすためにこれらの余分な30ppiを落とさなかったのは驚くべきことです。以前は、解像度の戦争があったのはカメラメーカーでした。おそらく、モバイルメーカーは、解像度が新しい販売可能なフォームファクターであることに気づいています。
理由が何であれ、ピクセル密度と解像度は増加し続けます。 CSS 2.1のアップスケールしきい値に達すると、アップスケーリングが発生する必要がありました。ベンダーがこれをどのように行ったかはさまざまでした。 Appleは、たとえば、単純な2倍の比率で、第3世代iPad用にWeb上の画像をアップスケールすることを決定しました。単一のピクセル画像（1×1）は、4つの（2×2）物理デバイスピクセルを使用してそのデバイスに表示されます。 Androidを使用しているものなど、さまざまな比率を使用して高級化したものもあります。多くの場合、約1.5倍または1.6倍です。ユーザーは、カスタムレベルにズームインすることで、一部のデバイスのページを拡大縮小することもできます。これらのデバイスのいずれかで、これらの要因のために、画像がぼやけて見えることがあります。
03.スタイリッシュなデザイン
1つの解決策は、CSSを使用することです。ここでは、解像度に依存しない単位としてのCSSpxの元の設計に固有のアイデアに完全に戻りたいと思います。しかし、CSS pxの角度測定特性は現在、高級なアンカーによって調整されているため、解像度を処理する機能は他の場所で強化する必要がありました。これに対処するための最も合理的な場所は、新しいメディアクエリとしてでした。メディアクエリは、レンダリングユーザーエージェントが条件を満たした場合にのみ、特定のスタイルシートルールを使用できるようにする条件です。
最近のブラウザベンダーは、互いにまったく異なる方向に革新するという確固たる習慣を持っているため、丁寧に言えば、少なくとも4つの異なる方向性があります。 @メディア ソリューション。開発者は、安全のためにそれ以上のものを使用する必要があるかもしれません。 1つはWebKitで使用され、もう1つはMozillaで使用され、3つ目はOperaで使用されます。 IE10のソリューションはまだ公開されていないようです。もう1つの解決策は、CSS3仕様で指定されているものであり、これはW3C勧告に近いものです。 CSS3仕様は、Mozillaの従業員によって編集されているにもかかわらず、Mozillaとは異なるスキームを使用しています。
@media（-webkit-min-device-pixel-ratio：1.5）{/ * WebKit * /}
@media（min--moz-device-pixel-ratio：1.5）{/ * Mozilla * /}
@media（-o-min-device-pixel-ratio：3/2）{/ *オペラ * /}
@media（最小解像度：1.5dppx）{/ * CSS3 * /}
Mozillaの亜種はそうではありません -moz-min-device-pixel-ratio 予想通り。クロスブラウザの互換性を最大にするには、次のようなものを使用する必要があります。
ヘッダー{
背景：url（[email protected]）;
}
@media only screen and（-webkit-min-device-pixel-ratio：2）、
画面と（-moz-min-device-pixel-ratio：2）のみ、
画面と（-o-min-device-pixel-ratio：2/1）のみ、
画面と（min-device-pixel-ratio：2）のみ、
画面と（最小解像度：2dppx）{のみ
ヘッダー{
背景：url（[email protected]）;
背景サイズ：50％;
}
}
この例では、ヘッダー要素の背景画像を1dppx画面と2dppx画面で1つのデバイスピクセルを使用するように設定しますが、これらの値の間のピクセル密度を使用するデバイスでは、リサンプルベースのアップスケーリングがぼやける可能性があります。私たちは使用する必要があります min-device-pixel-ratio CSS3が現在の代わりに、または現在の代わりにそれを決定する場合にも 最小解像度。ブラウザで使用可能なピクセル数が、ピクセル領域あたり4ドットで通常レンダリングできるよりも多い場合は、ピクセル領域あたり1ドットを使用するか、画像をリサンプリングします。このソリューションは、これらの機能をサポートする最新のブラウザーのみを対象としていますが、いずれにせよ、最新の高密度ピクセルデバイスで最新のブラウザーが見つかることを期待しています。
画像のサイズを50％に設定することにより、再スケーリングが行われました。標準画像の場合、高さと幅の属性を適切に設定してコンテンツを拡大縮小することもできます。 HTML5仕様では、「寸法属性は画像を引き伸ばすために使用することを意図したものではありません」と警告していますが、この方法は一般的です。 CSS3では、代わりにさらに別の手法を使用できます。
04.解像度の設定
と組み合わせて @メディア テクニック、CSS3はと呼ばれる新しいプロパティを導入します 画像解像度、特定の画像の解像度を変更できます。これは、画像の一種のカスタムスケーリングと考えることができます。残念ながら、1〜2dppxでデバイスをターゲットにする必要がある開発者にとっては、 画像解像度 プロパティは単純に適応的ではありません。デバイスのピクセルのアップスケーリングに比例して何もしません。これは、この手法をメディアクエリ内で使用する必要があることを意味します。以来 画像解像度 プライマリコンテンツだけでなく背景画像にも適切に適用されます。これは、上記のメディアクエリの例のヘッダールール部分を新しいプロパティを使用して作成する方法です。
ヘッダー{
背景：url（[email protected]）;
画像解像度：2dppx;
}
2dppxの代わりに192dpiを使用することもできます。CSSの96dpi参照ピクセル密度の規定により、これらは固定比率になっています。ただし、この構文の主な利点の1つは、開発者が何を目指しているかを明確にすることであるため、この場合は2dppxを使用する方が合理的なベストプラクティスです。
以来 画像解像度 はCSS3の予測された機能にすぎず、短期的には幅広いブラウザサポートが提供される可能性は低く、ベンダーはとにかく無数の代替構文を実装することを選択できます。 最小解像度 プロパティ。
CSSを使用することは、新しいピクセル密度に対応する唯一の方法ではありません。同じ目標を達成するために、クライアント側とサーバー側のソリューション、シム、ポリフィルが無数にあります。 JavaScriptを使用して検査するものもあります window.devicePixelRatio 彼らの魔法を実行します。しかし、この問題は1996年にCSSである程度予見されていました。仕様と実装ベースのイノベーションは、最近のディスプレイテクノロジーによってもたらされる課題に照らして熱くなりましたが、CSSは、解像度に依存しないための最適でエレガントなソリューションではないにしても、実行可能です。
この記事は、.netマガジンの230号に最初に掲載されました。
Sean B. Palmer inamidst.comは、コンピューターサイエンスのバックグラウンドを持つ、近世の歴史家です。彼は、W3CのEARL 1.0およびXMLアクセシビリティガイドライン仕様の編集者であり、HTML、JavaScript、およびセマンティックWebに関する書籍に寄稿しています。
これが好きですか？これらを読んでください！
- 今すぐ無料のグラフィックデザインソフトウェアを利用できます！
- ブリリアントワードプレスチュートリアルセレクション
- これらのプロのヒントで完璧なムードボードを作成する
