マンガでわかるホームページ作成

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

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

というあなたへ、CSSでボタンのサイズを指定・変更する方法を解説します。

htmlだけのボタン





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

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

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

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

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

結論:widthとpadding

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

widthだけだとボタン内の文字が線にピッタリくっついて読みづらいため「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やbackgroundについて詳しくはこちら↓

「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」で範囲を指定する。

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

関連記事