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の違いについていかがでしたか。興味がある方はぜひ試して見てください！