年々増えていく、フォントサイズを指定する単位。
「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。
今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。
決め手は「rem」と「vw」
CSSでまずは基準となるフォントサイズを決めます。下記のように設定します。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@media screen and (min-width:769px){ /* PC 769px以上 */ html{ font-size: 16px; } } @media screen and (max-width:768px){ /* タブレット 768px以下 */ html{ font-size: 2vw; } } @media screen and (max-width:480px){ /* スマートフォン 480px以下 */ html{ font-size: 3.4vw; } } |
そして、個々のCSSを記述していく際、すべてのfont-sizeで「rem」単位を使用します。
PC版のみではなく、すべての端末に適用されるようにメディアクエリは外してください。
|
1 2 3 4 5 6 7 8 9 |
h2{ font-size: 1.25rem; } p{ font-size: 1rem; } ・ ・ ・ |
上記の見本だと、PC版では16pxが規準なので、h2は20px、pタグは16pxになります。
解説
remは、常にhtmlタグに設定されているfont-size基準として算出される性質があります。その性質を利用して、Tab幅で、規準となるhtmlのfont-sizeを「vw」にしてしまえば、各タグのフォントサイズ比率を保ったまま、勝手にイイ感じのサイズになるCSSになります。
いろんな端末で確認しながらfont-sizeを定義し直す必要もなくなります。
この手法を使用すると、ウェブアクセシビリティ対応必須な場合でも、エラーが出ません。
文字サイズ変更機能があっても、htmlを分岐させるだけなので簡単！
あとは実際にTab幅とSP幅で見て、微調整を行うだけで、font-sizeの設定は完了すると思います。
意外と工数が多く発生しがちなfont-size調整がなくなり、レイアウト調整だけで済むとなると、コーディングの工数がぐっと抑えられると思います。
PC版htmlタグの基準は16pxの固定にするのがオススメですが、それ以外はご自身のサイトのデザインに合わせて数値を変更してください。
フォントサイズは小数点pxになってしまうと、ぼやける場合があるので、端数が出ないよう「rem」を記述してあげてください。（14.3pxなどはNG）
rem フォントサイズ早見表
| px | rem（htmlが16px） | rem（htmlが14px） |
|---|---|---|
| 10px | 0.625rem | 0.71428571428571rem |
| 11px | 0.6875rem | 0.78571428571429rem |
| 12px | 0.75rem | 0.85714285714286rem |
| 13px | 0.8125rem | 0.92857142857143rem |
| 14px | 0.875rem | 1rem |
| 15px | 0.9375rem | 1.0714285714286rem |
| 16px | 1rem | 1.1428571428571rem |
| 17px | 1.0625rem | 1.2142857142857rem |
| 18px | 1.125rem | 1.2857142857143rem |
| 19px | 1.1875rem | 1.3571428571429rem |
| 20px | 1.25rem | 1.4285714285714rem |
| 21px | 1.3125rem | 1.5rem |
| 22px | 1.375rem | 1.5714285714286rem |
| 23px | 1.4375rem | 1.6428571428571rem |
| 24px | 1.5rem | 1.7142857142857rem |
| 25px | 1.5625rem | 1.7857142857143rem |
| 26px | 1.625rem | 1.8571428571429rem |
| 27px | 1.6875rem | 1.9285714285714rem |
| 28px | 1.75rem | 2rem |
| 29px | 1.8125rem | 2.0714285714286rem |
| 30px | 1.875rem | 2.1428571428571rem |
これ以外にも、「px」⇔「rem」の変換ツールが存在します。
px rem変換： https://hp-html.jp/px/
色々活用して、少ない工数でどんどんコーディング高速化を叶えましょう。
YoutubeChannelのご紹介
同様の内容を、動画でご覧になれます。
https://youtu.be/jgIkzEE6cis
