Webデザイナーブログから学ぶホームページ制作

CSSでは、一般的に「px」や「%」の単位を利用されることが多いですが、CSSで指定できる単位は沢山あります。CSSで指定する単位は、フォントのサイズや余白の幅などを指定することができ、指定する単位によってサイズや幅は異なります。

今回は、CSSでのサイズ指定「px」「%」「em」「rem」の違いと使い分けについて解説します。

CSSで指定する単位は、「font-size」「margin」「padding」「ine-height」「ine-height」「width」「height」なのどのプロバティに対してサイズ、幅、余白、横幅、縦幅、線の長さなどの指定ができます。
CSSの単位でも代表的ともいわれる単位に「px」「%」「em」「rem」の単位があります。
CSSの単位は、「絶対値」と「相対値」の2つの種類に分類されます。

「絶対値」とは、他の要素に左右されない値のことです。指定した値がそのままのサイズで表示され、他の原因の変化があっても影響はしません。

「相対値」とは、親要素や他要素を軸にして数値が決まる値のことです。親要素や他要素で設定した値に対して、子要素で設定したサイズは変化します。

「px」「%」「em」「rem」の単位は、それぞれ使い方が異なるので、どの単位を使うかは理解した上で単位を選択しましょう。

px単位は、絶対値のため親要素や他要素、または画面サイズに影響しません。pxで設定する値は固定値となります。
px単位で指定すると親要素に影響しないため、テキストサイズ（font-size）を親要素に「20px」設定し、子要素に「12px」を指定しても、どちらも設定した値が固定値としての設定されます。
※ブラウザのフォントサイズの初期値は「16px」です。

親要素{
　　font-size: 18px;　// 18pxサイズで表示
}

子要素{
　　font-size: 12px;　// 12pxサイズで表示
}

%単位は、相対値のため親要素や他要素などに影響します。「100%」の大きさはブラウザの初期値である「16px」となります。
%単位は、親要素に設定している値に影響するため、テキストサイズ（font-size）を親要素に「20px」設定し、子要素に「160%」を指定すると、親要素に設定した「20px」に対して「1.6倍」のサイズ値として設定されます。
つまり、子要素のテキストサイズは「32px」のサイズ値としての表示されます。
※ブラウザのフォントサイズの初期値は「16px」です。

親要素{
　　font-size: 20px;　// 20pxサイズで表示
}

子要素{
　　font-size: 160%;　// 32pxサイズで表示
}

em単位は、相対値のため親要素や他要素などに影響します。「1em」の大きさはブラウザの初期値である「16px」となり、「%単位」と同じ計算方法となります。
em単位は、親要素に設定している値に影響するため、テキストサイズ（font-size）を親要素に「20px」設定し、子要素に「1.2em」を指定すると、親要素に設定した「20px」に対して「1.2倍」のサイズ値として設定されます。
つまり、子要素のテキストサイズは「24px」のサイズ値としての表示されます。
※ブラウザのフォントサイズの初期値は「16px」です。

親要素{
　　font-size: 20px;　// 20pxサイズで表示
}

子要素{
　　font-size: 1.2em;　// 24pxサイズで表示
}

rem単位は、相対値のためルート要素（html）に影響します。「1rem」の大きさはブラウザの初期値である「16px」となり、「em単位」と同じ計算方法となります。
rem単位は、ルート要素（html）に設定している値に影響するため、テキストサイズ（font-size）をルート要素（html）に「16px」設定し、子要素に「1.5rem」を指定すると、ルート要素（html）に設定した「16px」に対して「1.5倍」のサイズ値として設定されます。
つまり、子要素のテキストサイズは「24px」のサイズ値としての表示されます。
※ブラウザのフォントサイズの初期値は「16px」です。

html{
　　font-size: 16px;　// 16pxサイズで表示
}

子要素{
　　font-size: 1.5rem;　// 24pxサイズで表示
}

CSSで設定する単位は、「px」「%」「em」「rem」が主に使われますが、その他にも設定する単位は沢山あります。最も使われる4つの単位を学ぶことで、自分のコーディングルールを決めることができます。
コーディングしやすい単位を選択することで作業スピードが変わると思います。