ホーム > ブログ > WEB技術 > CSS3のpxとremとemの違いについて

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

WEBクリエイトチームの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の違いについていかがでしたか。興味がある方はぜひ試して見てください!