HTML｜buttonの使い方【初心者に向けて基本から解説！】
「Webページの中にボタンを作りたい！」
「buttonタグを使ってみたけれど、なかなかうまく使いこなすことができない！」
そんな風にお困りではないですか？
HTMLのbuttonタグを使えば、Webページ内に簡単にボタンを作成することができます。
しかしながら、inputタグとの違いが分かりづらかったり、思ったように動かなかったりと難しい一面も持っています。
この記事では、基本的なbuttonタグの使い方や指定できる属性を確認しながら一人でもbuttonタグを使いこなせるように解説していきます！
- buttonタグが持つ役割
- 同じような役割を持つタグとの使い分け方
- buttonタグに指定できる属性
- ボタンのデザインの変更方法
について知りたい方は、このまま読み進めてください！
エンジニアメンター
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
buttonタグが持つ役割は？
buttonタグには、webページ上にボタンを作る役割があります。
他のページに飛ばすためのボタンから、申し込みや問い合わせのフォームを送信するボタンまで幅広くボタンを作ることができます。
しかしながら、基本的にはブラウザからサーバーに送るためのボタンだと考えてください。
buttonタグを使うだけで、簡単にボタンを作ることができるのが特徴です。
実はwebページ上にボタンを作るためには、buttonタグを合わせて3つの方法があります。
buttonタグの基本的な使い方を知った上で、特徴と使い分けについてみていくことにしましょう。
- aタグを使って作るボタン
- buttonタグを使って作るボタン
- inputタグを使って作るボタン
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
buttonタグを使いこなせるようになろう！
では早速、buttonタグの使い方をみていくことにしましょう。
使い方は簡単で、ボタンを作りたいところにこのコードを挿入するだけです。
<button type="属性" name="名前" value="値">
<font>ボタンに入れたい文字</font>
</button>実際に、表示されるのは以下の通りです。
指定できる属性
buttonタグに指定できる属性を解説していきます。
それぞれどんな役割を持っているのかを理解しておくことにしましょう。
1. type
type属性はボタンの種類を指定する際に使用します。
type属性の値には、以下の３種類のいずれかを指定することができます。 初期値はtype=”submit”です。
- type=”submit” ：フォーム入力内容を送信するサブミットボタン（初期値）
- type=”reset” ：フォーム入力内容をリセットするリセットボタン
- type=”button” ：何もしない汎用的な押しボタン
2. form
form属性は、どのフォームと関連付けるかを指定する際に使用します。
<button>は初期値では直近の親要素となる<form>と関連付けられます。
しかしながら、<form>のid属性の値と<button>のform属性の値を一致させることで、 ボタンを特定のフォームと関連付けることができます。
ボタンを任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。
3. name
name属性は、<button>に名前を付ける際に使用します。
スクリプトで操作する際などに必要となる<button>のコントロール名です。
4. disabled
disabled属性は、ボタンを無効にする際に使用します。
disabled属性が指定されていると、ボタンを押せなくなりデータは送信されません。
5. autofocus(HTML5)
autofocus属性は、ボタンへの自動フォーカスを指定する際に使用します。
6．value
value属性は、<button>自身の値を指定する際に使用します。
例えば、<input>などの入力部品が無くても、 <button>の値を送信して何らかのフラグにすることができます。
7. formtarget(submitのみ）(HTML5)
formtarget属性（フォーム送信するターゲット先）は、 <form>の属性でも同様の指定をすることができます。
しかしながら、<button>側でこれらの属性を指定すると、<form>の指定より優先されます。
その他、formaction属性（送信先URL）、formenctype属性（送信するデータの形式）、formmethod属性（送信方法）
formnovalidate属性がありますが、これらはtype=”submit”の場合にのみ指定することができます。
同じような役割のタグとの使い分け方
webページ上にボタンを作るときに使う、３種類の方法についてみていきましょう。
違いと特徴を知ることによって、場合に適した方法を使うことができるようになります。
- aタグを使ってボタンを作る方法
- inputタグを使ってボタンを作る方法
- buttonタグを使ってボタンを作る方法
aタグ・inputタグとbuttonタグの違いをそれぞれ見ていきます。
aタグとbuttonタグでできるボタンの違い
aタグとbuttonタグでは作ることのできるボタンの種類がそもそも異なっています。
aタグを使う場合は、リンクの遷移など汎用ボタンを作るときです。
汎用ボタンとは、ボタンがクリックされた時の動作が決まっていないボタンのことを指します。
そもそもaタグのaは「Anchor（アンカー）」の略で、リンクの出発点や到達点を指定するという意味を持っています。
そのまま使えばリンクしかないaタグにCSSで装飾をつけることで、ボタンとして表示させることができます。
一方でbuttonタグは、ブラウザからサーバーにデータを送信する役割を持っています。
webページ上ではボタンとして、同じように扱われがちですが、役割が異なることを覚えておいてください。
aタグについてもっと知りたい方はこちらの記事を読んでみてください。
実際のコードの書き方までを知ることができます。
非公開: 【HTML初心者入門】aタグとは何？使い方も解説！
inputタグとbuttonタグでできるボタンの違い
inputタグとbuttonタグの違いは「閉じタグ」があるかどうかです。
buttonタグは<button></button>とセットで使うのに対して、inputタグは<input type=”button”>のように閉じタグなしで使います。
そのため、buttonタグでは擬似要素を使うことが可能ですが、inputタグでは使うことができません。
それによってデザイン性の幅が大きく異なってくることがこの２つの違いです。
擬似要素とは
HTMLではなく、CSS上で要素のようなものを作ることができます。
この”要素のようなもの”を擬似要素と言います。
HTMLのタグ名やクラス名・id名の後に「::before」や「::after」をつけたものに対して、contentで文字や記号を指定することで使うことができます。
実際にコードで見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>ボタン作成について</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<p>こんにちは</p>
</body>
</html>p:before{
content:'DMM WEBCAMP MEDIAをご覧の皆さん';
color: blue;
}これによって、HTML上にはなかった文字を足すことができます。
ぞれぞれのボタンの持つ役割や違いを知った上で上手く使い分けるようにしましょう。
【HTML input】inputタグとは？使い方を基礎から徹底解説
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
ボタンのデザインを変更するには？
基本の使い方がわかったところで、デザインを変更していく方法を確認してみましょう。
基本的には、CSSで背景色や文字色を変えていくため、CSSの基本がわかっていればデザインの変更は簡単です。
<!DOCTYPE html>
<html>
<head>
<title>ボタン作成について</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<button type="submit" class="button1" value="b1">
<font>送信</font>
</button>
</body>
</html>
この記事では5つのデザイン変更について解説するので、知りたいところから確認することをお勧めします。
- 背景色の変更
- 余白の変更
- 枠線を消す
- オンマウス時だけ色を変更する
- 角を丸くする
❶背景色の変更
分かりやすいように文字色も変更しています。
background-colorを指定することで、背景色の変更が可能です。
.button1{
background-color: #174a5c;
color:white;
}
❷余白の変更
paddingを指定することで、ボタン内部に余白を設けることができます。
.button1{
padding:30px;
}
paddinngやmarginの指定方法について不安がある方は、この記事を読んでみてください。
paddingとmarginの違いから理解することができます。
CSS【paddingとmarginの使い分け】余白の作り方を徹底解説！
❸枠線を消す
デフォルトでは枠線が引かれているので、それをなくす場合border-styleをnoneに指定します。
分かりやすくするために、背景色を変更しています。
.button1{
border-style: none;
background-color: #174a5c;
color: white;
}
❹オンマウス時だけ色を変更する
カーソルが上にある場合のみ色を変更する方法です。
この場合は、cssに擬似クラス「hover」を追加します。
.button1{
background-color: #174a5c;
color: white;
}
.button1:hover{
background-color: orange;
color:white;
}通常時
オンマウス時
❺角を丸くする
角を丸くするときのコードは難しいので、そのままコピペで使うことをお勧めします。
.button1{
background-color: #174a5c;
color: white;
border-style: none;
/* 角丸の指定 */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
主なデザインの変更点については以上ですが、自分の作りたいイメージがある方はどんどん検索して試してみましょう。
ボタンだけではなく、webページ全体のCSSでの装飾についてを学ぶことができます。
まとめ
webページにボタンを作成する場合に使うbuttonタグについて解説してきました。
ボタンを作成する場合にはaタグやinputタグを用いることもできますが、時と場合に合わせて使うものを変更するようにしてください。
デザインについてもご紹介しているので、イメージに合わせて作り変えてみてください！
【初心者向け】HTMLの練習ができる学習サイト8選！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
