先週は、「SpringBootを完全に理解する３」を紹介しました
今日は、「SCSSによるフォントサイズの指定」です！
1. はじめに
これまでHTMLを書く時はデザイナーさんの作成したCSSを使用するか、
`font-size: 12px;` のようにピクセルでばかり指定しておりましたが、このところ `em` や `rem` など、未だ理解していない定義を目にする機会がありました。
ちょうどいい契機なので他の指定方法も合わせてまとめてみました。
2. 解説
1) 指定なしの場合
フォントサイズの指定がない場合、表示される文字の大きさはブラウザの設定に依存します。
例えばChromeでしたら「設定→フォントをカスタマイズ」といった手順で基準となるフォントサイズを確認、あるいは変更できます。
今回検証に使用した３種類のブラウザではいずれも標準のフォントサイズには16pxが指定されていました。
2) ピクセル
日本語で「画素」と訳します。コンピュータが扱う画像の最小単位で、ここでは詳しく述べませんが、これ以上細かく表示する場合は特殊な対応が必要になります（アンチエイリアス等）。
赤文字が指定のない場合です。16pxに相当していることがわかります。
3)インチ系列
図示されているのは `pt` です。ポイントと読みます。１ポイントは1/72インチです。
検証に使用した環境は96ppi (pixel per inch) なので、
1in = 72pt = 96px つまり 3pt = 4px という関係があります。
`pc` はパイカという単位です。1pc = 12pt に相当します。
4)メートル系列
現実世界でお馴染み、`cm`, `mm` なども実はサイズ指定に使えます。`q` は quater で、1/4mmに相当します。
インチ換算が大変なので、`px`との対比は割愛します。
5)small, large など
ブラウザの標準フォントサイズを「medium」として、相対的に大きさを指定する方法です。
この画像は Chrome のキャプチャですが、xx-small が x-small と同サイズになっています。同じHTMLを表示させた FireFox と Opera では 9px と同じ大きさで表示されておりました。
6)smaller, larger
mozilla のサイトによると
> 親要素のサイズから相対的に、small, medium, large などの倍率におよそ沿う形で拡大または縮小されます。
とのことですが、どうもそのようなシンプルな関係にはなっていないように感じます。
7)パーセント指定
親要素のフォントサイズを基準として相対的に大きさを決定する方式です。
16pxの親要素に対して200%の指定をすれば32pxに相当する大きさになりますし、その子供に75%の指定をすれば24px相当になります。
8)em など
これも親要素との相対的な大きさを指定する方式です。1em = 100% という関係があります。
同じような性質を持つ指定方法に `ex`, `ch` などがあります。が、これら２つの換算はよくわかりません。
1ex は 0.5em に等しいという意見も散見しますが、ex はそれよりもう少し大きいように見えます。
`em` は親要素のフォントサイズが異なれば、同じ指定でも異なる大きさを示します。
9)rem
rem は root em の省略です。 em は親要素のフォントサイズを参照しましたが、rem は常に root要素、つまりhtmlタグのフォントサイズ指定を参照して自身の大きさを決定します。ですので親要素の大きさがどうあろうと同じサイズ指定であれば同じ大きさを示します。
ちなみにですが rex や rch といった指定方法は用意されておりません。
10) vw
一風変わった指定方法です。`vw` は「view port width」の略で、ブラウザのビューポートの幅に応じてフォントサイズを決定します。
1vw はビューポートの幅の 1% に相当します。メディアクエリを用いれば、画面幅に応じて適用するCSSの定義を変更できましたが、 `vw` ではそれを無段階に行うことができます。
この他にビューポートの高さに対応する `vh` 、両者の大きい方を参照する `vmax` 、小さい方を参照する `vmin` があります。
11)calc
`calc` は、各指定方法によって算出されたサイズ同士をさらに計算した結果を表示することができる表記方法です（small, large などは除く）。
例えば
```
<p style="font-size:calc(12px + 0.5rem)">あいう 123 abc ABC</p>
```
このように指定するとhtmlタグのサイズが16pxである場合、20px 相当のサイズで表示されます。
しかし、静的に指定されたサイズ同士をブラウザに計算させるくらいなら計算結果をCSSに書いておけばいいので、
やはり `calc` がその真価を発揮するのは `vw` と組み合わせた時だと考えます。
```
<p style="font-size:calc(10px + 2vw / 5)">あいう 123 abc ABC</p>
```
このように指定すれば、横幅500pxの時は12px、1250pxの時は15pxで表示されることになり、`vw` 単体で指定する方法よりも柔軟な表現が可能になります。
3.注意
ここまで文字の大きさについて話してきましたが、具体的に文字の大きさとは何か、ということは結構難しかったりします。
4.備考
検証環境
・OS
Windows 10 Home Version 1803
・ブラウザ
- Google Chrome 74.0.3729.169
- Mozilla Firefox 67.0.1
- Opera 60.0.3255.109