当サイトはアフィリエイト広告を利用しています。

【css】font-size: 62.5%やrem指定について解説

【css】font-sizeのremとか62.5とか

font-size: 62.5%。

この指定の意味が分からず、モヤモヤしている人もいると思います。

おそらく少数ですが。

そこでfont-size: 62.5%について、ややマニアック的に解説していきます。

しっかり理解して納得したい人は、ご覧ください。

font-sizeの62.5%

font-size: 62.5%は<html>タグに指定するものでした。

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
}

<html>のフォントサイズを10pxにするため、16px * 62.5%にしています。

それじゃあ、この16pxは何かといえばブラウザの標準文字サイズです。

ブラウザ … Google ChromeやSafariのこと

標準文字サイズは、だいたいどのブラウザも16pxくらいのよう。

ですが…

16pxという数値をどうやって引っ張ってきたのでしょうか?

20pxではなく、16pxの根拠は?

と疑問に思った人は先に進んでください。

【参考記事】サイト制作者から見たブラウザとは?

font-sizenの初期値はmedium

その16pxの鍵となるのが、font-sizeの初期値です。

初期値 … プロパティを指定していない時、はじめから与えられている値

font-sizeの初期値はmedium、と↓のサイトに載っています。

【参考外部サイト】font-size|MDN Web Docs

そして、このmediumの説明は上記サイトではよく分かりませんでした。

というか、明確に説明されている箇所がありません。

しかし、「medium = 中」ですよね。

ブラウザのフォントサイズ

というわけで、ここでGoogle Chromeのフォントサイズを見てみましょう。

画面右上にある3点マークをクリックしてください。

これです

そして、「設定」「デザイン」の画面でフォントサイズを確認できます。

フォントサイズが中(推奨)となっています。

ですから、さっきの初期値のmediumは、「中」となるわけですね。

おそらくですが…

そして、このGoogle Chromeのフォントサイズの「中」が16pxになります。

だから、16pxを「16px * 62.5% = 10px」という計算で使えたんですね。

納得していただけましたか?

次は、remの使い方についてです。

font-sizeにremを使う利点

あなたは、remfont-sizeの指定に便利だと聞いたことはありませんか?

ただ、具体的にどう便利なのかが分からない。

そんな人もいるかもしれません。

実際、僕も勉強している時には分かりませんでした。

ということで、remの使い方の実例を挙げてみます。

まず、remはこんな感じで指定すると思います。

<body>

<h2>ホホ</h2>
<h3>わわわ</h3>
<p>ぼーんずぼーんず</p>

</body>
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
}
body {
  font-size: 1.6rem;
}
h2 {
  font-size: 2.4rem;
}
h3 {
  font-size: 2.0rem;
}

上の指定だと、<h2>の文字サイズは24px、<h3>は20px。

<p>は、<body>の1.6remを継承するので16pxになります。

※継承 … 親の値を子に引き継ぐこと

【参考記事】cssの継承について解説

そして、パソコン用画面の時には1.2か1.3倍のフォントサイズにしたい。

そんな時は、<html>のフォントサイズを変更すればいいだけです。

こんな感じで↓

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
}
body {
  font-size: 1.6rem;
}
h2 {
  font-size: 2.4rem;
}
h3 {
  font-size: 2.0rem;
}

@media(min-width: 960px) {
  html {
    font-size: 75%;
  }
}

画面幅が960px以上では、文字の大きさが全体的に1.2倍となるよう計算。

※画面幅 = <body>の幅

62.5% * 1.2 = 75%

すると、<body>も<h2><h3>ともに1.2倍のフォントサイズになるわけです。

これがremが便利と言われる理由です。

たった1箇所、<html>の指定を変えるだけでいいので。

便利だと感じていただけたでしょうか?

補足(ブラウザのフォントサイズを変更した場合)

少し前の説明に戻ります。

上記でGoogle Chromeのフォントサイズは、「中」とお伝えしました。

そこでもし、フォントサイズを「大」に変えたら…

20pxとなります。

すると、

html {
  font-size: 62.5%; /* 20px * 62.5% = 12.5px */
}

となり、12.5pxが<html>のフォントサイズになります。

この状態で、

html {
  font-size: 62.5%; /* 20px * 62.5% = 12.5px */
}
body {
  font-size: 1.6rem;
}
h2 {
  font-size: 2.4rem;
}
h3 {
  font-size: 2.0rem;
}

とすれば、<body><h2><h3>ともにサイズがさっきより大きくなります。

つまりブラウザのフォントサイズを変更すれば、

<html>で計算したfont-sizeの値も変わるというわけです。

結果、サイト全体のfont-sizeにも影響が及びます。

参考サイト

この記事はCSS3をもとに書きました。

CSS3とはcssのルールブックみたいなもので、その最新版です。

初心者の方には、ややむずかしめに書かれています。

余裕ある方だけご覧ください。

まとめ

あなたもブラウザのフォントサイズ、1度いじってみてください。

自分の作っているサイトの文字の大きさが変化するはずです。

というわけで以上になります。

タイトルとURLをコピーしました