CSS絶対単位のようなものはありません

公開: 2022-03-10

簡単な要約↬絶対単位とは何ですか？相対単位と絶対単位の違いは何ですか？また、Web上で正確なサイズを作成するにはどうすればよいですか？この記事では、Elad Shechterが、CSSの絶対単位がそれほど絶対的ではない理由を説明します。

CSSの学習を開始すると、CSSの測定単位が相対または絶対に分類されていることがわかります。絶対単位は、ピクセル、センチメートル、インチなどの物理単位に基づいています。しかし、何年にもわたって、CSSのすべての絶対単位は、物理的な世界とのつながりを失い、少なくともWebの観点からは、さまざまな種類の相対的な単位になりました。

相対単位と絶対単位の間にはまだ大きな違いがあることに注意することが重要です。 CSS相対単位は、親要素によって定義された他のスタイル定義に従ってサイズ設定されるか、親コンテナーのサイズの影響を受けます。絶対単位については、画面やデバイスのオペレーティングシステムなど、他のものによってどのように影響を受けるかを詳しく見ていきます。

相対単位には、 % 、 em 、 rem 、ビューポート単位（ vwおよびvh ）などの単位が含まれます。最も一般的な絶対単位はピクセル（ px ）です。それ以外に、センチメートル単位（ cm ）とインチ単位（ in ）があります。

それでは、CSSの絶対単位がそれほど絶対的ではない理由を調べてみましょう。

CSSピクセル

ピクセルはCSSの最も一般的な単位であり、Webの始まりにまでさかのぼります。デスクトップ画面の古い世界では、スマートフォンが登場する前は、画面のピクセルは常にCSSピクセルと同等でした。

たとえば、2007年には、最も一般的なデスクトップ解像度は1024 × 768ピクセルでした。当時は、通常、Webページの幅を1000ピクセルに固定してページ全体に合わせ、残りのピクセルをブラウザのスクロールバーに保存していました。

古いデスクトップ画面 — 昔はモニターの見た目がかなり違っていました！（画像クレジット：Shutterstock）（大プレビュー）

スマートフォンの画面

スマートフォンは、高密度スクリーンの時代を開始し、別の静かな進化をもたらしました。画面の幅が1170ピクセルのiPhone12Proを考えると、デバイスの3ピクセルごとにCSSの1ピクセルとしてカウントされます。

長年にわたるiPhone画面の密度 — 高密度画面により、デバイスピクセルとCSSピクセルが最初に分離されました。（画像クレジット：ウィキペディア）（大プレビュー）

モバイルでサイズを設定する場合、デバイスのピクセルではなく、CSSのピクセルに従って測定します。総括する：

CSSピクセルは論理ピクセルです。
デバイスピクセルは実際の物理ピクセルです。

高密度スクリーンの比較 — 1つのCSSピクセルは、複数のデバイスピクセルである可能性があります。（大プレビュー）

わかりましたが、デスクトップデバイスはどうですか？それらは同じ古いピクセル計算でまだ機能しますか？それについて話しましょう。

2021年のデスクトップ画面

高密度スクリーンは、数年後にラップトップに登場しました。 2014年のMacBookは、最初の「網膜」画面を取得しました（網膜は高密度の代名詞です）。

最近では、ほとんどのラップトップに高密度の画面があります。

MacBookについて考えてみましょう：

13.3インチMacBookProの画面は、幅2560ピクセルですが、 1440ピクセルのように動作します。これは、 1.778の物理ピクセルごとに1の論理ピクセルのように機能することを意味します。
16インチMacBookProの画面の幅は3072ピクセルですが、 1792ピクセルのように動作します。これは、 1.714物理ピクセルごとに1の論理ピクセルのように機能することを意味します。

内蔵網膜ディスプレイは、3072x1920ピクセルの16インチを表示します — （大プレビュー）

PCラップトップの中で、私は2つの15.6インチ画面をテストしました。1つはフルHD解像度で、もう1つは4K解像度です。結果は興味深いものでした。

15.6インチのフルHD画面は幅1920ピクセルですが、 1536ピクセルのように動作します。これは、 1.25の物理ピクセルごとに1の論理ピクセルのように機能することを意味します。
15.6インチの4K画面の幅は3840ピクセルですが、やはり1536ピクセルのように動作します。これは、 2.5物理ピクセルごとに1論理ピクセルのように機能することを意味します。

