今日もマニアックです。
font-sizeのremについて、62.5%がどうだとかを解説します。
ではでは、さっそく…
font-sizeの62.5%
いきなりですが、<html>タグに指定するfont-size: 62.5%ってのがありますよね。
これです↓
html {
font-size: 62.5%; /* 16px * 62.5% = 10px */
}<html>のフォントサイズを10pxにするため、16px * 62.5%にしているのは分かると思います。
それじゃあ、この16pxは何かといえば、ブラウザの標準文字サイズです。
ブラウザ … Google ChromeやSafariのこと
標準文字サイズは、だいたいどれも16pxくらいのようです。。
そして、これも聞いたことがあるかもしれません。
ですが…
16pxという数字をどうやって引っ張ってきた。
導いてきたのかが不思議じゃないですか？
20pxではなく、16pxの根拠は？
と疑問に思った人は先に進みましょう。
で、その16pxの鍵となるのが、font-sizeの初期値。
※初期値 … プロパティを指定していない時、はじめから与えられている値
font-sizeの初期値はmedium、と↓の参考サイトに載っています。
そしてそして、このmediumの説明は上記サイトではよく分かりませんでした。
というか、明確に説明されている箇所がありません。
しかし、「medium = 中」ですよね。
というわけで、ここでGoogle Chromeのフォントサイズを見てみましょう。
画面右上にある3点マークをクリックしてください。
これです
↓
そして、「設定」→「デザイン」の画面でフォントサイズを確認できます。
フォントサイズが中(推奨)となっています。
ですから、さっきの初期値のmediumは、「中」となるわけですね。
おそらくですが。
そして、このGoogle Chromeのフォントサイズの「中」が16pxになります。
だから、16pxを「16px * 62.5% = 10px」という計算で使えたんですね。
みなさん、分かっていただけましたか？
次は、remの使い方についてです。
remの使い方
みなさんは、remはfont-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のフォントサイズは「中」だとお伝えしました。
そこでもし、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>ともにサイズがさっきより大きくなります。
まあ、それだけの話ですが…
参考サイト
font-sizeはCSS3をもとに書きました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
余裕ある方だけご覧ください。
まとめ
みなさんもブラウザのフォントサイズ、1度いじってみてください。
自分の作っているサイトの文字の大きさが変化するはずです。
というわけで以上…