ども、むったんです。

 

最近、SNSやネットを見ていると…やたら「恋とプロデューサー」というゲームアプリの広告が表示されます。
基本的に広告類はスルーするむったんですが、本能的に惹かれ事前登録をしましたw（恐らく、起用されてる声優に惹かれてる）
配信、楽しみにしています٩(ˊᗜˋ*)و

 

 

 

さて、「よく見る○○ってなに!?」の第二弾です！（シリーズ化してこうかな…
みなさんは、htmlやbodyにfont-sizeを設定する場合、いくつにしていますか？

 

ちょっと前までむったんは「font-size: 14px;」とか「font-size: 16px;」にしていました。（そう、過去形
ふと、気付いたのですが「フォントサイズを固定してしまうと、ユーザビリティ的によろしくないのでは？」と。

 

 

なぜ、ユーザビリティ的に…と言いますと、ブラウザにもフォントサイズがあることを知っていますか？
※ブラウザのフォントサイズってなに？という方は、各ブラウザの設定から「フォントサイズ」などの項目を見つけて、いじってみてください(*ﾟ▽ﾟ)ﾉ

 

仮に小さい文字が見辛いユーザーが、ブラウザのフォントサイズを「極大」にしていたとします。
しかし、サイトのhtmlにfont-size: 14px;とした場合、フォントサイズはいくつになるでしょうか？
要素によってfont-sizeの設定を行うとおもうので14pxとは限りませんが…このユーザーが求めてる「極大」サイズにはなりにくいと思います。

 

…ということに気付くと、さぁ大変！
じゃ、htmlやbodyに設定すべきfont-sizeはいくつにするんだよ！ということになりますね。

 

 

font-size: 62.5%;は呪文みたいなもの

さかのぼること約10年前。
私が大学生時代でした…( ´ ▽ ` )ﾉ（え!?10年!!!!!←自分で言っててビビる

 

当時、私が入ってたゼミにデザインもプログラミングもできるスゲェー先輩がいたのですが。
その先輩にコーディングについて教えてもらってる時に言われました。
「スタイルシートのhtmlにfont-size: 62.5%;を入れてね」と。

 

その時、なんで62.5%を入れなくてはいけないのか説明してもらったのですが…理解力が無い私は、ぽかーんw
そんなアホづらを晒してる私に優しい先輩は「font-size: 62.5%は呪文みたいなもんだから、覚えといて」って。
呪文と言われれば、万能！とかいう謎の思考に陥る私は言われた通り、62.5%を使い始めました。

 

 

そしてそれから数年。
62.5%の意味って結局なんだったんだろ…でpx指定していたのですが、あかんやん！先輩の言う通りだったよ！
先輩、素直に言うことを聞かなくてごめんなさいm(._.)m（笑）

 

 

62.5%を解説します

まず、頭に入れておいてもらいたいのが…2019年6月現在、各ブラウザのデフォルトフォントサイズは16pxであるということです。
※実機確認したところ、MacのChrome, FireFox, Safariは16pxでしたが異なってたらすみませんm(._.)m

 

 

See the Pen rEBLzB by 6zaki (@6zaki) on CodePen.

 

codepenでデフォルトのフォントサイズで表示しています。
各ブラウザで設定からフォントサイズを変更して更新すると、フォントサイズが変化すると思います。

 

 

 

 

さて、各ブラウザのフォントサイズが16pxと分かったところで、なぜ62.5%が使われているのか、ということです。

 

htmlにfont-size: 62.5%;をするのはどういう事かと言うと、以下のような感じです。
デフォルトサイズ × 新規設定 → 16px × 62.5% = 10px

 

おろろ、キリのいい数字になった！
つまりは各要素でわざわざ電卓を叩いてフォントサイズを求めなくてもできますね！

 

– htmlを固定で指定する場合 –
htmlを16pxに設定、p要素を14pxにしたい。→ 14px ÷ 16px = 0.875rem
つまりは… 16px × 0.875rem = 14px

 

計算パターン覚えちゃえばなんてことは無いですが…毎度電卓叩くのは億劫よね。
なので、便利なのが62.5%！

 

 

 

– htmlを62.5%で指定する場合 –
htmlを62.5%に設定、p要素を14pxにしたい。 → 16px × 62.5% × 14 = 1.4rem
つまりは…10px × 1.4rem = 14px 

 

このパターンは計算が簡単だから、電卓叩かなくてもイケる！！

 

 

See the Pen font-sizeについて by 6zaki (@6zaki) on CodePen.

 

こんなかんじにね！

 

ちなみに先ほどから普通に出てきたremですが、ルート要素（html）のfont-sizeを基準に決めています。
emは親要素のfont-sizeを基準に決めているので、孫要素、ひ孫要素とかになってくると計算が大変です。

 

注意事項

ここまでくると、お気付きの方もいるとは思いますが…。
ブラウザのフォントサイズをデフォルト（16px）にしていないユーザーがいた場合、意図していないフォントの大きさになります。

例）デフォルトサイズを24pxに設定、htmlを 62.5%に設定、p要素を14pxにしたい。→ 24px × 62.5% × 1.4rem = 21px

 

おろろ…目的の1.5倍になってしもうたよ、とかね。

 

 

デザイン性を優先して、htmlに設定するフォントを固定するか
ユーザビリティを優先して、htmlに設定するフォントを62.5%にするか

 

 

それは目的ごとに異なると思いますが、やり方の一つとして62.5%を覚えておいてもいいかもしれません(´∀｀*)

ではっ！