左側のフルHDと右側の4Kと比較した2つの15.6インチ画面で、どちらもCSS解像度が1536x864ピクセルです。 — これらのPCデバイスの解像度は異なりますが、CSSの解像度については同じように機能します。（画像クレジット：Elad Shechter）（大プレビュー）

ご覧のとおり、実際の物理（つまりデバイス）ピクセルとCSS（つまり論理）ピクセルの間の接続はほとんどなくなっています。

スクリーンは何年にもわたって密度が高くなっています

以前は、画面をよく見ると、実際にそのピクセルを見ることができました。スクリーンの技術が向上すると、メーカーはより高密度のスクリーンを作り始めました。

デバイスのピクセルを示す画面上の画像のクローズアップ — 以前は、画面に十分近づくと、デバイスのピクセルが表示されていました。（大プレビュー）

推奨読書：折りたたみ式ウェブは実際にはどういう意味ですか？

論理ピクセルの計算方法が異なるのはなぜですか？

何年にもわたって、画面の密度が高くなるにつれて、画面のピクセル数が増えたという理由だけで、同じ画面サイズにこれ以上のコンテンツを収めることができなくなりました。

ちょっと考えてみてください。 サムスンギャラクシーS21ウルトラを考えてみましょう。その狭い寸法は1440物理ピクセルです。通常のデスクトップ画面に簡単に収めることができました。しかし、そうすると、テキストが小さくなり、読めなくなります。このため、物理ピクセルを論理ピクセルから分離します。

次に、CSSのサイズ（つまり、幅と高さ）は、CSSの論理ピクセルに従って計算されます。もちろん、物理ピクセルを使用して、画像やビデオなどの高密度コンテンツを次のように読み込むことができます。

 <img src="image-size-1200px.jpg" width="300" >

OK、CSSピクセルはデバイスの物理ピクセルと同じではありません。しかし、センチメートルとインチがあります。それらは物理的な世界に接続された物理的なユニットですよね？それらをチェックしてみましょう。

ジャンプした後もっと！以下を読み続けてください↓

CSSインチとCSSセンチメートル

インチやセンチメートルなどの物理単位を使用する場合は常に、これらが絶対単位であることを認識しています。

CSSピクセルがデバイスのピクセルと等しくない場合は、Web上でインチやセンチメートルなどの物理的な単位を使用することをお勧めします。それらは絶対単位ですよね？

確かに、私はそれをテストしました。幅と高さが1センチの箱を作り、背景色を赤にしました。私は本物の巻尺をつかんで驚きました：

CSSセンチメートルは物理的なセンチメートルと同じではありません。

ここでは、2019年半ばの13インチMacBookで巻尺を使用してCSSセンチメートル単位をテストしています。

13インチMacBook画面でテープを使用してCSSセンチメートルと物理センチメートルを比較する — ご覧のとおり、CSSセンチメートルは明らかに物理的なセンチメートルと同じではありません。（画像クレジット：Elad Shechter）（大プレビュー）

結果はCSSインチでも同じです。

CSSインチは物理インチと同じではありません。

同じことが、ピカ（ pc ）およびミリメートル（ mm ）の単位にも当てはまります。これらは、CSSインチまたはCSSセンチメートルのいずれかの一部に対応し、どちらも実際のインチまたは実際のセンチメートルに接続されていません。

CSSのインチとセンチメートルが実際のインチとセンチメートルではない理由

1980年代以降、PC市場はCSSインチを96ピクセルに相当すると決定しました。このピクセルの計算は、当時のモニター用のMicrosoftのWindowsオペレーティングシステムのDPI / PPI（pixels per inch）標準に直接関連付けられていました。最も一般的なものは、 96の標準でした。

つまり、 1インチは常に96ピクセルに相当します。

CSSセンチメートルの場合、すべてのセンチメートルはインチから直接計算されます。つまり、 1インチは2.54センチメートルに相当します。これは、 1センチメートルごとに常に37.7952756ピクセルに等しいことを意味します。

言い換えれば、 1cm = 37.7952756px (96px / 2.54) 。

この決定は、PC業界の初期には良い考えのように見えましたが（ある種の標準がありました）、CSSのインチとセンチメートルを時代遅れにして役に立たないものにするという悪い決定であることが判明しました（少なくともウェブ）。

