ホームへ

【CSS】h1やthの太字を解除する方法

h1~h6は見出しタグ、thは表の見出しタグで、これらはデフォルトで太字になっています。

「でも太字はカッコ悪い!普通の太さにしたい!」

h1やthの太字を解除する方法を解説します。

【結論】font-weight:normal

「font-weight:normal」を指定すると太字ではない通常の太さになります。

h1の太字解除

h1{
    font-weight: normal;
}

thの太字解除

th{
    font-weight: normal;
}

font-weightは文字の太さを指定するCSSです。

font-weight:boldを指定すると太字になり、

font-weight:normalを指定すると普通の太さになります。

h1やthにはデフォルトで「font-weight:bold」が指定されているため太字になっていますが、「font-weight:normal」を上書きで指定することで通常の太さにできるというわけです。

なお、ここではh1を指定していますが、同様の方法でh2,h3,h4,h5,h6も太字を解除できます。

font-weight:normalが効かないとき

strongタグ、bタグが入っていないか

h1にfont-weight:normalを指定しても、太字にするhtmlタグであるstrongタグ、またはbタグで囲まれていると太字になってしまいます。

<h1><b>見出しテキスト</b></h1>

このstrongタグ、bタグを削除すれば太字を解除できます。

その他 CSSの優先度やミスなど

他でfont-weight:boldを指定していてCSSの優先度が負けていると効きません。

あるはスペルミスなどでも効かなくなります。

原因は多岐にわたるため下記記事を参考に見直してみてください。

【まとめ】h1やthの太字を解除する方法

h1やthにfont-weight:normalを指定する

bタグやstrongタグがある場合は消す

以上、h1やthの太字を解除する方法でした。

マンガで読める関連記事