rem
- rem="root" + "em"
- rootとはhtml要素のこと。
rem
rem値は、複合の問題を避けるために考案されました。rem値は親要素ではなく、ルートhtml要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。
- root、つまり html に指定されたフォントサイズが「1rem」通常の状態では16px。
- cssのリセットをするときに、htmlもリセットするのは、このフォントサイズに対してリセットをかけるため。（ブラウザー依存しない状態に、フォントサイズをリセットする）
- html をリセットしたあと、要素ごとにフォントサイズを指定するのが理想。
<style>
body{font-size: 16px;}
h1{font-size: 32px;}
h2{font-size: 24px;}
h3{font-size: 20px;}
h4{font-size: 18px;}
p{font-size: 16px;}
</style>
- mobile用には、次のようなセットを作る。
<style>
html{font-size: 62,5%} /*10px相当*/
body{font-size: 1.6rem;}
h1{font-size: 2.4rem;}
h2{font-size: 1.8rem;}
h3{font-size: 1.6rem;}
h4{font-size: 1.6rem;}
p{font-size: 1.4rem;}
</style>
- 「em」は、相対指定。親要素の影響を受ける。
Em
フォントサイズをセットするもう一つの方法は
em値を使うものです。em 値の大きさは動的です。font-sizeプロパティを定義するとき、1em はその要素の親要素で用いられているフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザのデフォルト、おそらく 16px が使われます。したがって、デフォルトでは 1em = 16px であり、2em = 32px です。もし body 要素でfont-sizeを 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。必要な pixel 値に相当する em を計算するには、次の計算式を使えます:
em = 要素に設定したい pixel 値 / 親要素の pixel 単位でのフォントサイズ例えば、body のフォントサイズが 1em にセットされているものとすると、ブラウザ標準の 1em = 16px です。使いたいフォントサイズが 12px なら、0.75em を指定します（12/16 = 0.75 だからです）。同様に、使いたいフォントサイズが 10px なら、0.625em を指定します（10/16 = 0.625）。22px なら 1.375em です（22/16）。
文書内どこでも使えるよく知られたテクニックとして、body のフォントサイズを 62.5% にすることで（これはデフォルト 16px の 62.5% です）、これは 10px、すなわち 0.625em になります。これで「px 値 を10で割る」という覚えやすい変換式を使って、どの要素にも em 単位でフォントサイズをセットできます。この方法では 6px = 0.6em、8px = 0.8em、12px =1.2em、14px = 1.4em、16px = 1.6em になります。例を挙げます:
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>rem</title>
<style>
html{font-size: 62.5%;}
body{font-size: 1.6rem;}
h1{font-size: 3.2rem;}
h2{font-size: 2.4rem;}
h3{font-size: 2.0rem;}
h4{font-size: 1.8rem;}
p{font-size: 1.0rem;}
</style>
</head><body>
<h1>ｈ１が表示されています</h1>
<h2>ｈ２が表示されています</h2>
<h3>ｈ３が表示されています</h3>
<h4>ｈ４が表示されています</h4>
<p>ｐが表示されています</p>
</body>
</html>
- html: 200%;にすると…
<style>
html{font-size: 200%;}
body{font-size: 1.6rem;}
h1{font-size: 3.2rem;}
h2{font-size: 2.4rem;}
h3{font-size: 2.0rem;}
h4{font-size: 1.8rem;}
p{font-size: 1.0rem;}
</style>
- すべての要素が同じ比率で拡大します。
