こんにちは、初心者向けCSS講座 第20回目の講座です 。 前回は「％」単位を使ってブロック要素の幅と高さを指定する方法についてご紹介しました。 今回はWebサイト上で使用する単位「絶対単位」と「相対単位」について詳しくご紹介します。
目次
Web上でサイズを指定する単位とは？
これまでも「px」「%」「rem」などの数値を指定する単位をご紹介してきました。 前回の講座で「px」と「％」の違いについて軽く説明しましたが、「px」のように指定されたサイズそのままを表示する単位、「％」のように親要素の大きさを基準としてサイズが変動する単位と二種類あります。「px」単位のようなものを「絶対単位」、「％」単位のようなものを「相対単位」と呼びます。
相対単位
「％」のような相対単位とは、ブラウザーの表示領域や親要素に指定したサイズを基準にして相対的に算出される単位のことを言います。基準にする要素の大きさによって大きさが変動します。 ですので、ブラウザーの表示領域が変わる（フルスクリーンから画面縮小させたり）と表示画面の大きさに対して相対単位で指定した内容もサイズが変動することになります。 相対単位にはいくつか種類があるのでご紹介します。
％
親要素を基準にした時の割合の単位です。例えば親要素が500pxの時、子要素が50％指定だと250pxの表示となります。フォントサイズに％単位を指定するときも同様に16pxのフォントサイズを指定した場合16px＝100％となります。50％だと8pxです。
em
親要素のサイズを基準にした単位です。フォントサイズなどによく使用されます。 例えば親要素のフォントサイズが16pxの場合 16px＝1emとなります。 ブラウザーの設定がデフォルトのままであれば、1emは16pxの設定となっています。
rem
ルート要素のサイズを基準に計算される単位です。ルート要素とはHTML文書の最上位要素を示しますので＜html＞タグとなります。例えば<html>タグの要素にフォントサイズ16pxを指定した場合、16px＝1remとなります。 ブラウザーの設定がデフォルトのままであれば、1remは16pxの設定となっています。
vw
「viewport width」の略です。ビューポートとはWebページをブラウザで見るときの表示領域のことです。 vw単位はビューポートの幅を基準とした割合の単位です。 例えばビューポートの幅が1000pxだった場合、50vwと指定すると半分の500pxの表示となります。 表示領域の幅によって変動できるので、様々なサイズのデバイスに対応が可能です。
vh
「viewport height」の略です。vｈ単位はビューポートの高さを基準とした割合の単位です。 例えばビューポートの幅が600pxだった場合、50vwと指定すると半分の300pxの表示となります。 表示領域の高さによって変動できるので、様々なサイズのデバイスに対応が可能です。
絶対単位
絶対単位とは親要素のサイズなどに影響されることなく、指定したサイズそのものを表示する単位です。 ブラウザーの表示領域が変動しても反映されることはありません。
px
もっとも一般的に使われる絶対単位です。ほかの要素から影響を受けないので、指定したサイズが必ず表示されます。 サイズの変動ができないため、様々なデバイスにも対応させたい場合などには考えて使用が必要です。 要素同士の間隔や線の幅サイズなど、デバイスの表示サイズが変わっても影響のない個所などに使います。
次回
今回はサイズ指定で使う単位「相対単位」「絶対単位」についてご紹介しました。 次回は余白を調整する「margin」「padding」についてご紹介します！ それでは、また次回もよろしくお願いします。
