【html/CSS】ボタンを太字にする方法

「ボタンを目立たせるために太字にしたい！」

「buttonタグにbタグが効かないけどどうすればいいの？」

ボタンを太字にする方法を解説します。

【結論】font-weight:bold

CSSのfont-weight:boldを指定するとボタンを太字にできます。

buttonタグ

aタグ

<style>
.example{
    font-weight: bold;
}
</style>
<button class="example">buttonタグ</button><br>
<input type="button" value="inputタグ button" class="example"><br>
<a href="#" class="example">aタグ</a>

font-weight:boldは文字を太字にするCSSです。

ボタンに限らずどのテキストでも太字にできます。

【htmlのみ】bタグ

bタグで囲っても太字にすることができます。ただし、効くものと効かないものがあります。bタグの位置が重要です。

buttonタグ（bタグは外側）(効かない)
buttonタグ（bタグは内側）

aタグ（bタグは外側）
aタグ（bタグは内側）

<b><button>buttonタグ（bタグは外側）(効かない)</button></b><br>
<button><b>buttonタグ（bタグは内側）</b></button><br>
<b><input type="button" value="inputタグ button(効かない)"></b><br>
<b><a href="#">aタグ（bタグは外側）</a></b><br>
<a href="#"><b>aタグ（bタグは内側）</b></a>

aタグはbタグの位置が外側でも内側でも太字になります。

buttonタグはbタグが外側だと太字になりません。内側だと効きます。

inputはbタグでは太字になりません。bタグを内側にすることもできません。

【まとめ】ボタンを太字にする方法

CSSのfont-weight:boldを指定する

bタグで囲う
→ただし、効かない場合あり

以上、ボタンを太字にする方法でした。