HOME
本記事は執筆時点（2020年12月06日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
button要素とは？
button要素はクリック可能なボタンを設置できる要素です。タグを記述するだけで自動的にデザインされたボタン（ブラウザごとにデザインは異なります）が表示できます。用途は様々ですが、主にWebサイトの入力フォームの送信ボタンなどに利用されます。
button要素の例
button要素の書き方
button要素は開始タグと閉じタグの中に、表示させたいテキストや画像・アイコンを記述して表示させます。
HTML
<button type="button">送信</button> <button type="button"><img src="sample_icon.png" alt="アイコンのサンプル">送信</button> <button type="button">送信<i class="fas fa-angle-double-right"></i></button>
プレビュー
type属性の種類と使い分け
button要素を正しく使用するためにはtype属性を設定する必要があります。
使用するボタンの用途を次の3種類の内から選択してtype属性で指定します。
- submit
- reset
- button
送信【type="submit"】
type属性に「submit」を指定するとフォームの入力内容の送信を実行させることができます。
なお、type属性を指定しない（省略する）と自動的にsubmitになります。
HTML
<form>
Email:<input type="email"><br>
TEL:<input type="tel"><br>
<button type="submit">送信</button>
</form>
プレビュー
リセット【type="reset"】
type属性に「reset」を指定するとフォームの入力内容を空にリセットさせることができます。
HTML
<form>
Email:<input type="email"><br>
TEL:<input type="tel"><br>
<button type="reset">リセット</button>
</form>
プレビュー
ボタン【type="button"】
前述の通り、type属性を指定しないと自動的にsubmitになってしまいますので、form内に送信ボタン以外の複数のボタンを設置したときに意図せず送信が実行されてしまうことになります。
そのような場合にはtype属性に「button」を指定すれば機能を持たないボタンを作成できます。
HTML
<form>
Email:<input type="email"><br>
TEL:<input type="tel"><br>
<button type="button">ただのボタン</button>
</form>
プレビュー
formタグの外に記述して使用する
submitとresetは、formタグの中に記述しないと機能しないので注意が必要です。
これは、buttonをformに紐づけることができなくなってしまうためです。
HTML
<form>
Email:<input type="email"><br>
TEL:<input type="tel"><br>
</form>
<button type="reset">リセット</button>
正しく機能しない例
もしformタグの外にbuttonを設置したい場合は、まずform側に任意のIDを付与し、次にbutton側のform属性でIDを指定することで両者を紐づけることができます。
HTML
<form id="myForm">←IDを付与
Email:<input type="email"><br>
TEL:<input type="tel"><br>
</form>
<button type="reset" form="myForm">リセット</button>←form属性で紐づけ
プレビュー
inputのボタンとbuttonタグの違い
HTMLでフォームを作成する際に使用するinput要素の「input="button"」や「input="submit"」がでもbutton要素とまったく同じ機能と見た目のボタンを作成することができます。
HTML
<form id="myForm">
Email:<input type="email"><br>
TEL:<input type="tel"><br>
<input type="submit" value="送信">
</form>
inputタグによる送信ボタン
ボタンを作る際にはどちらのタグを使っても問題はありません。用途が重複しているタグが存在する理由は、昔からあるinput要素に対して、buttonタグは後から新しく追加された比較的新しい要素であるためです。
buttonタグは疑似要素が使用できる
button要素には閉じタグが存在するため、画像を子要素にしたり、疑似要素が利用できるという点が大きな違いです。
CSSの疑似要素について詳しい説明はこちらのページをご覧ください。
CSSの疑似要素・疑似クラスの種類と使い方
疑似要素・疑似クラスは、どちらも元となる（基準となる）要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です。どちらもHTMLのソースコードには追加の記述やマークアップの必要がなく...【もっと読む】
buttonを無効化させる【disabled属性】
Webサイトにおいてボタンを設置する際には、条件によってクリックできないようにしたい場合もあります。
buttonタグでは、disabled属性を設定するとボタンの色が変わり、クリックできないようにすることが可能です。
Javascriptを使ってユーザーの行動に応じて動的にボタンを無効化させるといった利用方法がよく用いられます。
HTML
<button disabled>送信</button>
プレビュー
リンクを設定して遷移させる【onclick属性】
onclick属性を使うと、ユーザーがボタンをクリックしたときに任意の処理を実行させるように設定できます。
これを利用すれば、「ボタンをクリックしたら特定のURLへ遷移させる」というリンク付きボタンを作ることが可能です。
次のようにlocation.hrefでリンク先のURLを指定します。
HTML
<button onclick='location.href="リンク先のURL"'>開く</button>
プレビュー
リンクにはaタグを使用するのが一般的です。aタグの場合、ボタンの形状にするにはCSSを使わなくてはなりませんが、buttonタグにおいてもデフォルトで使用することは少ないため、CSSのスタイル調整にかかる手間は同じです。リンクの設置にあえてbuttonタグを用いる必要はないと言えるでしょう。
CSSでデザインをカスタマイズする
button要素にはブラウザのデフォルトのスタイルが適用されるので、ボタンの見た目はブラウザごとに異なります。
オリジナルのボタンデザインにしたり、ブラウザが異なっても統一されたデザインにするためにはCSSを編集します。
プレビュー
CSS
.button1{
display:block;
width:100%;
max-width: 250px;
padding:10px 0;
border:none;
font-weight:bold;
background:#d40000;
color:#fff;
font-size:1em;
}
.button2{
display:block;
width:100%;
max-width: 250px;
padding:10px 0;
border:none;
border-radius:50px;
font-weight:bold;
background:#0044dd;
color:#fff;
font-size:1em;
}
.button3{
display:block;
width:100%;
max-width: 250px;
padding:10px 0;
border:solid 2px #00dd44;
font-weight:bold;
background:transparent;
color:#00dd44;
font-size:1em;
}
.button4{
display:block;
width:100%;
max-width: 250px;
padding:10px 0;
border:outset 5px #333;
border-radius:50px;
font-weight:bold;
background:linear-gradient(-35deg,#333 0%,#666 60%,#fff 100%);
color:#fff;
font-size:1em;
}
.button5{
display:block;
width:100%;
max-width: 250px;
padding:10px 0;
border:outset 2px #dd4e02;
border-radius:5px;
font-weight:bold;
background:linear-gradient(-35deg,#dd4e02 0%,#dd4e02 60%,#fff 100%);
color:#fff;
font-size:1em;
box-shadow:3px 3px 3px #999;
}
button:hover{/*マウスオーバーされた時*/
cursor: pointer;
opacity:.8;
}
CSSについて詳しい説明はこちらのページをご覧ください。
CSS入門編-CSSの役割と使い方を解説
CSSで装飾したい対象のHTMLを「セレクタ」、装飾する項目を「プロパティ」と呼びます。プロパティに対して「値」を指定することで対象のHTMLの装飾を変更します。...【もっと読む】
まとめ
以上がHTMLのbutton要素の使い方です。
ボタンを作るときにbuttonタグとinputタグのどちらを使うべきか迷いますが、疑似要素が利用できるという点ではデザインの融通が効きやすくなるのでbutton要素の方が優位かもしれません。