WEBLOG

コーディング > css

画面サイズに応じてfont-sizeを「ちょっとずつ」拡縮させる

Create:

Update:

Category:コーディングcss

こんにちは。CSS大好きコーダーです。

閲覧デバイスが多様化する現代において、WEBサイトの主役とも言える「文字」のサイズはとても重要です。

とはいえ、メディアクエリで最適な文字サイズをそれぞれ逐一指定していくのはかなり大変です。

そこで今回は、画面幅に応じたfont-sizeを柔軟かつたった1行でスマートに指定する方法をご紹介します。
なんとメディアクエリすら必要ありません。

よくあるスマホ・タブレット・PCでの3段階指定

最もメジャーな記載方法は、このようにスマホ・タブレット・パソコンと3段階のブレークポイントを定めて、それぞれ記述していく手法です。

CSS
@media screen and (min-width: 480px) {
	/* スマホ */
	h3{
		font-size: 2rem; 
	}
	p {
		font-size: 1.4rem;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* タブレット */
	h3{
		font-size: 2.5rem;
	}
	p {
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 1024px) {
	/* PC */
	h3{
		font-size: 3rem;
	}
	p {
		font-size: 1.6rem;
	}
}

親の顔よりよく見る構成ですね。

「スマホではコレ!PCはコレ!」とそれぞれきっちり定めているため非常に解りやすく、確実性が高いというメリットがあります。

しかし一口に「480px未満」といってもデバイスによって意外と振れ幅が大きく、一概に「480px未満では◯rem」と指定しても、綺麗におさまらないケースも出てきます。

かといって「min-width: 375px・min-width: 414px・min-width: 480px…」と細かくブレークポイントを定めていくのは、あまりスマートではありません。

そんな時に便利な単位が vw です。

文字サイズを「vw」で指定する

vwとは、ざっくり言えば画面の横幅サイズです。草を生やしているわけではありません。
100vwで横幅画面いっぱい、10vwで画面の1/10くらいのサイズと考えていただければOKです。

これは%やem等と異なり、親要素の影響は一切受けません。

で、そんなvwでフォントを指定した場合、このようになります。

下記は見出しをfont-size: 5vw;、本文を font-size: 2vw;とした場合です。

流石に拡縮しすぎなのよ。そこまでやれとは言ってない。

画面サイズに完全依存なので、意地でも途中改行をさせたくない場合などには便利ですが、
こんなフ◯ージョンに失敗したゴ◯ンクス並みの極端な体型変化をされてしまうと、ちょっと汎用性には欠けます。

というわけで、もう少し拡大 / 縮小率をマイルドにしていきます。

calcを使って拡大縮小率をマイルドにする

CSS
h3 {
	/* SP:2rem | TB:2.5rem | PC:3rem */
	font-size: calc(1.25vw + 1.5rem);
}
p {
	 /* SP:1.4rem | TB:1.5rem | PC:1.6rem */
	font-size: calc(0.25vw + 1.3rem);
}

ちょっと雑な計算になりますが、スマホを400px、タブレットを800px、PCを1200pxとした場合、

1.25vw→ スマホ5px・タブレット10px・パソコン15px(5pxずつ上昇)
0.25vw→ スマホ1px・タブレット2px・パソコン3px(1pxずつ上昇)

このようになります。

calcで「固定数値 + サイズごとに変わる数値」といった形式で指定をすることで、画面サイズに合わせてちょっとずつ変化するようになります。

clampを使って最小値・最大値を定める

ただ、これでも少しずつとはいえ際限なく拡縮してしまいます。
Chromeではデフォルトで文字が10px以下にはならないようになっているものの、大きな画面でフルスクリーン表示した場合、想定を超えた文字サイズになってしまうかもしれません。

そこでclampの関数を使って一定数以上に大きく / 小さくならないように設定します。

CSS
h3 {
	/* 最小1.8rem | SP:2rem | TB:2.5rem | PC:3rem | 最大3.2rem */
	font-size: clamp(1.8rem, calc(1.25vw + 1.5rem), 3.2rem);
}
p {
	/* 最小1.2rem | SP:1.4rem | TB:1.5rem | PC:1.6rem | 最大1.8rem */
	font-size: clamp(1.2rem, calc(0.25vw + 1.3rem), 1.8rem);
}

これで想定を超えた文字サイズになる事はなく、スマートな形で文字の拡縮を設定する事ができました。
メディアクエリすらも必要無く、スッキリ一行で済むところも嬉しいですね。

vwのピクセル換算 早見表

下記は画面サイズに応じたvwのpx換算の早見表です。
拡大 / 縮小率の目安としてお役立てください。

画面幅
400px
画面幅
800px
画面幅
1200px
0.25vw

1px

2px

3px

0.5vw

2px

4px

6px

1vw

4px

8px

12px

1.25vw

5px

10px

15px

1.5vw

6px

12px

18px

2vw

8px

16px

24px

2.5vw

10px

20px

30px

3vw

12px

24px

36px

3.5vw

14px

28px

42px

4vw

16px

32px

48px

4.5vw

18px

36px

54px

5vw

20px

40px

60px

10vw

40px

80px

120px

12.5vw

50px

100px

150px

それでは、良きfont-sizeライフを。

pagetop
loading