知っておくと便利なCSSの単位: 相対単位が主流の現在、絶対単位（px, in, mmなど）は特定のケースで非常に役立ちます

Post on:2024年4月16日

はじめに

通常、このようなシリーズを書く場合、ベストを最後に残す傾向がありますが、このシリーズでもベストが最後になりました。

私は完全主義者なので、この「知っておくと便利なCSSの単位」シリーズの最後は絶対単位、つまりほとんどの場合は絶対に避けたい単位（ジョークですよ）について解説します。この絶対単位は特定のケースで非常に役立ちます。

このページに初めてアクセスした人は、このシリーズの最初から始めることをお勧めします。とは言え、一般的に絶対単位はレスポンシブやアクセシブルでは推奨されませんが、CSSは相対的な単位だけでなく、絶対的な単位を使用する理由がいくつかあります。

このシリーズの記事は、下記からどうぞ。

CSSで絶対単位を使用する理由1: 特定のピクセルパーフェクトなレイアウト

場合によっては、異なるデバイスやスクリーンサイズで一貫性を保つ正確なレイアウトが必要になることがあります。ピクセル（px）などの絶対単位はこのコントロールを提供し、表示デバイスやページのズームに関係なく、その要素をピクセルで定義したサイズに正確に表示することを保証します。

たとえば、アイコンなどの特定のデザイン要素に役立ちます。しかし、特定のスクリーン（たとえば、店舗のタッチスクリーンのテレビ）に特化されたアプリを作成する場合には、さらに興味深いものになります。このような場合、ユーザーは設定でアクセシビリティコントロールにアクセスできないため、ズームは主に物理ズームかピンチズームになります。

CSSで絶対単位を使用する理由2: 外部メディアとの連携

特定の寸法をもつ画像や埋め込みコンテンツなどの外部メディアを扱う場合、それらの寸法に基づいた絶対単位を使用すると、レイアウトのスケーリングに役立ちます。

たとえば、画像の幅が300pxの場合、要素の幅を300pxに設定すれば、正確に意図したサイズで表示されます。この場合、1つのカラムに自動フローがあり、画像を含むカラムを300pxに固定したグリッドを選択できます。

See the Pen
Using absolute px unit for a grid by coliss (@coliss)
on CodePen.

CSSで絶対単位を使用する理由3: 印刷または固定サイズのレイアウト

固定サイズの出力を使用する印刷レイアウトやアプリの場合、センチメートル（cm）やミリメートル（mm）やインチ（in）などの絶対単位が適切な場合があります。これらの単位は物理的な寸法に基づいており、最終的な印刷出力に直接変換されるため、異なるプリンターや用紙サイズでも一貫したサイズ設定が保証されます。これが絶対単位を使用する唯一完璧な理由だと私は考えています。

例を挙げてみましょう。すこし前にスクロール駆動型アニメーションのデモをいくつか作成したのですが、この小さなタイムラインは印刷版を作成するのに最適な使用例だと思いました。CSSで絶対単位をいつ使用するかを示しています。

下記の右上「Edit on CodePen」をクリックしてデモページを開き、印刷してみてください。

See the Pen
Print example by coliss (@coliss)
on CodePen.

CSSで使用できる絶対単位

CSSで使用できる絶対単位を見てましょう。特に、印刷用のスタイルシートを作成する必要がある場合は、必ず目を通しておいてください。

ピクセル（px）

もっとも一般的に使用される絶対単位で、ディスプレイ上の1ドット（ピクセル）を表します。
インチ（in）

1インチを表し、印刷レイアウトや特定のサイズ要件に便利です。
センチメートル（cm）

1センチメートルを表し、これも印刷レイアウトでよく使用される単位です。
ミリメートル（mm）

1ミリメートルを表し、印刷レイアウトでより細かく制御するためにセンチメートルと並んでよく使用されます。
1/4ミリメートル（Q）

Qという単位は日本語組版で非常に一般的で、日本で使用されている主要なプロ用組版システムではほぼすべてにサポートされています。たとえば、InDesignの日本語版ではフォントサイズの単位としてQが使用されています。
ポイント（pt）

1/72インチに相当する単位で、歴史的にタイポグラフィに使用されてきましたが、現在ではあまり一般的ではありません。
パイカ（pc）

1/6インチに相当する単位で、タイポグラフィに使用されますが、ポイントよりさらに一般的ではありません。