CSS大解剖 3日目: 「閲覧環境 1/3」

本稿は、2024年2月頃に書き溜めていたシリーズです。最後まで温存させるのが勿体ないので、未完成ですがそのまま公開します(公開日: 2025/9/21)。そのため、内容の重複や記述方針の不一致があるかもしれませんが、ご理解ください。

CSSの仕様を理解するために、1日ごとにテーマを決めて説明する企画3日目です。今日のテーマは「閲覧環境」です。

WebブラウザはCSSの指定を必ず守るのか？

もちろん、そんなことはありません。閲覧環境の技術的な制約から、指定通りに表示できないこともありますし、ユーザーの事情や好みにあわせて表示をカスタマイズする必要がある場合もあります。

• たとえば、一部の電子書籍端末に代表されるように、色を表示する機能を持たないディスプレイも存在します。このような端末では、当然、 color: red; はその意図の通りには表示されません。
• ユーザーによっては、視力の問題で、文字を大きくしたり、コントラストを大きく表示することを希望するかもしれません。多くのWebサイトのスタイルはこのような要求に対する分岐を提供していないため、一般的にこのような対応はWebブラウザ側でWebサイトの指定を上書きする形で行われます。

Webアプリケーションの中には、レンダリングの結果の厳密性が重要になるような例がごくわずかに存在しています。その最たる例はGoogle Docsでしょう。そういったアプリケーションの中には、CSSを使わずにCanvasを使ってUIを組み立てるものもあります。

しかし、それ以外のほとんどのWebアプリケーションはこのような要件を持たないはずです。ほとんどのWebアプリケーションにとって重要なのは、コンテンツが厳密に意図的にレンダリングされることではなく、多少の表示差異によらずに利便性を維持できる柔軟性ではないかと思います。本シリーズを通じて、このような表示環境の差異に柔軟に適応するスタイルを書く助けができれば幸いです。

様々なデバイスと設定

ユーザーの置かれた閲覧環境に応じて適切な表示方法を提供するのは、Webサイトの作者とWebブラウザの両方にまたがった責務です。Webサイトの作者がこの責務を果たすための主要な道具がメディアクエリです。 (さらに新しいWorking DraftであるMedia Queries Level 5もあります)

Webの閲覧環境は時代に合わせて多様化していくため、決定版のリストはありません。しかし、現時点でどのようなデバイスが知られているかをメディアクエリからある程度把握することは可能です。この一覧に目を通して、頭の片隅に入れておくといいでしょう。

• 一般的な液晶ディスプレイ
• 一般的なカラープリンター
• 印刷と同等の表示を意図したデバイス (PDF出力や印刷プレビューなど)
• テレタイプ端末や同等の表示を行うデバイス
• グレースケールまたは白黒2値の表示デバイス
• 小さい表示領域を持つデバイスやウインドウ、大きい表示領域を持つデバイスやウインドウ
• 横に長い表示領域を持つデバイスやウインドウ、縦に長い表示領域を持つデバイスやウインドウ
• 細かいピクセル単位を持つデバイス、粗いピクセル単位を持つデバイス
• 「進む」「戻る」などのツールバーを持つウインドウ、これらの表示を省略した状態のウインドウ
• ユーザーが等倍表示を希望している状態、ユーザーがズームアップを希望している状態
• プログレッシブ方式で表示するデバイス、インターレース方式で表示するデバイス
• 液晶のように高頻度で更新可能なデバイス、電子ペーパーのように更新頻度が限定されるデバイス
• 半透明で自己発光する加法混色デバイス(LED系)、半透明で色をフィルタする減法混色デバイス(液晶系)
• sRGBでのみ描画できるデバイス(あるいはOS)、より広範囲の色空間を表示できるデバイス
• ダイナミックレンジの広いデバイス
• キーボード入力、マウス入力、指先タッチ入力、感度つきのスタイラスペン、Wiiリモコンのような入力デバイス
• JavaScriptが無効なWebブラウザ
• 視覚や認知の特性等から、Webサイトの動きを抑制することを希望するユーザー
• Webサイトが半透明の視覚効果を抑制することを希望するユーザー
• Webサイトが高コントラストな表示を行うことを希望するユーザー
• Webサイトが低コントラストな表示を行うことを希望するユーザー
• 指定したカラーパレットのみから表示するよう強制されているシステム
• ダークモードによる表示を希望しているユーザー
• 必要な通信量が少なくなるような表示を希望するユーザー

