文字のサイズや画像の大きさ、線の長さなどを指定するとき、CSSにはたくさんの単位が存在するため迷ってしまうことがあります。
何度もコーディングしているけど、はたして適切な単位を選択できているのだろうかと不安になってしまうことはないでしょうか。
そこで今回は、それぞれの単位の意味を振り返られるようまとめてみました。
CSSの単位の種類
コーディングする際によく使われる単位は以下のとおりです。
| px（ピクセル） | 絶対的な値 他要素に影響されることはなく、指定した値が適用される pxは画面上にある点のことで、1pxは1ドット |
| em（エム） | 相対的な値 文字の高さを基準とした単位で、書体やCSSで指定した文字のサイズによって変化する サイズ指定なく使用した場合は、html要素のデフォルト値 1em=16pxが基準 |
| rem（レム） | 相対的な値 「root em」の略で、htmlタグの文字サイズを基準とする指定の単位 親要素の影響を受けない |
| % | 相対的な値 親要素のサイズを基準とする指定の単位 高さは%で指定しても、親要素の相対値とはならない |
| vw（ブイダブリュ） | 相対的な値 「viewport width」の略で、ブラウザの横幅を基準とする指定の単位 1vw=ブラウザの横幅の1% |
px単位とは
pxはデジタル画像の最小単位のことで、デバイスの1ドットを表します。１px=1ドットの絶対的な値のため、他要素に影響されることはなく、指定した値が要素に適用されます。1pxの大きさは、ディスプレイの解像度（1インチ四方の中にピクセルがいくつあるかを表した単位）によって表示サイズが変化します。
サイズの指定がしやすく多くの場面でpxを活用する機会がありますが、一方で文字指定に用いた場合、ブラウザの設定で文字の大きさを変更できなかったり、タブレットやスマートフォンなどのデバイスの違いで文字サイズが異なって表示されるケースがあります。
em単位とは
emは直近の親要素を基準にした相対値で、たとえば親要素のフォントサイズが10pxの場合、子要素に1emを指定すると10pxとなります。親要素にサイズを指定していない場合は、htmlタグのフォントサイズを基準にした相対値となります。
親要素のフォントサイズよりもここは少し大きくしたい、といった場合に便利な単位です。
ちなみにこのemの語源は欧文組版で使用される長さの単位で、Mという字が縦横いっぱいを占めることから、Mの大きさを1文字分として大きさを表したことが由来となっています。
rem単位とは
remは最上位要素であるhtmlタグのフォントサイズを基準にした相対値で、親要素の影響を受けません。そのため、em単位のように要素が入れ子になっていても関係なくフォントサイズを指定できます。
WEBサイトを実装する上で、最近では同一のHTMLを用いてデバイスごとに表示体裁を変化させる制作方法（レシポンシブデザイン）が主流となりつつありますが、メディアクエリを使ってフォントサイズを指定する際にremは大変便利です。htmlタグのフォントサイズ指定を変更するだけで、画面幅に応じた調整が容易に行なえます。
％単位とは
％はemと同様に、親要素を基準にした相対値です。要素のサイズを百分率で指定します。
文字よりもボックスやレイアウトに指定する場合が多く、レスポンシブデザインでコンテンツ幅を指定する際に用いると、表示画面を100%とするため、見切れることなくレイアウト崩れを防ぐことができます。
細かい数値指定で調整するというよりは視覚的な感覚でデザインを調整することができるため、私は比較的％単位を使うことが多いです。
vw単位とは
vwはブラウザの横幅を基準にした相対値で、1vwは画面幅の1%を表します。たとえば、ブラウザの幅が1200pxのときは、1vwは12pxになります。
%単位は親要素に依存するため、ブラウザ幅を基準としたい場合にはvwが便利です。私は一部コンテンツの背景を横幅いっぱいに表示したいときによく使用します。
| background: #ff000; width: 100vw; margin: 0 calc(50% – 50vw); height: 500px; |
横幅に準じている単位のため、さまざまなデバイスや画面サイズに対応できます。
まだまだ多くの種類があるCSSの単位
上記でご説明させていただいた単位以外にも、CSSにはたくさんの単位が存在します。
- cm
- mm
- ex
- in
- pc
- pt
- q
- ch
- vh
- vmin
- vmax
調べると多くの種類に混乱してしまう可能性があるため、今回は説明を割愛させていただきますが、
基本的には「px em rem vw %」の単位を理解していれば一通りWEBページの作成は問題なく行えると思っています。
CSSの単位を覚えて活用しよう
さまざまなデバイスが普及していく中、px指定だけでは思い描いた通りのレイアウトにはならない場合があります。
それぞれの単位の特性を理解し、メリットを活かした活用法を身につけられれば、コーディングの幅が広がるのではないでしょうか。
私自身もなんとなく使用していることが多いので、これを機によりアグレッシブなサイトを構築していければと思います。
この記事を書いた人
くまこ
DTP/WEBのぽんこつデザイナー。ほぼ独学からスタートしています。難しい言葉が苦手なので、自分のためにざっくりと分かりやすく纏めています。
