html･CSSでボタンのサイズ･大きさを変更する方法

「htmlのsubmitボタンやbuttonタグのボタンそのままだと押しづらいからボタンのサイズを変更したい」

というあなたへ、html･CSSでボタンのサイズ･大きさを変更する方法を解説します。

下記関連記事も参考にしてください。

htmlだけのボタン

buttonタグ　ボタン

<input type="button" value="input buttonボタン"><br><br>
<input type="submit" value="input submitボタン"><br><br>
<button>buttonタグ　ボタン</button>

こちらはCSSで調節していない状態のhtmlボタンです。

htmlのボタンには主に上記3種類のボタンがあります。

ボタンのサイズを変更する方法はどのボタンでも基本的に同じですので、代表してinput submitボタンで説明します。

htmlだけではボタンのサイズを変えられない

inputタグにはsize属性がありますが、type="text"などの入力時に文字数の指定として使えるものであり、ボタンの横幅を変えることはできません。

下記で解説するCSSの方法でサイズを変えましょう。

CSSでボタンのサイズを指定・変更する方法

ボタンに限らず横幅のサイズを変更するCSSは「width」です。

widthだけだとボタン内の文字が線にピッタリくっついて読みづらいため「padding」で余白を調整します。

paddingは左右はもちろん上下の調整もできます。

heightを指定するよりpaddingで上下を調整するのがオススメです。

widthやpaddingについて詳しくはこちら↓

ボタンのサイズを固定する場合

<style>
.example{
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #68779a;
    background: #cbe8fa;
    cursor: pointer;
}
</style>
<input type="submit" value="ボタン" class="example">

サイズを固定する場合は数値をpxで指定します。

スマホのことを考えるとwidthが300px以内がいいでしょう。

paddingは10px～20px程度だと文字が見やすいでしょう。

「box-sizing: border-box」はpaddingとborderをwidthに含めるCSSです。必須ではありませんが、調整が楽になります。

box-sizing: border-boxについて詳しくはこちら↓

あとはborderやbackgroundで色を整えましょう。

borderについて詳しくはこちら↓

「cursor: pointer」はマウスを乗せたとき指アイコンに変化させるCSSです。

aタグは自然と変化するのですが、inputやbuttonだと矢印のままです。

これだと押せるかんじじゃないので「cursor: pointer」を指定して押せるかんじをだしましょう。（もちろんスマホでは変化ありません。）

ボタンのサイズを可変にする場合

レスポンシブ対応でボタンのサイズを可変にしたいことありますよね。

ブラウザの幅を変えてみてください。下のボタンのサイズが変わります。

<style>
.example2{
    width: 50%;
    min-width: 200px;
    max-width: 600px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #68779a;
    background: #cbe8fa;
    cursor: pointer;
}
</style>
<input type="submit" value="ボタン" class="example2">

可変のボタンを作る場合widthは%で指定します。

これは親のサイズに対して何％の横幅になるか、ということです。

「width:50%」だと親の幅の半分サイズです。

さて、これだけではボタンが大きくなりすぎたり小さくなりすぎたりしてしまいます。

そうならないように「min-width」と「max-width」を指定しています。

min-widthは最小の横幅、max-widthは最大の横幅です。

上記の指定の場合はwidthが200px～600pxの間を可変します。

「min-width」と「max-width」は必須ではありませんし、片方だけの指定もありです。

paddingも%指定可能ですが、ボタン内の文字に対する余白を意識すればいいのでpx指定でも問題ないでしょう。

気になるならemで指定するといいでしょう。文字サイズに対する比率になります。

emや%など長さの単位がよくわからない場合はこちら↓

まとめ

• CSSでボタンのサイズを変更するにはwidthとpaddingを指定する。
• ボタンのサイズを固定する場合はpx指定する。
• ボタンのサイズを可変にする場合は%指定し「min-width」と「max-width」で範囲を指定する。

以上、html･CSSでボタンのサイズ･大きさを変更する方法でした。