【CSS】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倍になります。

【対処3】rem指定する

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

emや%は親要素を基準にサイズを決める単位ですが、remはhtmlタグを基準にサイズを決める単位です。

つまりremで指定すると親要素の影響を受けなくなります。

そういう点ではpx指定と似ていますが、あくまで相対指定という点で異なります。

なお、htmlタグのデフォルトfont-sizeは16pxです。

htmlタグに「font-size:10px」を指定しておくとremの計算がカンタンになるメリットもあります。

【原因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でも指定をおススメします。

【対処3】rem指定する

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

emや%は親要素を基準にサイズを決める単位ですが、remはhtmlタグを基準にサイズを決める単位です。

つまりremで指定すると親要素の影響を受けなくなります。

そういう点ではpx指定と似ていますが、あくまで相対指定という点で異なります。

なお、htmlタグのデフォルトfont-sizeは16pxです。

htmlタグに「font-size:10px」を指定しておくとremの計算がカンタンになるメリットもあります。

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

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

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

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

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

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

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