【CSS, JS】CSSの単位変換をやってみた
[ PR ]
皆さんお久しぶりです。気付いたら新年を迎え、2015年になりました。 長い間ブランクが空いてしまって、以前はどういう内容を書いていたか思い出しているところです。
CSSの単位変換方法を知りたい
さて、今回はCSSの単位変換にトライしてみました。結論から言うと、100% CSS Units というサイトにまとめています。
その動機は、CSS3のcalc関数をJavaScriptで実装できないかと思い始めたことでした。
CSSには様々な単位があり、px, pt, %, in, cm など、物理的な単位やパソコン内でしか使われない単位など、結構な幅があります。
それらの単位変換をしようと思い、最初はブログなどの情報を元に行っていたのですが、最終的に w3cが作成している CSS Values and Units Module Level 3 が一番分かりやすいことが分かりました。
その中の情報を簡単にまとめると、次のようになりました。
CSSの数値単位
- ％ （パーセント）―― パーセント
- px （ピクセル）―― ピクセル。 1px = 1/96 in (インチ)
- pt （ポイント）―― ポイント。 1pt = 1/72 in (インチ)
- em ―― 目的の要素（タグ）のフォントサイズ
- ex ―― 目的の要素（タグ）のフォント設定における "x" (小文字) の高さ
- rem ―― ルート要素（HTMLタグ）のフォントサイズ
- pc （パイカ）―― 1pc = 12pt
- in （インチ）―― インチ。1in = 2.54cm
- mm （ミリメートル）―― ミリメートル
- cm （センチメートル）―― センチメートル
- ch ―― 要素（タグ）のフォント設定において、"0"（ゼロ、U+ 0030）グリフの幅
- vw ―― ビューポートの幅の1％
- vh ―― ビューポートの高さの1％
- vmin ―― ビューポートの長さの1％ （最小の軸の長さ）
- vmax ―― ビューポートの長さの1％ （最大の軸の長さ）
解説
少しわかりにくい用語がありますので列挙します。
- px は、パソコン上の画素の最小単位で、幅広い用途に使われます。
- %（パーセント） は、使うケースによって表す値が変化します（例：width, height, border-width）。
- pt, pc は、主にフォントサイズを指定するのに使われます。
- em, ex, rem, ch は、フォントサイズを元に余白や要素のサイズを指定するのに使われます。
- in, mm, cm は、物理的な単位で大きさを直感的に表すのに使いますが、例えばHTML上の1cmと実際の1cmが同じとは限りません。
- vw, vh, vmin, vmax はビューポート（デバイスに最適化された仮想的な画面サイズ）の大きさを元にした単位で、100vw は 100% width とほぼ等しく、100vh は 100% height とほぼ等しいと思うといいと思います。
ちなみに、一般的にピクセルからポイントに変換するときは、画面のPPI（Pixels Per Inches）を取得すると思いますが、w3cによると 1inch は 92pxに固定 しているようです。
なお、同様に 1inch は 72pt です。
単位の変換方法
- in px ―― 1px = 1/96 in（仕様を参照）
- pt in, px ―― 1pt = 1/72 in、1in = 96px。（仕様を参照）
- em px ―― 要素のフォントサイズを取得する
- ex、ch px ―― 目的の要素のフォント設定を継承した、新しい要素を作成し、そのサイズを取得する
- rem px ―― ルート要素（HTMLタグ）のフォントサイズを取得
- pc px ―― 1pc = 12pt、1pt = 1/72in かつ、1in = 96px。
- mm、cm px ―― 1in (インチ) = 2.54cm、1cm= 10mm かつ、 1in = 96px。
- vw, vh, vmin, vmax px ―― （縦軸と横軸を比較して）ビューポートのサイズを取得
解説
意外な方法もありますが、実際に Windows, Mac, iPhone, Androidなど、全てのプラットフォームで正しく動く方法です。
ただし、vw, vh などビューポートを元にする単位は、iOS系でうまく動かないことがあるようです。
詳しい説明は 100% CSS Units にコードを併記して説明しています。
まとめ
CSSの単位は、変換方法を知るのは意外に簡単で、CSS Values and Units Module Level 3 に正確に明記してあります。
しかし、それを実際のブラウザで行なうにはテクニックが必要で、ここに書いている方法は StackOverflow などから調べて、最適化したものばかりですので、是非活用してください。
