ホームへ

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

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

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

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

【結論】font-weight:bold

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



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タグの位置が重要です。




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タグで囲う
→ただし、効かない場合あり

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

マンガで読める関連記事