ブログ
【WEB制作の基本】単位の違いと使い分け
CSSには幅や文字サイズを設定する時に使用する単位がpx、%、em、rem、vw、vhなどたくさんの種類あります。
それぞれの単位には特徴があり、正しく理解することで、状況に応じて最適な単位を設定することができます。
この記事では、それぞれ単位の特徴と使い方について解説していきます！
単位の種類
CSS単位は大きく2つに分類する事が可能です。
（１）絶対単位
（２）相対単位
絶対単位
絶対単位とは親要素のサイズなどに影響されることなく、指定したサイズそのものを表示する単位です。
ブラウザーの表示領域が変動しても反映されることはありません。
相対単位
「％」のような相対単位とは、ブラウザーの表示領域や親要素に指定したサイズを基準にして相対的に算出される単位のことを言います。基準にする要素の大きさによって大きさが変動します。
ですので、ブラウザーの表示領域が変わる（フルスクリーンから画面縮小させたり）と表示画面の大きさに対して相対単位で指定した内容もサイズが変動することになります。
絶対単位の種類と特徴
px（ピクセル）
もっとも一般的に使われる絶対単位です。
ほかの要素から影響を受けないので、指定したサイズが必ず表示されます。
相対単位の種類と特徴
％（パーセント）
親要素を基準にした時の割合の単位です。
例えば親要素のフォントサイズが16pxの場合、子要素が50％指定だと8pxとなります。
em（エム）
親要素のサイズを基準にした単位です。
例えば親要素のフォントサイズが16pxの場合 16px＝1emとなります。
ブラウザーの設定がデフォルトのままであれば、1emは16pxの設定となっています。
rem（レム）
ルート要素のサイズを基準に計算される単位です。ルート要素とはHTML文書の最上位要素を示しますので＜html＞タグとなります。例えばタグの要素にフォントサイズ16pxを指定した場合、16px＝1remとなります。
ブラウザーの設定がデフォルトのままであれば、1remは16pxの設定となっています。
vw（viewport width）
ビューポート（ブラウザで見るときの表示領域）の幅を基準とした割合の単位です。
例えばビューポートの幅が1000pxだった場合、50vwと指定すると半分の500pxの表示となります。
表示領域の幅によって変動できるので、様々なサイズのデバイスに対応が可能です。
vh（viewport height）
ビューポート（ブラウザで見るときの表示領域）の高さを基準とした割合の単位です。
例えばビューポートの幅が600pxだった場合、50vwと指定すると半分の300pxの表示となります。
表示領域の高さによって変動できるので、様々なサイズのデバイスに対応が可能です。