1980年代には、Appleは画面に対して72という異なる標準を持っていたことに注意してください。

画面のピクセルが密集する

前述したように、画面のDPIは160高密度になり、 120の画面が表示されました。また、 1インチは常に96ピクセルに等しいため、CSSインチが実際の物理インチと等しくないことを意味します。

デバイスの3つのカテゴリ（CRTディスプレイを備えた20世紀のPC、LCDを備えた最新のラップトップ、スマートフォンとタブレット）のベースラインピクセル密度を比較した表 — （画像クレジット：「CSSの長さの説明」、Mozilla Hacks）（大きなプレビュー）

CSSインチとCSSセンチメートルはCSSピクセルから直接変換され、画面は長年にわたってより多くのDPIを取得しているため、これらの単位は画面上で表現されるはずのものを表していないという点に到達しました。

CSSポイントユニット

ポイント（ pt ）単位は、CSSのあまり認識されていない単位の1つです。ウィキペディアが述べているように：

「タイポグラフィでは、ポイントは最小の測定単位です。印刷ページのフォントサイズ、先頭、その他の項目を測定するために使用されます。」

ウィキペディアのページには、下部にポイントスケール、上部にインチスケールの定規が表示されます。

ウィキペディアのページに表示される定規 — （画像クレジット：ウィキペディア）（大プレビュー）

このユニットが実際にはWebの絶対ユニットではない理由を説明する前に、画面とプリンターの基本ユニットについて説明します。

PPIとDPI

DPIについてはすでに説明しましたが、過去にこれらの用語を聞いたことがあるかもしれませんが、それらが何であるかを正確に理解していない場合は、次の簡単な入門書を参照してください。

PPI
画面は、ピクセルと呼ばれる多くの小さな光の点で構成されています。ピクセルの密度を測定するために、1インチあたりのピクセル数（PPI）と呼ばれる1インチに適合するピクセルの数をカウントします。
DPI
プリンタはカラードットを印刷します。プリンタのドットの密度を表すために、1インチあたりのドット数（DPI）と呼ばれる1インチの用紙に収まるドットの数をカウントします。

PPIとDPI：PPIはディスプレイの解像度を指し、DPIはプリンターの解像度を指します — （画像クレジット：Shutterstock）（大プレビュー）

要するに、これらは私たちが1インチに収まることができる視覚情報の密度を測定する2つの方法です。

PPI ：1インチあたりのピクセル数（画面の場合）
DPI ：1インチあたりのドット数（プリンターの場合）

1インチのCSSピクセルとドットの数は、幅と高さの両方に対応していることに注意してください。これは、 96 PPIの画面で、高さと幅が1インチのボックスの合計サイズが9216ピクセル（ 96 × 96ピクセル= 9216ピクセル）になることを意味します。

これは、 10の画面を備えた1インチの視覚的なデモンストレーションです。

10PPIの画面を備えた1インチのデモンストレーション — （画像クレジット：Shutterstock）（大プレビュー）

CSSPPIの実際の計算例を次に示します。

CSS解決（ピクセル）	CSS PPI	CSSインチ（幅と高さ）
96x96	96	1×1
141×141	141	1×1

画面の「DPI」

モバイルおよびデスクトップデバイスのメーカーは、画面の測定値をPPIではなくDPIで表現することを好みます。ただし、混乱させないでください。画面の場合は常にPPIであり、プリンターの場合はDPIです。

DPI/PPI標準

これらすべてのドットとピクセルを表すために、ポイント（ pt ）単位があります。

ただし、CSSのポイント単位はデフォルトのプリンタDPIから派生しています。これも、1980年代に決定され、 72に相当します。これは、CSSの1インチが常に72ポイントに等しいことを意味します。

1インチ= 72ポイント
1ポイント= 1^インチの1/72

Webの場合はピクセル、プリンターの場合はドット

Webの場合、DPI単位には意味がありません。 Web DPIは、CSSインチとCSSセンチメートルを計算したときにすでに説明した別の標準（ 96 DPI）に従って定義されています。このため、Web上でポイントユニットを使用する理由はありません。

注： 1ポイントは（CSS）ピクセルと等しくありません。

1ポイント= 1.333ピクセル
72ポイント= 1インチ
72ポイント= 96ピクセル

プリンター

この記事では、主にWebに絶対単位がない理由を示したいと思いました。しかし、それらをプリンターに使用するのはどうですか？プリンターにCSSインチまたはセンチメートルまたはポイント単位を使用する理由はありますか？

