CSS

font-size「px、em、%、rem」の違い

フォントのサイズってpx(ピクセル)以外にもいろんな単位があって何を使ったら良いかよく分からないという方もいると思います。ここではそれぞれの単位の違いについてお話させていただきます。

コンテンツ

px(ピクセル)

pxは、コーディングで最も目にする頻度が大きい単位です。ピクセルは色情報をもつ最小単位といわれています。定規のミリやセンチとおなじように固定された長さを持つ絶対値です。

%(パーセント)

%日常でもよく使う単位なので説明しなくても分かると思います。font-sizeでは、親要素で指定されたfont-sizeを100%とした場合にどのくらいの大きさになるのかという指定の仕方になります。このように親要素などの値に応じてサイズが相対的に変化する単位のことを相対値と呼びます。

em

em%と同じような相対値です。親要素のフォントサイズを基準に「1文字=1em」としてサイズを指定します。仮に半分のサイズにする場合は、0.5emもしくは.5emという形で指定すればOKです。

親要素が10pxなら1em=10px
親要素が20pxなら1em=20px

というように親要素に指定されたfont-sizeによって1emの大きさが変化します。

rem

%emが指定される要素の親によって左右されるという欠点をカバーするために作られた単位がremです。remの “r” はrootの頭文字。つまり、大元の親要素のフォントサイズを基準にした相対値です。emと見た目が似ていますが、emが直近の親要素を基準にするのに対して、remはルート(元)つまりhtml要素の文字サイズに基いてサイズ指定ができるという特徴があります。この単位を使用する場合は、html要素に対して基準となるフォントサイズをピクセル指定しておく必要があります。

ちなみに、htmlに対して何もfont-sizeを指定しない場合、初期値として「1rem=16px」になります。

以上がフォントサイズで使われる単位のお話でした。個人的にはrem使って指定するのがオススメですが、WordPressのテーマに合わせていろいろ使い分けられると良いと思います。

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP