CSS3のfont-sizeでremとemどっちを使う?62.5%って何?

CSSで使うremとemについて

CSS3にはフォントサイズの指定でとっても便利な設定があります。
それはremとemという設定方法です。

それぞれの違いについて書いてみようと思います。

CSSのフォントサイズの考え方は2つだけ

フォントサイズの考え方は2つあります。

  • 絶対値という14pxと指定したら何が何でも14pxのままという設定
  • 相対値という親のフォントサイズに影響される設定方法。親要素の1.2倍とかそういう設定ができる

絶対値(px)でCSSを書くとこうなる

/* Your code... */
html {
  font-size: 20px;
}

/* h1のフォントサイズは32pxになる */
h1 {
  font-size: 32px;
}

/* h1のspan要素だけ16pxになる */
h1 span {
  font-size: 16px;
}

相対値(em)で書くとこうなる

emは自身の親要素を基準としてフォントサイズを決定します。

/* Your code... */
html {
  font-size: 20px;
}

/* h1のフォントサイズは40pxになる */
h1 {
  font-size: 2em;
}

/* h1のspan要素は親要素h1の40pxの2倍なので80pxになる */
h1 span {
  font-size: 2em;
}

相対値(rem)はhtml要素のフォントサイズを基準として計算する

rem(root em)はhtmlに設定しているフォントサイズに影響されます。emと違い親要素ではありません。
ルートとなるhtmlが基準です。

/* Your code... */
html {
  font-size: 20px;
}

/* h1のフォントサイズは40pxになる */
h1 {
  font-size: 2rem;
}

/* emと違いhtmlのフォントサイズを基準とするので40pxとなる */
h1 span {
  font-size: 2em;
}

remを使うとレスポンシブとか使用する際に、htmlのフォントサイズを変更すれば全て一斉に変えることができます。
全体的にワンサイズ大きく(小さく)することが非常に簡単です。

これからのreset.cssの書き方にオススメ

/* Your code... */
/* 62.5%というは10pxということです */
html {
  font-size: 62.5%;
}

body {
  font-size: 100%;
}

/* h1のフォントサイズは32pxになる */
h1 {
  font-size: 3.2rem;
}

/* htmlのフォントサイズを基準とするので16pxとなる */
h1 span {
  font-size: 1.6em;
}

このようにCSSを記述することによりレスポンシブに対応させるメディアクエリを書くときにhtmlのフォントサイズだけ変更すれば全体のバランスを崩さずフォントサイズを変えることができます。

慣れるまでちょっと大変かもしれませんが、慣れたらとても使いやすいので、ぜひ使ってみてください。

この記事が気に入ったら
いいね ! しよう

Twitter で



▽お帰りの際、ポチって頂けると助かります。
ブログランキング・にほんブログ村へ にほんブログ村 その他生活ブログへ にほんブログ村 その他生活ブログ 家計管理・貯蓄へ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 ライフスタイルブログ ミニマリストへ


PR
PR

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください