CSS – font-sizeを相対値で指定する

ワードプレスのメモ

「pxで統一すればいいじゃないか!?」

という向きも多いと思います。

直感でわかる、悩むことが少ない、大事ですね。

分かりやすいというのは、お客様、代理店様から見ても同じわけで、
「ここは36pxにしてチョ!」って簡単に指摘できれば、不毛なやり取りが減り、工期も短縮します。

では、なぜ相対値を使うか?

ケースによりますが、スマートフォン用、PC用など、いちいち指定しなくても良い場合があるから。

基準が

  • PC:body = 16px
  • スマートフォン:body = 14px

として、

h1をpxで指定

  • PC:h1 = 32px
  • スマートフォン:h1 = 24px

このようにメディア別に指定することになります。

これが面倒だなぁと。

h1を相対値(%)で指定

  • h1 = 200%

PCでは換算32px、スマートフォンでは換算28px。

例えば「h1をもっと大きくしてチョ!」って指示された場合、だいたいPC時のことを指しているのでスマートフォンでも大体同じ感じで変更されれば便利かな、と。

レスポンシブの想定があるかどうか?

「スマートフォンではどうしても h1 = 24px じゃないとダメ!」みたいな場合は、素直にそれぞれ指定するしかないですね。

相対値の使用例

em、%

emも%も使い勝手は大体同じ印象。

相対値で一番厄介なのが、継承された子要素を更に大小する場合。

親要素=100%

  • 子要素=親要素の80%
    • 孫要素=子要素の100%

こういうケースで、孫要素のサイズを親要素のサイズに戻したい場合どうするか。

ul {
	font-size: 80%
}
ul ul {
	font-size: 125%
}

「100% / 80%=125%」

こういう縮尺が出てきて、中にはキリの悪い数字も出てきます。

これがあちこちで発生すると非常に面倒ですが、ここで短気を起こしてpxを使うくらいなら全部pxで統一した方がいいし。

また、「コレナニ?」の代わりに「一回り大きく」「バランス良く」など主観的な指定をされることが多くなると思います。

「一回り大きくしました。」「大きすぎます!」「変わってません!」など不毛なやり取りは避けられないですね。

rem

最近浸透し始めたので知名度が低く、「コレナニ?」が起きます。

ちょっと前(2018年ころ?)まで非対応ブラウザがあったのですが、もう今は無いでしょう。

フォントサイズの書き方を検索すると、rem推しの記事が多いですね。

後述の「親要素を継承してワケが分からなくなる」といったことが起きにくいです。

/* ---------- ベースサイズ ---------- */
html	{
	font-size: 5.46875%;
}
body	{
	font-size: 16rem;
}
h2	{
	font-size: 28rem;
}
@media only screen and (min-width: 769px)	{
	html	{
		font-size: 6.25%;
	}
}

基準値の計算

まず、pxとremを同じ感覚で書けるようにするため、1px = 1remになるようにします。
6.25% = 100 / 16 / 10

スマートフォンなどでも同じ比率を保つため、基準値を変えます。
14 / 16 = 87.5%
5.46875% = 6.25% * 87.5%

こうしておくと、

  • pc時 ⇒ h2 = 28rem = 28px
  • スマートフォン時 ⇒ 同じ比率で縮小

となります。

「コレナニ?」が起きた場合は、「pxと同じです。」と言いましょう。

基準値が気持ち悪い場合

以下でも同じ結果となります。

html	{
	font-size: 1px;
}
body	{
	font-size: 14rem;
}
@media only screen and (min-width: 769px)	{
	body	{
		font-size: 16rem;
	}
}

「font-size: 1px」、これだけ見るとかなり無茶な設定に見えますね。

クロームでおかしくなるかな?と思いましたが、現在のバージョンなら問題無し。Mac、iPhone、iPadもOKなようです。

iframeもヤバいかな?!とも一瞬思いましたが、そもそもiframeは表示先のCSSでは制御されませんね。昔、制御しようとして苦労したのを思い出しました。

remの使用範囲

remは長さ/幅の指定にも使えますが、何らかの事情でpx指定に戻したりする場合、一括変換できないですね。
remを使うのはフォントサイズだけ、固定値ならpx、フォントサイズに合わせた余白とかならem、あたりにしておけば変換が楽です。

remでサイズ指定した要素の中身

remで指定した要素の子要素を指定する場合、もちろんremでもいいのですが、
「見出し中のスラッグは見出しの半分」などの場合、h1からh6まで個別に指定する必要があり、

  • h1 .slug ⇒ 16rem
  • h2 .slug ⇒ 14rem

面倒なので、remで指定した要素の中身は%かemを使っておくといいですね。

  • .slug ⇒ 0.5em、50%

この辺の使い分けでメンテナンス性が大きく変わると思います。

継承してややこしくなるのを軽減

以下はremを使えば関係ない話。

大まかなブロックはpxで指定し、p、h1~、など最下要素近辺だけ%指定する。

#main {
	font-size: 14px
}
#sidebar	{
	font-size: 12px
}
#footer	{
	font-size: 12px
}
@media (min-width: 769px)	{
	#main {
		font-size: 16px
	}
	#sidebar	{
		font-size: 14px
	}
	#footer	{
		font-size: 12px
	}
}

あとは、h1~h6、span各種、table・blockquoteとその中身、before、after等の疑似要素、アーカイブのarticle、フォームなどを各々調整。

「%」を使う場合の換算表

良く使いそうなサイズだけ換算表にしてみました。

  • 親要素 = 最上段(12px ~ 18px)
  • 比率 = 表示したいサイズ(px)/ 16px

他のサイズを基準にすると端数が半端ないです。やはりブラウザデフォルトの16pxが良いようで。

  • 親要素が16pxの時、100% = 16px
  • 親要素が16pxの時、450% = 換算72px
  • 親要素が12pxの時、450% = 換算54px
  • 親要素が14pxで、表示を56pxにしたければ、fons-sizeは400%

という感じです。

12141618比率
54637281450.0%
48566472400.0%
42495663350%
36424854300.0%
30354045250.0%
2731.53640.5225.0%
24283236200.0%
2124.52831.5175.0%
19.522.752629.25162.5%
18212427150.0%
16.519.252224.75137.5%
1517.52022.5125.0%
13.515.751820.25112.5%
12141618100.0%
10.512.251415.7587.5%
910.51213.575.0%
7.58.751011.2562.5%

 

表にしてみて改めて思ったのは、

「remでいいじゃん。」

でした。