私の印刷テスト

1980年代のDPI標準がプリンターで正しく機能するかどうかを確認するために、小さなテストを実行しました。 2つのボックスを作成しました。1つは幅と高さが72ポイントで、もう1つは幅と高さが1インチです。

私はこれらの2つの箱を、オフィスにあるレーザープリンターで印刷しました。これが、プリンターのポイントとインチをテストするための私のCodepenです。

Elad Shechterによるペン[1インチ]（https://codepen.io/smashingmag/pen/ZEKxMMy）を参照してください。

EladShechterによる1インチのペンを参照してください。

結果

このデモをレーザープリンターで印刷しました。驚いたことに、 72ポイント（または1インチ）を使用すると、正確に1インチになります。これは、プリンターの場合、ポイント、インチ、センチメートルなどのCSS単位を使用する正当な理由がまだあることを意味します。

左側はプリンターです。右側は、印刷されたテストです。 — （画像クレジット：Elad Shechter）（大プレビュー）

プリンターはより多くのDPIを印刷できますが、プリンターを100%ズームして作業している場合、CSSの72ポイント（または1インチ）は実際の物理的なインチに等しくなります。

注意：この記事では、絶対単位をプリンターではなくWebに接続する方法について説明します。 もちろん、結果はプリンターの種類によって異なる場合があります。

推奨読書： CSSでのHSLカラーの使用

Web上で正確なサイズを作成しようとしています

1ピクセルごとに1.714物理ピクセルの比率を持つ16インチMacBookProを見ると、Web上のサイズを正確に予測することはできません。

JavaScriptのwindow.devicePixelRatioを使用して16インチMacBookProの実際のデバイスのピクセル比を推測しようとすると、 1.714ではなく2の誤った比率が返されます。（これは、Webブラウザとオペレーティングシステムのズーム状態を考慮しない場合です。）

巻尺のイラスト — （画像クレジット：Shutterstock）（大プレビュー）

本当の絶対CSSユニットが必要な理由

サイドバー要素の固定サイズを定義する場合は、CSSピクセルを使用します。しかし、考えてみれば、CSSピクセルは最近意味がありません。上で見たように、ほとんどのスマートフォンとデスクトップでは、CSSピクセルはデバイスピクセルを記述しなくなりました。

これに基づいて、CSSピクセルはWeb上で真の意味を持たなくなったため、CSSの実際の物理単位（実際のセンチメートルやインチの単位など）が必要になると思います。

Firefoxは実際の物理ミリメートル単位（ mozmm ）を実装していましたが、バージョン59で削除したことは言及する価値があります。なぜ削除したのかわかりません。おそらくそれは、レスポンシブ画像やemおよびremユニットなど、非常に多くのものがすでにCSSピクセルに依存しているためです。新しい物理的測定値を追加しようとすると、解決するよりも多くの問題が発生する可能性があります。

Webの人々はピクセルで考えることに慣れているようで、CSSピクセルユニットがデバイスピクセルとの接続を失ったとしても、ユニットを使い続けます。

また、CSSピクセルが優れた測定単位であると思われる場合は、この単位が実際に何を測定しているのかを新しいWeb開発者に説明してみてください。

今のところ、CSSで物理的なサイズを記述する実際の方法はありません。

したがって、 CSSピクセルは、他のすべてを除いて、最悪の種類の絶対単位です。

要約する

この記事の冒頭で、絶対CSSユニットは新しい種類の相対ユニットのようになっていると言いました。 CSSピクセルから始めて、CSSピクセルとデバイスピクセルの違いを見ました。

次に、CSSインチとCSSセンチメートルがCSSピクセルから直接変換され、実際のインチとセンチメートルに接続されていないことがわかりました。最後に、ポイントユニットについて説明しました。また、このユニットがWebにとって絶対的な意味を持たないことについても説明しました。

最後の言葉

それで全部です。この記事を楽しんでいただき、私の経験から学んだことを願っています。この投稿が気に入ったら、聞いて共有していただければ幸いです。

参考文献

「CSSの長さの説明」、Tim Chien、Robert Nyman、Mozilla Hacks
「1インチあたりのドット数」、ウィキペディア
「ポイント（タイポグラフィ）」、ウィキペディア
「CSSの値と単位」、W3C