CSSのフォントサイズはどうする? remの基本かつ効果的な使い方。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

CSS フォントの単位はpx? %? em? rem?

remで覚えると安全かつ便利。

Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。

単位とサイズ。

単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。

サイズについては、各ブラウザ間でほぼほぼ16pxが確立されてきており、スマホでもPCでもベースとなる文字サイズはだいたい16px付近となっている。

rem。CSSのフォントの単位は? サイズは?

ただし、「px」は「絶対的」な単位であり、後から文字サイズを変えたくなった場合には、あちこちの指定を変更しなければならなくなる。

対して、「rem」は「相対的」な単位であり、後から文字サイズを変えたくなった場合でも、根元(ルート)の指定だけを変更すれば対応ができる。

(「em」や「%」も「相対的」な単位であるが、親要素から子要素への継承や計算がややこしく、すんなりとイメージ通りにならない。限られた箇所での使用に留めておいた方がトラブルの予防となる。)

remってなんだろう?
  • rem」は「root em」のこと。
  • 「em」は元々、アルファベットの大文字「M」を1文字のサイズとする単位。

rem。CSSのフォントの単位は? サイズは?

以上のようにremの場合は%やemのように親要素ではなく、root(ルート、根元)のサイズを基準にすることができるので使い勝手が良い。

全体的な文字サイズの変更箇所がルートの1箇所で済む。


remの指定方法とは?

ブラウザ間の統一感は確立してきてはいるが、それでもまだリセット用のCSSがあった方が安心だ。ブラウザのfont-sizeをリセットしたあとは、以下が基本的な指定となる。

  • 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というのは元々フォントサイズを指定するためのプロパティである。インデント(字下げ)のために使うのなら問題ないが、幅や縦のサイズに使うと、第三者的に混乱の原因となりコードが見づらくなるだろう。

なので、引き継ぎを受けてくれる他者のためにも、適材適所での使い分けが大切となる。

rem。CSSのフォントの単位は? サイズは?

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。