フォントサイズ指定方法の復習

目次(クリックでジャンプ)

フォントサイズ指定方法

ピクセルで指定

「font-size:16px;」など

直接の親要素のフォントサイズを基準にする。

「font-size:0.9em;」～親要素のフォントサイズの0.9倍の大きさにする

rootつまりhtml自体に設定されたフォントサイズを基準にする。

「font-size:0.9rem;」～htmlのフォントサイズの0.9倍の大きさにする

CSSでhtmlのフォントサイズを設定するには疑似要素「:root」で絶対指定で行う。

:root{font-size:16px;}

WordPressの場合、テーマ側でフォントを設定する場合がある。

例えば「Cocoon」の場合、テーマ側の設定画面で指定したフォントがbody{}のフォントサイズとして優先設定されるので、body以下の要素をem指定すると影響を受ける可能性がある。

これを排除するには、子テーマのCSSでbody{font-size:16px !important;}のように重要指定する。

:root{font-size:16px;}

記事本文を含むできるだけ最上位要素(bodyなど)のフォントサイズをスクリーン幅で調整する1次関数にremを組み込んで指定する。

.body{font-size:min(calc(0.9rem + 0.4vw),1.1rem) !important;}

上の例はwpテーマ「cocoon」のデフォルト設定を打ち消すために「!important」を付けている

記事の段落(p)や見出し(h1,h2…)や追加要素は基本的に全て「em」で指定することで全体に秩序だって大きさをコントロールできる。

フォントサイズの調整を通常と大きく変えたいボックスやインボックスなど特有の1次関数を設定したい場合は、rem指定で設定する

.XXX-ibx{font-size:min(calc(0.7rem + 0.6vw),1.1rem);}

(大画面では通常より大きめになる1次関数の例)

今まではボックス内の文字の大きさを指定するのに、ボックス本体のCSSに直接font-sizeを指定しても、

ボックス内で自動で付与される<p>段落には適用されないので、ボックス下の<p>にfont-sizeを指定していた。

Tst-box{font-size:1.2em;}
Tst-box p{font-size:1.2em;}

という具合。

これだとボックスによってはfont-sizeが二重に適用されて大きさが異なったりしていた。

そこで、

<p>の方の指定を「inherit」にしてみる。

Tst-box{font-size:1.2em;}
Tst-box p{font-size:inherit;}

これで大きさがきちんと統一された。

いいねいいね