ホームへ

【CSS】font-sizeが効かない、変わらない原因

CSSで文字サイズを変えるにはfont-sizeを使います。

font-sizeの使い方を間違えると効かないことがあります。

font-sizeを指定しても文字サイズが変わらない原因と対応方法を解説します。

【原因1】子孫要素のfont-sizeにpxが指定されているから

下記は親に「font-size: 200%」、子要素に「font-size: 16px」した例です。

テキスト

<p style="font-size: 200%">
    <span style="font-size: 16px">テキスト</span>
</p>

font-sizeは子孫要素に継承され、かけ算される特徴があります。

よって16pxの200%で32pxになりそうなものですが、16pxのままです。

子要素のfont-sizeにpxが指定されているとそちらが優先され、継承が無視されます。

文字サイズが変わらないときはfont-sizeにpxが指定されていないか確認しましょう。

逆に親に「font-size: 16px」、子要素に「font-size: 200%」を指定した場合は継承され32pxになります。

テキスト

<p style="font-size: 16px">
    <span style="font-size: 200%">テキスト</span>
</p>

【対処1】子要素のfont-sizeを上書きする

テキスト

<p style="font-size: 200%">
    <span style="font-size: 32px">テキスト</span>
</p>

px指定すると親のfont-sizeを継承しません。

計算した上でpx指定してしまいましょう。

【対処2】子要素のfont-sizeを%指定する

テキスト

<p style="font-size: 200%">
    <span style="font-size: 100%">テキスト</span>
</p>

%指定すると親のfont-sizeを継承します。

200%×100%で2倍になります。

【原因2】%やem指定なら親のfont-sizeにかけ算されるから

下記は親に「font-size: 50%」子に「font-size: 200%」を指定した例です。

元のフォントサイズの2倍にしたくて200%指定したのに、元のフォントサイズから変わっていません。

テキスト
テキスト

<p style="font-size: 50%">
    <span>テキスト</span><br>
    <span style="font-size: 200%">テキスト</span>
</p>

font-sizeを%やemで指定した場合、親のfont-sizeに対して相対的な文字サイズになります。

よって上記の場合「16px(初期値)×50%×200%=16px」という計算になっています。

【対処1】逆算する

元のフォントサイズの2倍つまり32pxにしたいということは、逆算すればfont-size: 400%を指定すればいいのです。

テキスト
テキスト

<p style="font-size: 50%">
    <span>テキスト</span><br>
    <span style="font-size: 400%">テキスト</span>
</p>

【対処2】px指定する

px指定すると親のfont-sizeに関わらず絶対指定となります。

テキスト
テキスト

<p style="font-size: 50%">
    <span>テキスト</span><br>
    <span style="font-size: 32px">テキスト</span>
</p>

ただし、px指定するとユーザー側で文字サイズを変えられない場合があるため、できるだけ%かemでも指定をおススメします。

その他 font-sizeが効かないとき

上記に当てはまらないのであればCSSの基本やスペルミスなども考えられます。

下記記事を参考にミスがないか見直してみてください。

【まとめ】font-sizeが効かない原因

文字サイズが変わらないときは子孫要素にfont-sizeが指定されていないか確認しましょう。

%やemなら親を基準の相対サイズに、pxなら親を無視して絶対サイズになります。

以上、font-sizeが効かない原因でした。

マンガで読める関連記事