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

2022年05月02日

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も太字を解除できます。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

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

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

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

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

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

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

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

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。