html・CSSでボタンの文字サイズを変更する方法

フォームなどを作るとボタンを設置することがあります。

このボタンを押しやすく、目立たせるために文字サイズを大きくしたいことがあります。

html・CSSでボタンの文字サイズを変更する方法を解説します。

inputの文字サイズを変更するにはこちら↓

【結論】font-size

ボタンに限らず、テキストの文字サイズはCSSの「font-size」で指定できます。

ボタン

<style>
.example{
    font-size: 200%;
}
</style>
<button class="example">ボタン</button>
<input type="button" value="ボタン" class="example">

font-sizeのあとには数値と単位を指定します。

単位はpx,%,emなどがあります。

pxを指定すると文字サイズを固定できます。アクセシビリティの観点から固定は非推奨です。デフォルトは16pxです。

%は親の文字サイズを100%として、割合で文字サイズを変更できます。
50%なら半分、200％なら2倍の大きさです。

emは親の文字サイズを1emとして、割合で文字サイズを変更できます。
0.5emなら半分、2emなら2倍の大きさです。

remはhtmlタグの文字サイズを1remとして、割合で文字サイズを変更できます。

親要素に影響されずかつ相対指定できるメリットがあります。

【非推奨】fontタグのsize属性

CSSを使わずhtmlだけでもfontタグのsize属性を指定することで文字サイズを大きくすることができます。

ボタン

<button><font size="+3">ボタン</font></button>
<font size="+3"><input type="button" value="ボタン"></font>

ただし、fontタグもsize属性もhtml5から非推奨になっています。

CSSでできることはCSSでやることになったためです。

しかもボタンにCSSでfont-sizeが%指定されているという条件付きです。

よってここでは詳しく解説しません。

CSSのfont-sizeを覚えていってくださいね。

【まとめ】ボタンの文字サイズを変更する方法

CSSの「font-size」を指定する。

font-size: 200%

以上、html・CSSでボタンの文字サイズを変更する方法でした。