【最新CSS】レスポンシブに対応した可変する文字サイズの指定方法

こんにちは。フクロウです。

ある程度Webデザインやコーディングの勉強をしている方、font-sizeの指定方法でつまずくことはありませんか？

少なくとも僕がそうでした。

最初はpxを使っていたのに、emが良いとか、remが良いとか、はたまたvwが良いとか。

一体どうすればいいのか分からない！！

という方へ、僕が思う便利なfont-sizeの指定方法をご紹介します。

今コーディング勉強中の方はぜひ参考にしてみてください。

レスポンシブに対応したfont-sizeの指定方法を取り入れる

スマホが欠かせない現代ですが、Webサイトの閲覧者のうち、約6割～7割はスマホからのアクセスであると言われています。

つまり今Webデザイナーを目指している方は、レスポンシブデザインに対応したWebサイト制作を勉強していかないといけない訳です。（もう聞き飽きるほど言われていることだと思いますが、念のため。）

今回はレスポンシブに対応するために、文字サイズが画面のサイズによって可変するCSSの書き方を目指していきます。

可変という特性上、スマホよりもブラウザの検証モードが使えるパソコンで確認するとより分かりやすいかもしれません。

それではfont-sizeの指定方法を1個ずつ見ていきましょう。

px（ピクセル）を使った文字サイズの指定

まずは基本中の基本と言ってもいいpx（ピクセル）を使ったサイズの指定です。

pxは絶対値といって他の要素に左右されない値なので、どんな状態でも必ず指定された数値のサイズになります。

当然可変もしませんので、レスポンシブには不向きです。

レスポンシブ化が必須の現状では、pxを文字サイズの単位に使うメリットはあんまり無いと思います。

もしサイト全体の文字サイズを一回り小さくしてくれという指示があった場合、全ての指定を修正しなきゃいけないのは大変ですしね。（そんな指示は稀だと思いますが）

僕も基本的に文字サイズを指定するときは使いません。

paddingやmarginの指定には使いますけど。

em（エム）を使った文字サイズの指定

em（エム）は親要素のfont-sizeに影響を受ける単位です。

下記を見てください。（分かりやすいように親要素はpxで指定しています）

See the Pen em by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.

親要素に20pxのサイズ指定をして、その中のspanタグに0.5emという指定をしています。

emは親要素のfont-sizeを受け継ぐので、この場合は1em＝20pxとなります。

上記コードではspanタグに0.5em、つまり10pxの文字サイズになるよう指示をしている状態です。

親要素の影響を受けるという特性は、入れ子が続くと何pxなのか分かりづらくなるというのが難点で、保守性には欠けるかもしれません。

上記コードではさらに親要素にpadding: 2em 1em;という指定をしていますが、これは要素内の上下に2文字分（40px）、左右に1文字分（20px）の余白を付けるという指示になります。

僕はこの余白を付ける時によくemを使用します。

仮に親要素の文字サイズが変わっても、emで余白を指定しておけば良い感じに保ってくれますしね。

rem（レム）を使った文字サイズの指定

rem（レム）はhtml（ルート）に指定した文字サイズの影響を受ける単位です。

下記を見てください。

See the Pen rem by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.

htmlに16pxの文字サイズを指定し、pタグに1rem、spanタグに2remを指定しています。

この場合htmlに指定した16pxが基準となるので、1rem=16px、2rem＝32pxとなります。

ただこれだと指定していくときになんとなく分かりづらいので、直感的に理解できるように下記のような指定方法を使います。

html{
  font-size: 62.5%;
}
p{
  font-size: 1.6rem;
}

たぶん見たことある人は多いかと思います。

htmlに62.5%の文字サイズを指定すると、1rem=10pxとなり、より直感的に分かりやすくなります。

上記だと1.6remなので16pxということになりますね。僕はこの指定方法をよく使っています。

またこの方法はレスポンシブとも相性が良いと言われています。

単純な話、メディアクエリでスマホの時だけhtmlに指定したfont-sizeの62.5%を変えてあげれば、それに沿って全ての文字サイズが変わりますからね。

とは言え実際のところhtmlの数値を変えただけで全てが良い具合に調整されるっていうことも中々無いとは思います。

僕も結局は一つ一つ地道にサイズを調整しています。特に見出し部分は。

％（パーセント）を使った文字サイズの指定

％（パーセント）はem同様に親要素のfont-sizeに影響を受ける単位です。

親要素にfont-size: 40px;を指定し、子要素にfont-size: 50%;を指定すると親要素の半分の20pxで表示されるということですね。

こちらもem同様に、入れ子が続くと何px指定しているのか分かりづらくなるので保守性には欠ける印象です。

vw（viewport width）を使った文字サイズの指定

vw（viewport width）は、名前の通りviewport（ビューポート）を基準に可変するサイズ指定です。

可変するので、レスポンシブデザインのサイトには欠かせない単位ですね。

まずは下記を見てください。

はい、いまパソコンでこれを見ている方はめちゃくちゃ大きく表示されているかと思います。

逆にスマホで見ている方は、ちょうどいい感じに表示されているはずです。

パソコンで見ている方は、Chromeの検証モードでビューポートを変えて確認してみてください。【Windowsの方はF12・Macの方はoption+command+Ｉで開きます】

どうでしょうか、可変していませんか？