長さ

CSSでは、長さや距離を指定するのに相対指定と絶対指定の2種類の方法があります。

さらに、絶対指定に使われる単位は大きく2種類に分けられます。物理単位 (physical unit)と視角単位 (visual angle unit) またはピクセル単位 (pixel unit)です。

• 物理単位は名前の通り、物理的な長さの単位です。 cm, mm, Q, in, pc, pt の6つです。
• 視角単位は視野とデバイス解像度から決まる仮想的な単位です。 px がこれに当たります。

このうち px は歴史的に定義にブレがあります。古いCSSではデバイス解像度に対する相対指定やデバイス解像度と閲覧距離に基づいて決まる相対指定として定義されていたこともあります。しかし、現在のCSSでは 1 px = 1/96 in の比率が規格で指定されているため、物理単位と視角単位はWeb作者から見ると同等です。

このようなルールになった背景には、多くのWebページが96dpiのデバイスでのみ正しく表示されるようにデザインされてしまったことがあります。

この変更により、物理単位と視角単位は対等になり、いずれも絶対指定と呼ばれるようになりました。ここで重要なのは、Web作者から見たらどちらでも同等とはいえ、Webブラウザの実装者が長さを解釈するにあたっては、いずれかの定義を優先して参照する必要があるということです。このとき、仕様上はどちらかが優位ということはなく、どちらを使うかは実装者に任されています。

もちろん、ユーザーがズーム等の特別な処理を希望している場合などには、コンテンツが定義通りではない長さで描画されることもあります。

物理単位を使う場合

デバイスが液晶ディスプレイやプリンターなどの場合、デバイス自体に固有の物理的な大きさがあります。このような場合には物理単位の定義に基づいて描画結果を決めることができます。

この場合は話は簡単です。1cmと指定がある長さは、デバイス上でも1cmになるようにすればよいわけです。

物理単位を基準にする場合、1pxは以下の定義と矛盾する可能性がありますが、それは許容することにします。

この定義はプリンターなど、物理的な大きさがはっきりしているが閲覧距離の不確定性が高い場合の利用が推奨されています。

視角単位を使う場合

視角単位は以下の2つの要素に依存して定義されます。

• ユーザーの視点からデバイスまでの距離
• デバイスの解像度

まず、1pxのおおまかな大きさはデバイスまでの距離に依存して決まります。1pxは、「96dpiのデバイスを人間の腕の長さ (71cm) 程度の距離に置いたときの1ピクセルの視角」と同等として定義されます。71cmよりも遠い距離で閲覧することが想定される場合 (テレビなど) はより大きく、71cmよりも近い距離で閲覧することが想定される場合 (スマホなど) はより小さく算出します。

このように決めたおおまかな大きさを、デバイスの1ピクセルの整数倍になるように調整したものを1pxと定義します。

視角単位を基準にする場合、1cm等の物理単位指定は上記の定義と矛盾する可能性がありますが、それは許容することにします。

この定義は、解像度が低いデバイスや、腕の長さと大きく異なる距離で閲覧することが想定されるデバイスでの利用が推奨されています。

rem

remは相対指定のひとつで、ルート要素のfont-sizeからの相対で指定します。ルート要素のfont-sizeの指定自身で使ったとき以外は文書内で一貫した結果になるため、絶対指定に準じた使い方ができます。

ユーザーが文字サイズベースのズーム機能を使ったときと相性がよいため、この単位による指定をなるべく使うという考え方もあるようです。

HTML/CSSの仕様上は、ルート要素のfont-sizeは初期値の medium であり、 medium の具体的な大きさは規定されていません。一般的なPC向けWebブラウザではデフォルトが16pxになっているようです。