HTMLのボタンサイズを変更する方法

2022.09.26
HTMLのボタンサイズを変更する方法

HTMLでボタンを作成すると、決まったサイズのボタンになります。
Webページの作成に慣れてくると、デザインによってボタンの大きさを変更したいことがあると思います。
この記事では、特にスマートフォンでも押しやすいボタンサイズを変更する方法を解説します。

HTMLのボタンはスマートフォンでは見づらい!?

HTMLで作成する基本のボタンは、スマートフォンやタブレットから閲覧すると、小さく見えてしまうことがあります。
例えば、以下のようなシンプルなHTMLでボタンを作成してみましょう。

ボタンを押してください
<button>ボタン<button>
ボタンの画像

ボタンが文字と同じくらいの大きさになっています。
スマートフォンやタブレットでは、指でボタンが隠れてしまい操作しづらいのではないかという心配があります。

ボタンのサイズを変更する

ボタンの大きさは、HTMLのみでは変更できません。
CSSを活用することで、自由にサイズを変更できます。

button {
  width: 10em;
  height:3em;
}

左がサイズを指定しない場合の大きさ、右がサイズを指定した場合の大きさです。

小さいボタンと大きいボタン

ちなみに「em」は フォントサイズを基準に指定する幅指定で、「○文字分開ける」といった指定をする場合に利用します。
例えばフォントサイズが15pxであれば、1em=15pxとなります。

ここでは、幅を10文字分、高さを3文字分と指定してボタンの周囲を大きくしています。

文字の長さによってボタンのサイズを変える方法

先ほどのコードでボタンのサイズは指定できますが、横幅が「10文字分」と指定されているため、ボタンのタイトルに長い文字を入れた時に文字がはみ出してしまいます。

ボタンから文字がはみ出してしまったイメージ
はみ出してしまった例

ボタンの横幅を可変としたい場合には、padding(パディング)を上手く指定することで調整可能です。

横に伸びる大きいボタンを作る

<style>
button.horizontal {
  padding-left: 1em;
  padding-right: 1em;
  height: 3em;
}
</style>
<button class="horizontal">とても長い文字をボタンに入れてしまった場合</button>
横に伸びる大きいボタン

「padding-left」で左余白、「padding-right」で右余白を指定しています。
余白を指定することで、文字列の長さに関わらずはみ出さないボタンを作成することができます。

縦に伸びる大きいボタンを作る

横幅を指定しないとデザインが崩れてしまうため、一定の長さでボタン文字列を改行したいこともありますね。
そういう場合は、横幅が決まっていて縦に伸びるボタンを作ることができます。

<style>
button.vertical {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  width: 8em;
}
</style>
<button class="vertical">とても長い文字をボタンに入れてしまった場合</button>
縦に伸びる大きいボタン

横幅を固定して「padding-top」と「padding-bottom」で上下の余白を指定すると、横幅に応じて改行されるボタンを作成することができます。

まとめ

ボタンのサイズを自由に調整する方法を紹介しました。

  • ボタンの大きさはCSSで調整する
  • ボタンのサイズを可変にしたい場合padding(パディング)を指定する
  • paddingは余白で、上下左右に設定が可能

CSSを活用することで、ボタンの大きさを調整したり、文字数が変わってもレイアウトが崩れたりしない綺麗なボタンを作成できますので、是非活用してみてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5