このように見ているデバイスのビューポートによってサイズが変わるのがvwという単位です。

基本的には1vw＝ビューポートの1％と思っていいです。

「ん？だったら％でよくない？」

という疑問を持った方、お気持ちよーく分かります。

vwと％の決定的な違いは、親要素の影響を受けるかどうかです。

％は親要素の大きさによってサイズが決められるのに対し、vwは親要素に左右されず、必ずビューポートによってサイズが決められます。

そういった特性から、vwはレスポンシブデザインによく使われます。

ただ、このvwは最小値も最大値も決められないので何かと不便に感じるかと思います。

そこで編み出されたのが次の方法です。

calc()を使った文字サイズの指定

calc()は計算して値を指定できる超便利な関数です。

最初は意味が分からないと思いますが、コーディングをやっていくうちに絶対重宝することになります。

まずはcalc()を簡単に説明します。

See the Pen calc by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.

3つ並んだpタグにwidth: calc(100%/3);と指定することで、親要素内できっちり3等分することができます。

33.3333333%と書く必要はありません。分かりやすいし、スマートですよね。

これを文字サイズにも応用し、ビューポートによってサイズを可変させるようにします。

まず計算式は以下のようになります。

font-size: calc(X + ((1vw - Y) * Z));

X…指定したい文字サイズの最小値

Y…指定したいビューポートの最小値/100

Z…（文字サイズの最大値と最小値の差）/（ビューポートの最大値と最小値の差）×100

となりますが、いまいちピンと来ないですよね。

例えば、ビューポートが320pxから640pxの間で、文字サイズを20pxから30pxまでの間で可変させたい場合は以下のようになります。

X…20px

Y…3.2px

Z…（30px-20px）/（640px-320px）×100＝3.125

これらを式に当てはめると以下のような記述になります。

font-size: calc(20px + ((1vw - 3.2px) * 3.125));

あとはこれを320pxから640pxまでを指定したメディアクエリの中に書き込めば20pxから30pxの間で可変するようになります。

@media screen and (min-width:320px) and (max-width:640px) {
  font-size: calc(20px + ((1vw - 3.2px) * 3.125));
}

こんな感じですね。

試しに下記のテキストをブラウザの検証モードで確認してみてください。320pxから640pxのビューポートの間でのみ、文字サイズが可変しているはずです。

最初は難しく感じるかもしれませんが、一度理屈が分かってしまえば、自由に使っていけると思います。

便利なのでぜひ覚えてみてください。

font-size: calc(2.0rem + ((1vw - 0.32rem) * 3.125));

clamp()を使った文字サイズの指定

最後に、昨年（2020年）ようやくIEを除くブラウザに対応したclamp()を使った文字サイズの指定方法をご紹介します。

先程のcalc()のような関数の一種で、正直今回はclamp()を紹介するためにこの記事を書いてます。

clampは【留め金・締め金】という意味で、CSSにおいては【挟む】といった意味合いで使っていきます。

まず書き方ですが、clamp()は3つの数値で指定します。

clamp(X,Y,Z);

X…最小値

Y…基準となる値

Z…最大値

例えば、高さが100px、横幅10pxから200pxの間を10vwで可変するような箱を作りたい場合は下記のような指定になります。

.box{
  background: #ccc;
  width: clamp(10px,10vw,200px);
  height: 100px;
}

スマホで見ている方は長細い箱になってますよね。それで合ってます。

パソコンで見ている方は、ブラウザの検証モードで確認してみてください。

このclamp()を応用して、文字サイズを調整してみましょう。

最小値が20px、最大値が40pxの文字サイズで、ビューポートが320px（iPhone5S）から768px（ipadの画面幅）までの間は20pxから32pxの間を可変する文字サイズ

を指定していきます。文章だといまいち分かりづらいですね。

X…20px

Y…20px～32pxで可変

Z…40px

clamp()の中でcalc()を使うことができるので、Yの部分には先程説明したcalc()関数を使って当てはめます。

font-size: clamp(20px,calc(20px + ((1vw - 3.2px) * 2.67857)),40px);

これで完成です。

いまパソコンで見ている方は40px、スマホで見ている方は20px～32pxの間で表示されているはずです。

詳しくはブラウザの検証モードで確認してみてください。

このようにclamp()とcalc()を組み合わせることで、メディアクエリを使わなくてもきちんと可変する文字サイズの指定ができます。

これめちゃくちゃ便利ですよね。

ただ、最初に言ったようにIEにはまだ対応していないらしいので、気にされる方は別途font-sizeを指定する必要がありそうです。

僕はもうIEは切り捨てているのでガン無視ですが、早く無くなって欲しいものです。

制作者は楽に、閲覧者は見やすく。が理想

長々とfont-sizeの指定方法について見てきましたが、要するに

制作者（コーダー）は楽に、閲覧者（ユーザー）は見やすい文字サイズの指定方法を目指す。

というのが理想ですね。

どんなに文字サイズが正確でも保守性が悪いと制作者が大変ですし、どんなに制作者が楽でもユーザーに配慮が無ければサイトとして意味が無いですし。

どちらにも配慮できるWebサイト制作を目指していきましょう。

個人的には、clamp()とcalc()の組み合わせが現状一番理想的かなと思います。

ぜひこの記事を参考にして、自分なりにアレンジしてみてください。

ここまで読んでくださってありがとうございました。

ありがとうございました！