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

スポンサーリンク

フォントサイズ指定方法

絶対的な指定方法

ピクセルで指定

「font-size:16px;」など

相対的な指定方法

em

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

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

rem

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

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

remの設定

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

:root{font-size:16px;}

指定競合の問題

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

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

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

サイト全体への指定

ルート(rem)を設定

:root{font-size:16px;}

本文要素

基本設定

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

.body{font-size:min(calc(0.9rem + 0.4vw),1.1rem) !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;}

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

頭がスッキリして

いいねいいね

タイトルとURLをコピーしました