CSS フォントサイズはどうする？ remの基本かつ効果的な使い方。
remで覚えると安全かつ便利。
Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。
単位とサイズ。
もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。
サイズについては、各ブラウザ間でほぼほぼ16pxが確立されてきており、スマホでもPCでもベースとなる文字サイズはだいたい16px付近となっている。
ただし、「px」は「絶対的」な単位であり、後から文字サイズを変えたくなった場合には、あちこちの指定を変更しなければならなくなる。
対して、「rem」は「相対的」な単位であり、後から文字サイズを変えたくなった場合でも、根元（ルート）の指定だけを変更すれば対応ができる。
(※「em」や「%」も「相対的」な単位であるが、親要素から子要素への継承や計算がややこしく、すんなりとイメージ通りにならない。限られた箇所での使用に留めておいた方がトラブルの予防となる。)
remってなんだろう？
- 「rem」は「root em」のこと。
- 「em」は元々、アルファベットの大文字「M」を1文字のサイズとする単位。
以上のようにremの場合は%やemのように親要素ではなく、root（ルート、根元）のサイズを基準にすることができるので使い勝手が良い。
全体的な文字サイズの変更箇所がルートの１箇所で済む。
remの指定方法は？
ブラウザ間の統一感は確立してきてはいるが、それでもまだリセット用のCSSがあった方が安心だ。ブラウザのfont-sizeをリセットしたあとは、以下が基本的な指定となる。
htmlのフォントサイズを「10px」にすると、計算が楽になる。
- htmlのフォントサイズを「10px」で指定する。
- bodyのフォントサイズを「1.6rem」で指定する。html + bodyのこの指定で、結果的に16pxとなる。
（bodyのフォントサイズを15pxにしたい場合は、1.5rem、14pxにしたい場合は1.4remにすれば良い。） - hタグやsmallタグなどは、周囲とのバランスを取りながら個別に「rem」で指定する。
「10px = 1rem」としておくと、認識がしやすいというメリットもある。
remは相対的な単位なので、htmlが10px、bodyが1.6remであれば、「10px × 1.6 = 16px」となる。
h1が3remであれば、「10px × 3 = 30px」という具合で、計算もしやすい。
remを使ったfont-sizeの指定例。
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
small {
font-size: 1.4rem;
}
このような指定をしておくと、後から「もう少し大きくしたい」、「もう少し小さくしたい」といった場合に楽になる。
body内のフォントサイズを変えたい場合は、body部分のfont-sizeを変えれば良い。子要素にpタグがあればそのpタグにも適用される。
全体的に文字サイズを大きくしたい、小さくしたい場合は、htmlの10pxを11pxや9pxにするだけでサイト全体を調整することができる。
レスポンシブ対応がしやすい。
htmlに指定する「10px」はキリが良く、10%上げると11pxに、10%下げると9pxとなる。
サイト全体的に文字サイズを20%上げたい場合は、htmlの箇所だけを「12px」にすれば120%の拡大となる。
例えばスマホと大きめなPCモニターで文字サイズを変えたい場合でも、ブレイクポイントでhtmlの箇所だけを変えれば対応ができる。
CSS
例）
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
@media (min-width: 1600px) {
html {
font-size: 12px;
}
}
remを利用した、サイト全体の文字サイズを変えるボタン。
jQueryと組み合わせると、簡易的な文字サイズ変更ボタンが作れる。
HTML
<div class="btn_box">
<button class="small">小</button>
<button class="medium">中</button>
<button class="large">大</button>
</div><!--btn_box-->
CSS
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.btn_box {
display: flex;
}
button {
margin: 5px;
border: 1px solid #aaa;
border-radius: 2px;
padding: 5px 8px;
}
jQuery
//小をクリックで10%小さく、中をクリックで100%に、大をクリックで10%大きくなる。
$(function(){
$(".small").click(function(){
$("html").css('font-size', '9px'); //90%のサイズ
});
$(".medium").click(function(){
$("html").css('font-size', '10px'); //100%のサイズ
});
$(".large").click(function(){
$("html").css('font-size', '11px'); //110%のサイズ
});
});
remを幅や縦のサイズに使うのは基本的には間違い。
remというのは元々フォントサイズを指定するためのプロパティである。
インデント（字下げ）のために使ったり何かしら意図があるのなら問題ないが、安易に幅や縦のサイズに使うと、第三者的に混乱の原因となりコードが見づらくなるだろう。
なので、引き継ぎを受けてくれる他者のためにも、適材適所での使い分けが大切となる。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
