プログラミング独学day80のアウトプットは？
今日は
・font-sizeを指定するときの単位についてまとめる
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
font-sizeを指定するときの単位についてまとめる
「font-sizeを指定するときの単位っていろいろあるけど、どれを使えばわからない…」
ずっとモヤモヤしていましたが、ついにレスポンシブ対応中に向き合うべきときが来たのでまとめます。
今回は、こちらの記事を主に参考にしました！
絶対値と相対値
まず、サイズ指定の単位は
・相対値
の２つに分けられます。
絶対値は、「px」です。
たとえば、ブラウザのデフォルト値16pxが指定されているときは、画面幅を小さくしようが、見る媒体を変えようが16pxで表示されます。勝手に大きくなったり、小さくなったりすることはありません。
相対値は、「rem」「em」 「%」「vh」「vw」などがあります。
これは、親要素のサイズによってサイズが変わります。親要素は、それぞれの単位で異なります。
次でくわしく説明します。
相対値① rem
＊基準となる親要素→html
解説
親要素のhtmlを基準にして、その何倍かを示す単位。
ブラウザのデフォルト値は、16px(※)なので特に指定しない限りこれが基準となる。
2rem = 16*2 = 32px （デフォルト値の2倍）
100% = 1em = 1rem = 16px = 12pt
→CSSでfont-sizeを設定しないときは16pxで表示されます。
相対値② em
＊基準となる親要素→指定する要素の親要素
解説
<p>タグを囲んでいる<div>タグ の例で考えてみます。
<div>に20pxが指定されているとき、<p>タグに0.5emを指定すると…
0.5em = 20*0.5 = 10px (親要素の0.5倍…半分！)
相対値③ %
→② emと同じ！
親要素に対する％
相対値④ vw、vh
＊基準となる親要素→画面サイズ
解説
画面サイズを100としたとき、横幅は100vw、縦幅は100vhと表すことができる。
viewport width, viewport heightの略。viewportは画面の大きさのこと。
10vw = 画面の1/10の大きさ
画面サイズが1000pxのとき、10vw = 100pxになります。
このように、画面サイズが変わると指定サイズの大きさも変わります。
vw、vhはレスポンシブ対応のときに便利
前述のように、vwとvhは画面サイズによって指定サイズが変わります。
p {
font-size: 10vw;
}
と設定しても、PCとスマホで見たときでは大きさが変わるわけです。
これは…レスポンシブの時便利ではないかと(ようやく)気付き、実践してみる。
メディアクエリに、vw指定をしてみます。
画面サイズ 上：767px 下：500px
文字サイズが変わっているのがおわかりいただけるだろうか….これ、便利！
※現在、クリ★スタさん（@cresta_design）のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)
vw、vhはこちらを参考にしました
remを使う場合のデフォルト値の設定
remを使う場合にデフォルト値をどのように設定すべきか調べました。
remは、htmlの値が親要素になるのでした。
よって、
html {
font-size: 1６px;
}
のときに、<p>を12pxにしたい場合は、0.75emとする必要があり計算も大変です。
ここで、
html {
font-size: 10px;
}
10pxに設定してあげることで、remの計算がぐっと楽になります。
<p>を12pxにしたいときは、1.2remと感覚的に使うことができます！
emを使うときのデフォルト値の設定
同じように、emを使うときのデフォルト値について考えます。
emは、親要素によって値が変わるのでした。親要素に特に設定がない場合は、ブラウザのデフォルト値である16pxが採用されます。
よって1em = 16pxとなり、扱いにくい数字になってしまいます。なぜなら、12pxにしたいときは0.75emとする必要があるからです。指定したいサイズによってはいちいち計算が大変なのです。
そこで、
html {
font-size: 62.5%;
}
とhtmlに設定することで、1em = 10pxになります。
<p>を12pxにしたい場合は、1em = 1.2emと感覚的に使えます！
あとがき
レスポンシブで、viewportの大きさによって文字サイズを変えたいと思っていたので、使える単位を知ることができてよかった。
もりけんさんのHPはこちら
