パソコンやスマホなど、様々なサイズのデバイスに向けてコーディングをする際、CSSの単位を使い分けるとコーディングがとても楽になります。
レスポンシブ対応に便利な単位指定がありますから、上手く使えばコーディングの記述を効率化出来ますよ。
今回はよく使うCSSの単位を使い方と併せて紹介していきます。
この記事の目次
単位は絶対値と相対値に分類される
CSSでは絶対値(絶対的な長さの単位)と相対値(相対的な長さの単位) という考え方があり、CSSの数値計算の単位でも使われます。
絶対的な基準を決めた上で相対的な指定をする事で、例えば各要素やデバイス自体のサイズが違っても上手くサイズ調整させる事が出来ます。
現在ではスマートフォンやタブレットなどのデバイスが沢山あり、ディスプレイサイズも多種多様です。それに対応する為に普及したのがレスポンシブウェブデザインという考え方です。
そのレスポンシブに上手く対応させるには相対値の単位を上手く使うのがポイントです。
当然コーディングもデバイスにフィットするように最適化しなければいけません。絶対値で固定されたサイズ指定だと、違うサイズのディスプレイで表示した時に具合が悪いんですね。
- レスポンシブウェブデザインとは
- レスポンシブウェブデザインとは、PCとスマホを1つのHTMLで構築し、デバイス毎にCSSで見た目を変えて最適表示させる方法です。
表示上の注意点
ブラウザによっては例えば小さすぎるフォントサイズはエラーとなり表示されません。ウェブサイトのサービスによってはルールとして、小さすぎるフォントサイズは禁止されている事も。Googleのガイドライン的にも良くない評価を受けます。
CSSのプロパティにもよりますが、小数点以下も使えます。ただし、ブラウザによって小数点以下の処理が変わります。
大抵の場合、小数点第二位や第三位で四捨五入されます。
絶対値の単位
ディスプレイ用に使うのは実質、以下のpx(ピクセル)だけです。印刷用には他の単位もありますが、使う機会はかなり限定的です。
px（ピクセル）
ピクセルはディスプレイの色情報の最小単位「画素」の事。小さなドット（点）です。PCディスプレイやスマートフォンの解像度によって変わります。
ドット（点）が10個並んでいれば10pxですね。
1 in = 2.54cm = 96px、1px = 1 in の 1/96
相対値の単位
例外もありますが、相対値という事もあり自身の直近の親要素を基準値として数値が変わります。
フォントサイズ、横幅、高さ、マージン、パディング、位置などが直近の親要素の数値を基準として相対的な数値を計算します。
直近の親要素に数値が設定されていなければ、そこから更に親要素をさかのぼって数値を基準にします。中々ないかも知れませんが、どこにも指定されていなければブラウザのデフォルトスタイルを基準にします。
- デフォルトスタイルシート
- 通常はサイト制作者が用意したスタイルシートを使ってブラウザ表示されます。ですが、実は各ブラウザ自体が固有のスタイルシートを持っています。
ブラウザごとにCSSの設定が微妙に違うので、制作者側でサイトのデザインに合わせてスタイルを上書きしています。
もし制作者側でスタイルを指定していなければ、ブラウザ側のデフォルトスタイルや、ユーザーが変更したスタイルが適用されます。
％単位
例えば、親要素のフォントサイズが「16px」、自身を「14px」に指定したい場合。
つまり、子要素のフォントサイズに87.5％を指定すれば、14pxになります。
％（パーセント）を使う理由とメリット
ポイントは自分の直近の親要素を基準にする事。
子要素のサイズを％で指定した場合、親要素のサイズ16pxさえ変更すれば、子要素に設定したサイズを触ることなく相対的に変更されます。
子要素が沢山ある時は便利ですね。
em（エム）単位
例えば、親要素のフォントサイズが「16px」でこれを基準とした場合、親要素の「16px」を1emと考えます。
つまり1文字分のサイズ = 1em という考え方です。
この場合、子要素のフォントサイズに0.875emを指定すれば、14pxになります。
もちろん子要素のフォントサイズを２emに指定すれば、倍の32pxになります。
em（エム）の特長と注意点
ポイントは自身の親のサイズを基準にする事。
自身の親要素の数値が基準になりますが、親のサイズが分からないと混乱してしまいます。親子関係が複雑な入れ子構造だと思いがけないサイズになる可能性があるのでそこは注意です。
rem（レム：root em）単位
子要素は常に最上位であるhtml要素（root）のサイズを基準にします。
rem（レム）を使う理由とメリット
ポイント常にroot、つまりhtmlタグの数値が基準。
％（パーセント）とem（エム）は親要素のサイズ次第で相対的にサイズが変わるので、親子関係が複雑だと自分自身のサイズが分かりにくいです。
その点、rem（レム）だと常にhtmlのサイズを基準に計算されるので非常に分かりやすいです。
Viewport（ビューポート）を基準にした単位
現在多いレスポンシブに対応したレイアウトや、要素のサイズを指定するのに便利な単位です。ビューポートを基準に数値を計算します。
vw（ビューポート幅）単位
Viewport（ビューポート）横幅サイズをベースに計算されるサイズの単位。
1vwはViewportの幅の1%(1/100)。
例えばビューポートの幅が1000pxの場合、500pxのサイズ指定は次のように計算されます。
逆に、ビューポートの幅が1000pxの場合で、50vwのサイズを割り出す時は次のように計算されます。
vh（ビューポート高さ）単位
Viewport（ビューポート）高さのサイズをベースに計算されるサイズの単位。
1vwはViewportの高さの1%(1/100)。
例えばビューポートの高さが500pxの場合、250pxのサイズ指定は次のように計算されます。
逆に、ビューポートの高さが500pxの場合で、50vhのサイズを割り出す時は次のように計算されます。
Viewport（ビューポート）の変更に対応しやすい単位
vmin（ビューポート幅と高さの小さい方）単位
ビューポートの幅と高さを比較し、小さい方の値に基づいて計算されます。
ビューポートの幅か高さの値が小さい方の1%(1/100)。
vmax（ビューポート幅と高さの大きい方）単位
ビューポートの幅と高さを比較し、大きい方の値に基づいて計算されます。
ビューポートの幅か高さの値が大きい方の1%(1/100)。
数値の計算をしてくれるツール紹介
相対サイズの場合は計算してサイズを割り出さなければいけません。慣れてくれば大丈夫ですが、面倒な時はツールを利用しましょう。
pxtoem.com
名前の通り、pxからemへ変換します。もちろん逆にemからpxへも。表を見れば％も確認出来ます。
参考：pxtoem.com
px rem変換
こちらはpx、pt、％、em、remに対応しています。
参考：px rem変換
まとめ
単位の特長を知って使い分けが出来ると、面倒なコーディングがかなり楽になります。何より、レスポンシブ対応する為には覚えておいた方が良い単位もありますので、是非参考にして下さいね。
スマホで活躍する便利な単位もあります。