ホーム > DERUKUIブログ > エンジニア > CSS3のpxとremとemの違いについて

CSS3のpxとremとemの違いについて

ENGチームのLEEHANYOONです!!

CSSは、Webページを制作する際に欠かせないスタイルシート言語です。スタイルシート言語とは、プログラミング言語とは違い、Webページの見た目を整えるための言語のことです。

CSSは色々な単位の設定ができるので、しっかり理解して上で、使わないと自分の意図通りに制作もしくは構築ができません。
今回はタイトル通り、pxとremそしてemなどについて説明をしたいと思います。

pxとは??

サイズを絶対値で指定する場合に使います!

html {
font-size: 20px;
}

h1 {
font-size: 10px; /* -> 10px; */
}

h1 span {
font-size: 15px; /* -> 15px; */
}

emとは??

親要素のfont-sizeを基準にして大きさを計算します!

html {
font-size: 20px;
}

h1 {
font-size: 2em; /* -> 40px; */
}

h1 span {
font-size: 0.5em; /* -> 20px; */
}

spanタグの親要素はh1ですね!なので、40pxを基準として0.5倍の20pxになります!

remとは??

このrem!!!CSS3から登場してきました!
フロントエンドやマークアップエンジニアが迷うのは間違いなくemとremの違いです!
文書のルート要素、つまりhtml要素のfont-sizeを基準にして計算します!

html {
font-size: 20px;
}

h1 {
font-size: 2em; /* -> 40px; */
}

h1 span {
font-size: 0.5em; /* -> 10px; */
}

spanタグの親要素はh1を参照するのではなく、htmlのフォントサイズを基準にしていますね!
いかがでしたか?ちなみにブラウザのデフォルトサイズは16pxです!
remを使う場合、16pxを基準にして計算するのは難しいですね!
その場合、どうするのか!以下の内容を確認してください!

よくやるやり方

html {
font-size: 62.5%; /* -> 10px; */
}

1emが10pxになるように調整して対応するのサイトが多いです。
理由としては基準が10pxなので、16pxより計算しやすいからです。
h1 {
font-size: 1.4em; /* -> 14px; */
}

px,em,remの違いについていかがでしたか。興味がある方はぜひ試して見てください!