はじめに
レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？
今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎
目次
1. 単位のおさらい
2. テクニックたち（④が最もおすすめ！サクッと読みたい方は③（④の序章みたいな感じです）からどうぞ！）
① おすすめ度★★ px/rem × メディアクエリ
② おすすめ度★ vw
③ おすすめ度★★ calc × rem × vw
④ おすすめ度★★★ calc × rem × vw × clamp
単位のおさらい
テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。
| 単位 | 意味 |
|---|---|
| px | 1/96インチ |
| % | 親要素のフォントサイズの〇% |
| em | 親要素に設定されているフォントサイズの〇倍 1em=親要素に設定されているフォントサイズ |
| rem | HTML1要素のフォントサイズの〇倍 1rem=HTMLに設定されているフォントサイズ （デフォルトは1rem=16px→62.5%をかけると1rem=10px） |
| vw | ビューポートの幅（画面幅）の〇% 1vw=ビューポート幅の1% |
| vh | ビューポートの高さの〇% 1vh=ビューポートの高さの1% |
サイズ指定単位の特徴まとめ
ついでに、各単位の特徴をまとめてみました。
今回ご紹介するテクニックでは、特に"rem"と"vw"が活躍するので、この2つはぜひ押さえておいてください;)
テクニック
いよいよ、ここからはテクニックをご紹介！
今回はフォントサイズの種類をS,M,Lの3つ用意し、レスポンシブ対応させていきます。
それぞれのコーディングの例とメリット、デメリットをお伝えしていきます！
① px/rem × メディアクエリ（おすすめ度★★、一般的なので初心者向け☺）
こちらは最も一般的な手法で、ブレイクポイントを指定し、フォントサイズを変化させるもの。
指定したブレイクポイントで、段階的にサイズが変化していきます。
実装例は以下の通りです。
/*for SP*/
@media screen and (max-width:768px) {
.font-size-S {
font-size: 11px;
}
.font-size-M {
font-size: 12px;
}
.font-size-L {
font-size: 24px;
}
}
/*for tablet*/
@media screen and (min-width:768px) and (max-width:1024px) {
.font-size-S {
font-size: 14px;
}
.font-size-M {
font-size: 15px;
}
.font-size-L {
font-size: 27px;
}
}
/*for PC*/
@media screen and (min-width:1024px) {
.font-size-S {
font-size: 16px;
}
.font-size-M {
font-size: 17px;
}
.font-size-L {
font-size: 29px;
}
}
メリット
- メディアクエリを使用
→詳細なブレイクポイントやフォントサイズの設定が可能 - remを使用した場合
→フォントサイズの一括編集が可能
デメリット
- 画面幅に応じてフォントサイズが変化しない
- 1つの要素につき複数（＝ブレイクポイントの数）のコーディングが必要
→コード量が膨大
② vw（おすすめ度★）
続いてフォントサイズをvwで指定する方法。
vwで指定すると、常に画面幅の変化に応じてフォントサイズも変化するのが特徴です。
vw=指定したいpx/画面幅*100で計算できます。
ただし、ちょっぴり扱いづらいのでおすすめ度は低めです、、
実装例は以下の通りです。
/*画面幅320pxのとき約11px*/
.font-size-S {
font-size: 3.44vw;
}
/*画面幅320pxのとき約12px*/
.font-size-M {
font-size: 3.75vw;
}
/*画面幅320pxのとき約24px*/
.font-size-L {
font-size: 7.5vw;
}
メリット
- vwを使用
→フォントサイズが画面幅に応じて可変 - 圧倒的にコード量が少ない
デメリット
- vwを使用
→フォントサイズが小さくなりすぎたり、大きくなりすぎたりする
→計算が必要
px→vw変換ツールを利用すると効率的！ - フォントサイズの一括編集が不可能
③ calc × rem × vw（おすすめ度★★）
②のvwはわざわざ計算しないといけないので少しめんどくさかったですよね、、
「もっと感覚的に設定したい！」そんな方におすすめなのがこちらの方法。
複雑そうに見えて、いたって簡単！
❶ルート（HTML）のfont-sizeをcalc(100vw/32)と設定（画面幅320pxの場合）*
❷1rem=10pxの感覚でフォントサイズを指定 です！
*画面幅を10で割った数字をcalc(100vw/○○)の○○に設定してください
ルートにvwを設定しているので、フォントサイズは画面幅に応じて変化するし、1rem=10pxなので指定もしやすいですね！
実装例は以下の通りです。
/*画面幅320pxのとき100vw=320px 32で割ることでfont-sizeの基準が10pxに*/
html {
font-size: calc(100vw / 32);
}
/*画面幅320pxのとき約11px*/
.font-size-S {
font-size: 1.1rem;
}
/*画面幅320pxのとき約12px*/
.font-size-M {
font-size: 1.2rem;
}
/*画面幅320pxのとき約24px*/
.font-size-L {
font-size: 2.4rem;
}
メリット
- remを使用
→フォントサイズの一括編集が可能 - ルートにvwを使用
→フォントサイズが画面幅に応じて可変
デメリット
- vwを使用
→フォントサイズが小さくなりすぎたり、大きくなりすぎたりする
④ calc × rem × vw × clamp（おすすめ度★★★）
お待たせしました！今回最も紹介したいテクニックがこちら！
先ほどの③では、感覚的にサイズを指定しやすくなったものの、サイズが小さくなりすぎたり、大きくなりすぎたり、、、。
そんな問題を解消できる③の進化バージョンがこちらの手法！
clamp関数で（最小値, vwを使った可変の推奨値, 最大値）を設定するというものです！
実装例は以下の通りです。
/*基準を1rem=10pxに設定*/
html {
font-size: 62.5%;
}
/*最小値:1.1rem → 可変（0.9rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.6rem*/
.font-size-S {
font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
}
/*最小値:1.2rem → 可変（1rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.7rem*/
.font-size-M {
font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}
/*最小値:1.6rem → 可変（2.2rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:2.9rem*/
.font-size-L {
font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
}
メリット
- remを使用
→フォントサイズの一括編集が可能 - 推奨値にvwを使用
→フォントサイズが画面幅に応じて可変 - clamp関数を使用
→最小値と最大値を設定でき、フォントサイズが小さくなりすぎたり、大きくなりすぎたりすることを防ぐ
デメリット
-
ほんの少しだけ計算が必要
→px→vw変換ツールなどを参考にすると◎
ということで、以上レスポンシブなfont-size指定テクニック4選でした！この手法はフォントだけではなくサイズ全体（画像なども）に使えるものなので、用途に応じて使ってみてください☺