フォントサイズ指定の単位を「rem」に統一してみる平成30年 7月 25日 作成
概略
CSSのフォントサイズ指定の単位には「px」・「%」・「em」・「rem」・「vw（vh）」と多々あり、今までは使いやすさから「px」指定をしていたのですが、他のフォントサイズ指定の単位の特徴をを調べてみて「rem」が使いやすそうだったので導入してみる事とした。
フォントサイズ指定の単位を書き換えるだけではなく「rem」の特徴を活かした活用方法を見出す。
手段
特徴
「rem」は、ルート要素（html要素）に対して相対的なフォントサイズとなる。
デフォルトでは「1rem」が「16px」となる。（0.5rem＝8px、2rem＝32px、3rem＝48px）
特徴の活用
ブラウザの初期値のフォントサイズは16pxに設定されている。（html要素のフォントサイズを無記・100%とした場合。）
この「16px＝1rem」と言う事をふまえ 例えば「14px」のサイズはremでは「0.875rem」となる計算。
remの”html要素に対して相対的なフォントサイズとなる”特徴を活かし、デフォルトのフォントサイズを変更し解りやすく直感的にする。
考え方は、10pxが1remとなるように「htmlのfont-sizeを62.5%」に設定する。（10px ÷ 16px × 100% ＝ 62.5%）
これにより10pxが基準となり「1rem」は「10px」、「2rem」は「20px」となりわかりやすく直感的になる。
実装方法
CSS記述例
html {
font-size: 62.5%;
}
考察
「rem」に「vw（vh）」を合わせて書き、レスポンシブル適した記述方法もあるみたいので、次回の課題とする。（「vw（vh）」とは、ブラウザウィンドウの表示領域に合わせてフォントサイズを変更できるフォントサイズ指定の単位。）
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
