お疲れ様です！るーぷのコーダー、三木です。

今回は、サイト全体のフォントサイズの指定についてお話しします！

CSSで、

html{ font-size: [ここの指定をどうする？];}

というお話しです！

remについて

まず、大前提の話として、「rem」について確認です。

フォントサイズを指定するとき、

h2{ font-size: 24px;}

と指定していませんか？

サイズ指定には、「px」「%」「vw」などの単位がありますが、その中のひとつとして、
「rem」「em」という単位があります。

「rem」とは…
「root em」の略で、root＝HTML文書の基点となる要素のフォントサイズの倍率で指定できる単位。

「em」とは…
親要素のフォントサイズの倍率で指定できる単位。

今回は「rem」についてお話しするので、「em」については割愛いたします。

「rem」の基本的な使い方。

デフォルトのhtmlの場合、「1rem = 16px」になります。

なので例えば、フォントサイズ24pxの見出しには、「font-size: 1.5rem;」とCSSをあててやります。

何故わざわざ頭の中で計算しなければならない「rem」を使うのかというと、
ブラウザの設定画面で「大・中・小」など文字サイズを変更した場合に、pxで指定した文字は変更が適用されない場合があるらしいです。
ただカッコいいからrem使ってるのかと思ってました…

それではこれから、コーディング3年間での私のなかでのrem遍歴についてお話ししていきたいと思います。

（第1段階）入社〜半年【 html{ font-size: 62.5%;} 】

こちらは結構定番の指定で、入社してから半年ほどまではこの

【CSS】

html{ font-size: 62.5%;}

を設定していました。

html{ font-size: 100%;} で、「1rem=16px」ですが、
「10/16=62.5%」←この数字をroot要素にあてることで、
「1rem=10px」となるため、かなり直感的にremでの指定ができます。
24pxの見出しを見たら、素直に2.4remです。

（第2段階）入社半年〜1年【 clamp 】

入社半年〜1年ほどの期間はclampを使用していました。

ウィンドウ幅769px〜1200pxの間でフォントサイズ14px〜16pxに変動

ウィンドウ幅375px〜768pxの間でフォントサイズ14px〜21pxに変動

といった用途で指定をしていました。

【CSS例】

html{ font-size: clamp(14px, 10.432px + 0.46vw, 16px);}/* 769~1200 */

※弊社はPCデザインを基本的に1600px想定で作成していますが、
要素は1200pxが最大幅であることが多いため、
上記のように769px~1200pxで変化がつくように指定しています。

なぜ可変式に乗り換えたのか

経験を積んでいくにつれて、LPの制作に何度か携わりました。
LPは通常のサイトよりも画像が多くなる傾向があります。
そこから次第に、「画像は%で指定するのに、文字サイズが固定だとバランスが悪いな…」と感じるようになりました。

そこで、可読性を損なわない範囲で文字サイズを画面幅に合わせて小さくするようになったというのが経緯になります。

可変式にしたメリット

フォントサイズを可変式にしたメリットは、画像とのバランス以外にもあります。

  • ①ヘッダーナビがギリギリ収まる！（こともある。）
  • ②本文の改行位置を調整する頻度が減る。
  • ③文字以外の要素もremでサイズ指定することで、ウィンドウ幅に合わせて小さくなってくれる。（セクション間上下の余白指定にもオススメ！）

主なメリットは上記の3つです。

例えば①

ウィンドウ幅1600pxのとき↓

ヘッダーナビはまだまだ余裕です。

ウィンドウ幅960pxのとき↓

このままでは、スマホ配置切り替え予定の768pxまでとても耐えられそうにありません。
途中で潔くヘッダーナビを非表示にしてハンバーガーボタンを表示するか、
ナビの余白を調整する必要がありますが、ギッチギチになること必至です。

しかし、可変にした場合は…↓

769px(スマホ配置切り替え寸前)

バランスを保ったまま、無事769pxまで辿り着くことができました。
またこの画像ではメールアイコンのボタンを7remにサイズ指定したので、③のメリットも得ています。

（第3段階）入社1年〜3年目現在【 html{ font-size: 62.5%;}を応用して擬似可変 】

html{ font-size: 62.5%;} って、初期に戻ってませんか？
大丈夫です。この話はもうちょっとだけ続くんじゃ。

どう続くのかと言いますと、

  • ①bodyに1.6remを指定する。
  • ②html { font-size: 62.5%;}を指定する。
  • ③1200px以下のとき、html { font-size: 58.59%;}にする。（1.6rem=15px）
  • ④1024px以下のとき、html { font-size: 54.69%;}にする。（1.6rem=14px）
  • 以降もお好みで…

と、メディアクエリで細かくフォントサイズを変えることにしました。

それでは実際のコードは以下になります。

/* ——–root———- */
html { font-size: 62.5%;}/* 1.6remで16px */
/* 以降 (XXpx/16)×0.625 */
@media screen and (max-width: 1200px){
  html { font-size: 58.59%;}/* 1.6remで15px */
}
@media screen and (max-width: 1024px){
  html { font-size: 54.69%;}/* 1.6remで14px */
}
/* 以降、375pxで14pxにしたいので1.4remで指定 */
/* font-size100%時、1.4rem=22.4pxなので、XXpx/22.4=目的の％ */
@media screen and (max-width: 768px){
  html { font-size: 93.75%;}/* 1.4remで21px */
}
@media screen and (max-width: 530px){/* 350px*1.5 */
  html { font-size: 78.13%;}/* 1.4remで17.5px */
}
@media screen and (max-width: 430px){
  html { font-size: 62.5%;}/* 1.4remで14px */
}

/* ——–body———- */
body { font-size: 1.6rem;}
@media screen and (max-width: 768px){
  body{ font-size: 1.4rem;}
}

私の場合、本文の文字サイズはPCで16pxスマホで14pxにするため、bodyにそのサイズを指定しつつ、
上記のようにrootのフォントサイズを変更することでclampを使用していたときのメリットを再現しています。

clampを使用したときに比べたメリット

実はvwで可変する要素が複数あると、ウィンドウ端をドラッグして幅の伸び縮みをする際の動作がかなり重くなります。
コーディング中は何度もウィンドウ幅を変えるので、これは結構なストレスになります。

これを回避しつつ、指定さえしてしまえば細かい要素の調整はグッと減るため、このような方法に落ち着きました。

ブレークポイントやサイズなどは、案件によって自由に変えられるので、もし興味がある方はこちらの方法をお試しくださいませ。

おわりに

今回は、私が普段使いしているCSSの基盤の一部をご紹介しました。

初心者のころに悩みだった部分で、そして悩んで考えて、いろんなことが解決できたコードでもあるので、
似たような悩みを抱える初心者の方に少しでもヒントになれば幸いです。

メルマガ登録