CSSユニットコンバーター

2つの単位ファミリー

あらゆる CSS の長さは、2つのファミリーのどちらかに属します。px、pt、cm、mm、in といった絶対単位は、文脈によって変わらない固定の物理的・デバイス的サイズを表します。em、rem、パーセント、vw、vh、ch、ex といった相対単位は、ほかの何か、たいていはフォントサイズやビューポートを基準にしたサイズを表します。レスポンシブでアクセシブルな CSS の技術の核心は、仕事ごとに正しいファミリーを選ぶことに尽き、この変換ツールはそれらの間をきれいに翻訳するために存在します。

この境界線が重要なのは、絶対単位が値を凍結させるのに対し、相対単位は値を適応させるからです。ピクセルで指定された見出しは、ユーザーがブラウザをどう設定していてもサイズが変わりませんが、同じ見出しを rem で指定すれば、ユーザーが既定の文字サイズを大きくしたときに一緒に大きくなります。このふるまいの一方は親切で、もう一方は静かに人々を締め出します。

ピクセルと 16px の基準

px は、ほぼすべての変換の基準点です。名前に反して、CSS のピクセルは常に1つの物理的な画面のドットというわけではありません。高密度ディスプレイでは、16px の単語が快適に読めるサイズに保たれるよう、ブラウザがそれを複数のデバイスドットに対応づけます。これがハードウェアが異なっても px が絶対単位とされる理由です。このツールのほとんどの変換は1つの数値、すなわちルートフォントサイズに依存しており、既定では 16px です。これはブラウザが html 要素に最初から適用するサイズだからです。詳細設定でこの基準を変えれば、すべての rem と em の結果がそれに対して再計算されます。

em と rem：カスケードの違い

これが、最も多くの開発者を混乱させる区別です。rem は常にルートフォントサイズを基準にするので、1.5rem は文書のどこでも同じ長さで、予測しやすく平坦です。em はそれが置かれた要素のフォントサイズを基準にするため、em は複利のように積み重なります。リスト項目が 1.2em に設定され、その親も 1.2em なら、子は祖父母の 1.2 かける 1.2 になり、入れ子が静かにテキストを思いがけないサイズへ雪だるま式にふくらませることがあります。

その積み重なりが、ときには望むものであることもあります。em で表したパディングやマージンは要素自身のテキストに合わせて拡大縮小するので、ラベルが大きくなってもボタンは比例したパディングを保ちます。しかし全体のタイプスケールには、まさに積み重ならないという理由から、rem のほうがふつうは安全な既定です。この変換ツールはルートフォントサイズと親フォントサイズを別々に設定できるので、rem の結果と em の結果がそのちょうどの違いを反映します。

流動的なレイアウトのためのビューポート単位

ビューポート単位は、ウィンドウそのもののサイズを基準に測ります。1vw はビューポート幅の1パーセント、1vh はその高さの1パーセントなので、50vw はフォント設定に関わらず常にウィンドウの半分の幅です。これらは、流動的なレイアウトや、文字サイズではなく画面に合わせて拡大縮小すべき大きな見出しの背骨です。

ただし慎重に使ってください。本文をまったく vw だけで指定すると、狭いスマートフォンでは読めないほど縮み、広いモニターではふくらみ、環境によってはユーザーのズームを無視することもあります。現代的な対処法は clamp 関数で、最小値、好ましい流動的な値、最大値を取り、見出しがビューポートに合わせて大きくなりつつも下限を下回ったり上限を超えたりしないようにします。下限と上限はここで rem に変換しておけば、ユーザーのフォント設定を尊重したままにできます。

パーセント、ch、ex

パーセントは相対的ですが、何に対してかはプロパティによります。width に対しては包含ブロックの幅のパーセント、font-size に対しては親のフォントサイズのパーセントで、これは型としては em とよく似たふるまいになります。この文脈依存性こそが、フォントサイズのパーセントを変換するときにこのツールが親フォントサイズを尋ねる理由です。さらに2つ、見落とされがちなフォント相対単位があります。ch は現在のフォントにおける数字のゼロの幅で、段落をおよそ 60ch という快適な読みやすさの幅に収めるのに最適です。一方 ex は小文字の x の高さで、書体の比率に結びついた縦方向の調整に役立ちます。

印刷用の絶対単位：pt、in、cm、mm

物理単位は CSS 仕様の正確な比率によって定められており、だからこそここでの変換は近似ではありません。1インチは 96px に等しく、1ポイントはインチの72分の1なので 1.333... ピクセルになり、1センチメートルはおよそ 37.8px、1ミリメートルはその10分の1です。これらの比率は実際のディスプレイに関わらず固定です。

画面上では、これらの単位はたいてい罠になります。ページ上の1センチメートルが、モニターに当てた定規の1センチメートルと一致することはめったにないからです。これらの本当の居場所は印刷用スタイルシートで、物理的な紙が本物の意味を与えてくれます。とりわけ pt は、デザイナーやワープロが文字サイズを表す従来からの方法であり続けています。印刷向けにスタイルを整えるときは pt、cm、mm に手を伸ばし、画面向けにスタイルを整えるときは rem、em、ビューポート単位に手を伸ばしましょう。

アクセシビリティ：px のフォントが問題になる理由

フォントサイズを px で設定すると、それを固定してしまいます。ブラウザの既定の文字サイズを大きくしたユーザー、しばしばそうする必要があるユーザーには、何の変化も見えません。固定のピクセル値がその設定をまるごと無視するからです。代わりに rem でテキストを指定すれば、ユーザーが選んだルートフォントサイズに合わせて拡大縮小し、これは CSS で得られる中でも最も効果の高いアクセシビリティの改善の1つでありながら、既定の読み手にとっては見た目のコストがまったくありません。

ここから実践的なワークフローが導かれます。ピクセルは直感的なのでまずピクセルでデザインし、出荷前にタイプとスペーシングを rem に変換して、レイアウトがユーザー設定を尊重するようにするのです。これは、このツールが行う最も一般的な変換であり、既定の 16px を基準にすれば計算もやさしく、16px は 1rem、24px は 1.5rem、8px は 0.5rem になります。