サイズの指定方法について
本日の教材動画はこちら
今までなんとなく使っていたサイズの指定方法ついて詳しく勉強していきたいと思います。
＜絶対的なサイズ＞について
絶対的なサイズとは、名前の通り誰がどの端末でみても同じ大きさをたたき出してくれるサイズの指定方法です。種類と読み方、それぞれのサイズ関係は以下となります。
- in（インチ） →1icn = 2.54cm = 25.4mm
- mm（ミリメートル）
- cm（センチ）
- pt（ポイント）→72pt = 1inc = 6pc
- pc（パイカ） →1pc = 12pt
＜相対的なサイズ＞について
相対的なサイズとは、見る端末や指定環境によって大きさが変わるサイズのことです。サイズを決める際はpxと％が主流なんだとか。
- ex → xの高さを基準（=1）とするときのサイズ
- em → 一文字文の高さを基準（=1）とするときのサイズ
- px（ピクセル）→ 画面の光る点（1ドット）を基準とするサイズ
- ％（パーセント）→ 基準に対しての割合で決めるサイズ
と、つらつら書いてみましたがいまいちサイズ感がわかりませんね！（動画も見本などはなかったし）というわけで自分で超絶簡単な比較表みたいなものを作ってみました。
簡単にどれが何の単位化わかるようなソースにしてみました。
外部CSSの中身はこうです。数字を揃えたかったところですが、大きさにかなりのばらつきがでるため少しばらつきがあります。
そして出来上がったページがこちらになります（原寸大です）こうしてみるとin,mm,cmはいまいち大きさがイメージし辛いためやや使いづらい印象がありますね。やはり広く使われているpxが％が一番使い勝手良い気がします。
ちなみに各単位の関係性はブラウザのデフォルト設定では「100% = 1em = 1rem = 16px = 12pt」だそうです。今回何も弄らずサイズ指定だけ行ったので、emとpcと%が確かに同じ大きさになっているような気がしますね！
あとemですが、正確には「親要素の文字サイズに基いて自身を1とする」そうで、何もしなければブラウザのデフォルト設定は16pxのため1em＝16pxとなりますが、親要素の文字サイズを大きく指定した場合はそれによって変動する形になるようです。
あとこれは調べてわかりましたが、pxはどうも相対的サイズではなく絶対的サイズのようです。自分でまだ検証してませんが複数個所で同じこといってるから多分そうなんだと思います。
記載した単位の他に、rem、 vw、 vhといった単位もあるそうです。ケースバイケースで使い分けたほうがいいんでしょうが、いまいちわからないのでとりあえず私は理解できるまで使い慣れたpxを使おうかと思います！
【参照サイト】
