「px,%,em,rem」⇒フォントサイズにはremがおすすめ

Tag:

IE8のサポートが切れて、今後ますます利用されるであろうremについて取り上げます。

CSSでよく利用される単位

まずは、CSSでよく利用される4つの単位について確認します。

px
ピクセル単位の指定
%
親要素を基準にした相対指定
em
親要素を基準にした相対指定
rem
root要素(html要素)を基準にした相対指定

emとremの違い

下記HTMLを例に説明します。

<body>
  <ul>
    <li>北海道</li>
    <li>
      <ul>
        <li>札幌</li>
      </ul>
    </li>
  </ul>
</body>

emの場合

html { 
  font-size: 10px;
}

li{
  font-size: 1.5em;
}

「北海道」のfont-sizeは、15px(10px × 1.5)になります。
「札幌」のfont-sizeは、22.5px(10px × 1.5 × 1.5)になります。

remの場合

html { 
  font-size: 10px;
}

li{
  font-size: 1.5rem;
}

「北海道」のfont-sizeは、15px(10px × 1.5)になります。
「札幌」のfont-sizeは、15px(10px × 1.5)になります。

emは、直近の親要素を基準とした相対指定なので、HTML要素の階層が深まるにつれて扱いづらくなります。それに対して、remは、常にroot要素(html要素)を基準としているので扱いやすいです。

remのサポート状況

remの各ブラウザでのサポート状況は「http://caniuse.com/#feat=rem」で確認できます。

remはIE8でサポートされていません。なので今までremを利用しなかった人も多いかと思います。ですが、マイクロソフトのIE8のサポートは終了しました。なので、今後は頻繁に利用されていくのかと思います。

例えば、Twitter社のBootstrapですが、「Bootstrap4」になるとremが多用されているようです。

フォントサイズにはremがおすすめ

PCやスマホなど、デバイスごとに適切なフォントサイズは異なります。

pxやemで指定するとデバイスごとのフォントサイズ調整が面倒ですが、remを使用するとベースフォントだけ変更すればよいのでおすすめです。

フォントサイズの目安

文章のフォントサイズの目安ですが、パソコンだと16pxぐらいは最低必要かと思います。スマホだと手に持って近くで見るため14pxぐらいあればいいのかなと思います。

ちなみに「bootstrap-4.0.0-alpha」の「_variables.scss」内では下記のように設定されていました。

$font-size-root:             16px !default;

$font-size-base:             1rem !default;
$font-size-lg:               1.25rem !default;    // 20px
$font-size-sm:               .875rem !default;    // 14px
$font-size-xs:               .75rem !default;     // 12px

$font-size-h1:               2.5rem !default;     // 40px
$font-size-h2:               2rem !default;       // 32px
$font-size-h3:               1.75rem !default;    // 28px
$font-size-h4:               1.5rem !default;     // 24px
$font-size-h5:               1.25rem !default;    // 20px
$font-size-h6:               1rem !default;

$line-height:                1.5 !default;
$line-height-lg:         (4 / 3) !default;
$line-height-sm:         1.5 !default;

ベースフォントを10pxにするとremの計算が楽

デフォルトのベースフォントサイズは16pxです。そのため、pxのサイズを考えながらremを指定するのが面倒です。

そこで、ベースフォーントサイズを62.5%にします。

html { font-size: 62.5%; }

するとベースフォントが10pxになるので、下記のようにpxとの対応関係が分かりやすくなります。

1.5remであれば、15px
2remであれば、20px

ベースフォントを変更できない場合

「bootstrap-4.0.0-alpha」だとベースフォントサイズが16pxです。16pxをもとにremが設定されているため、ベースフォントサイズの変更は避けたいところです。

このように、デフォルトの16pxのままremを利用したい場合には、sassのmixinを利用すると良いかと思います。

@mixin fontsize($size) {
    font-size: ($size / 16) * 1rem;
}

20pxの大きさになるようにremを指定したい場合、上記mixinを利用して、fontsize(20)とすれば、1.25remが設定されます。ベースが16pxなので「16px × 1.25」で20pxになります。

スポンサーリンク