サイズ指定の使い方について
サイズ指定の際にどれを使うとどういう効果があるのかを簡易的に記載。
px(ピクセル)
コンピュータ画面上のピクセル数（画素数）をもとにサイズをだすもの。
%(パーセント)
親要素の一部を基準とした割合
p要素のfont-sizeを16pxにしたときpの中にあるspanに設定したとすると。
| % | px |
|---|---|
| 100% | 16px |
| 50% | 8px |
よく使う場所(個人差あり)
- フォント指定の際にbody 要素、HTML 要素に指定するとem,rem などが使いやすくなる。
- スマートフォンの時のマージン、パディング、横幅などに使用することが多い。
em(エム)
親要素の大文字のMを基準とした単位(その時点の1文字分の長さ)
p要素のfont-sizeを14pxにしたときpの中にあるspanに設定したとすると。
| em | px |
|---|---|
| 1em | 14px |
| 1.5em | 24px |
| 0.5em | 7px |
※body要素にfont-size:62.5%;で指定すると1emが10pxと指定できる。
よく使う場所(個人差あり)
- list-style やletter-space など行間、文字間を指定する場合にem で設定すると使いやすい
rem(レム)「root」+「em」
親要素を継承せず、HTML要素に対する相対としての単位
html要素が62.5%の時
html {
font-size: 62.5%;
}
| rem | px |
|---|---|
| 1rem | 10px |
| 2.5rem | 25px |
※親要素に依存することがないので、入れ子になった時やタグが変わった時に影響がない
よく使う場所(個人差あり)
- 親要素に依存させたくない場合に使用する。
- emよりもより固定的な文字指定の向いている。
vw(viewport width)
ビューポート(デバイス)の幅に対する割合(100vw がビューポートの幅)
| デバイス | 1vw | 3vw | 10vw |
|---|---|---|---|
| iPhone5S(320px) | 3.2px | 9.6px | 32px |
| スマフォ(480px) | 4.8px | 14.4px | 48px |
| PC(1280px) | 12.8px | 38.4px | 128px |
よく使う場所(個人差あり)
レスポンシブの際に、背景の拡大縮小に文字サイズを合わせる時に使うと便利
vh(viewport height)
ビューポート(デバイス)の高さに対する割合（100vh がビューポートの高さ）
よく使う場所(個人差あり)
モーダルウィンドウや横固定メニューなどに使うと便利
pt（ポイント）
現実世界の絶対的長さの単位
グラフィックデザインなどに使われる。
まとめ
それぞれに適材適所があると思うので、使うポイントをあらかじめ決めておいた方がいい。
制作スタイルで使い方も変わるのかなと。