webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

rem font-size について。

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が表示されています</h1>
<h2>h2が表示されています</h2>
<h3>h3が表示されています</h3>
<h4>h4が表示されています</h4>
<p>pが表示されています</p>
</body>
</html>

f:id:ohta-felica:20160612105025p:plain

  • 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> 
 

f:id:ohta-felica:20160612105159p:plain

  •  すべての要素が同じ比率で拡大します。