【2021年】CSSで指定出来る便利な単位 特長を解説

画像:CSSで指定出来る便利な単位 特長を解説

CSSでサイズ指定する際に使う単位には色々な種類があり、目的に合わせて使い分ける事が出来るとコーディングが楽になります。
逆に何となくで使ってしまうと、思わぬ所でサイズがおかしくなったり、最悪レイアウトが崩れる事も。

沢山あるCSSの単位の中でも、実際によく使われる単位に絞って特長と使い方を解説しています。(普通はまず使わない様なものは省きました。)

FUERU
レスポンシブ対応するなら是非知っておくべき便利な単位もありますよー。

単位は絶対値と相対値に分類される

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」に指定したい場合。

図解:CSSの単位の使い方「%」パーセント
「%」パーセントの場合
計算式 14px / 16px * 100 = 87.5%

つまり、子要素のフォントサイズに87.5%を指定すれば、14pxになります。

%(パーセント)を使う理由とメリット

ポイント自分の直近の親要素を基準にする。

子要素のサイズを%で指定した場合、親要素のサイズ16pxさえ変更すれば、子要素に設定したサイズを触ることなく相対的に変更されます。

子要素が沢山ある時は便利ですね。

em(エム)単位

図解:CSSの単位の使い方「em」エム
CSSの単位の使い方「em」の注意点

例えば、親要素のフォントサイズが「16px」でこれを基準とした場合、親要素の「16px」を1emと考えます。

つまり1文字分のサイズ = 1em という考え方です。

この場合、子要素のフォントサイズに0.875emを指定すれば、14pxになります。

計算式 14px / 16px = 0.875em

もちろん子要素のフォントサイズを2emに指定すれば、倍の32pxになります。

計算式 倍のサイズにしたいなら16px * 2em = 32pxですね。

em(エム)の特長と注意点

ポイント自身の親のサイズが基準。

自身の親要素の数値が基準になりますが、親のサイズが分からないと混乱してしまいます。親子関係が複雑な入れ子構造だと思いがけないサイズになる可能性があるのでそこは注意です。

rem(レム:root em)単位

子要素は常に最上位であるhtml要素(root)のサイズを基準にします。

図解:CSSの単位の使い方「rem」レム
CSSの単位の使い方「rem」レム
計算式 倍のサイズにしたいなら16px * 2rem = 32pxです。

rem(レム)を使う理由とメリット

ポイント常にroot、つまりhtmlタグの数値が基準。

%(パーセント)とem(エム)は親要素のサイズ次第で相対的にサイズが変わるので、親子関係が複雑だと自分自身のサイズが分かりにくいです。

その点、rem(レム)だと常にhtmlのサイズを基準に計算されるので非常に分かりやすいです。

Viewport(ビューポート)を基準にした単位

現在多いレスポンシブに対応したレイアウトや、要素のサイズを指定するのに便利な単位です。ビューポートを基準に数値を計算します。

vw(ビューポート幅)単位

Viewport(ビューポート)横幅サイズをベースに計算されるサイズの単位。
1vwはViewportの幅の1%(1/100)。

図解:レスポンシブで便利なCSSの単位の使い方「vw」
レスポンシブで便利なCSSの単位「vw」

例えばビューポートの幅が1000pxの場合、500pxのサイズ指定は次のように計算されます。

計算式 500px / 1000px * 100 = 50vw

逆に、ビューポートの幅が1000pxの場合で、50vwのサイズを割り出す時は次のように計算されます。

計算式 1000px * 50% = 500px

vh(ビューポート高さ)単位

Viewport(ビューポート)高さのサイズをベースに計算されるサイズの単位。
1vwはViewportの高さの1%(1/100)。

図解:レスポンシブで便利なCSSの単位の使い方「vh」
レスポンシブで便利なCSSの単位「vh」

例えばビューポートの高さが500pxの場合、250pxのサイズ指定は次のように計算されます。

計算式 250px / 500px * 100 = 50vh

逆に、ビューポートの高さが500pxの場合で、50vhのサイズを割り出す時は次のように計算されます。

計算式 500px * 50% = 250px

Viewport(ビューポート)の変更に対応しやすい単位

図解:スマホで便利なビューポイントでのCSSの単位「vmin」「vmax」
スマホで便利なCSSの単位「vmin」「vmax」

vmin(ビューポート幅と高さの小さい方)単位

ビューポートの幅と高さを比較し、小さい方の値に基づいて計算されます。
ビューポートの幅か高さの値が小さい方の1%(1/100)。

vmax(ビューポート幅と高さの大きい方)単位

ビューポートの幅と高さを比較し、大きい方の値に基づいて計算されます。
ビューポートの幅か高さの値が大きい方の1%(1/100)。

数値の計算をしてくれるツール紹介

相対サイズの場合は計算してサイズを割り出さなければいけません。慣れてくれば大丈夫ですが、面倒な時はツールを利用しましょう。

pxtoem.com

名前の通り、pxからemへ変換します。もちろん逆にemからpxへも。表を見れば%も確認出来ます。

参考:pxtoem.com

px rem変換

こちらはpx、pt、%、em、remに対応しています。

参考:px rem変換

まとめ

単位の特長と使い分けが出来ると、面倒なコーディングがかなり楽になります。何より、レスポンシブ対応する為には覚えておいた方が良い単位もありますので、是非参考にして下さいね。

画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!