【HTML】ボタンの作成方法＋サンプルコード付き（初心者向け）

こんにちは！
最近、WEB制作をはじめたけど「ボタンってどうやって作るの・・？」「ボタンに関する属性の意味って・・？」「コピペで簡単にボタンを作りたい・・？」 そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか？
ボタンはフォームの送信、ページ遷移などWEBの様々な場面で使用される重要な役割をになっています。
今回は、「bottonの基本知識」「bottonに必要な属性」「コピペで使える基本のボタンデザイン」を中心に解説していきます。

buttonタグ

buttonタグって？

フォームの送信、ページの遷移などWEBの様々な場面で使用され、ユーザーにより多くボタンを押してもらう（クリック率を上げる）にはボタンの使い方・デザインが大切になってきます。

buttonタグの使い方

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button" name="name" value="value">ボタン</button>

※解説
基本的なボタンの作成方法・各属性を説明していきます。

○buttonタグ

＜button＞タグを使用する事によって、WEB上にボタンを表示する事ができます。＜button＞〇〇＜/button＞の〇〇の中に、ボタンに表示させたい文字を記載します。今回の例では「ボタン」という文字を表示させています。

○type属性

type属性を指定し、ボタンの機能を決める事ができます。
指定できる属性は①submit②reset③buttonの3点です。
①submit→送信ボタンを作成できます。主に入力フォームなどボタンの値をプログラム側に渡したい時に使用します。

<button type="submit" name="name" value="value">ボタン</button>

②reset→リセットボタンを作成できます。入力フォームなどで入力した内容を消したい際などに使用します。

<button type="reset" name="name" value="value">ボタン</button>

③type=”button”→button自体には機能がなく、buttonを指定した場合は、機能を追加していきます。

<button type="button" name="name" value="value">ボタン</button>

type属性を変えてもボタンの表示は変わらず、機能のみが変わります。

○name属性

name属性は、ボタンに名前をつける事ができる属性です。

<button type="reset" name="maillist" value="value">送信</button>

名前をつけておく事で、このボタンがなにかを他の人にも分かりやすくする事ができます。今回は「maillist」メールリストのボタンという名前ををつけました。
必ず必要な属性ではないので、必要な場合に使用してください。

○value属性

プログラム側に値を渡す事ができる属性です。

<button type="reset" name="name" value="Aグループ">送信</button>

value=”Aグループ”と指定したことで、プログラム側に「Aグループ」という値を送信する事ができます。

その他属性（disabled・autofoucus）

○disabled属性

ボタンを無効化する事ができる属性です。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button">有効</button>
<button type="button" disabled>無効</button>

disabled属性を指定した「無効」ボタンが半透明になり無効化になります。

○autofocus属性

フォーカスを当てる事ができる属性です。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button">ボタンA</button>
<button type="button" autofocus>ボタンB</button>

autofocus属性を指定した「ボタンB」にフォーカスを当てる事ができています。

formの外側のボタンからの送信方法

buttonタグがフォームの外側にあっても、ボタンとひも付けをし送信をする事ができます。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<form id="himodoke">Aの項目</form>
<button type="submit" form="himoduke">Aの項目を送信ボタン</button>

＜form＞内にidタグ、＜button＞内にformタグを設置し、同じid名にする事で紐付けをする事ができます。今回は、「id=”himoduke”」「form=”himoduke”」でひも付けをする事ができます。

バリデーションを作成する

バリデーションとは、項目が空欄だと送信できなくなる制限です。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<form>
   <input type="text" required>
   <button type="submit">送信</button>
</form>

＜input＞に「required」属性を指定することで制限をかけることができます。入力項目が必須入力項目になり、空欄では送信する事ができなくなります。

aタグとbuttonタグの違い・ルール

○aタグとbuttonタグの違い

初心者の方は、aタグとの違いに戸惑うかもしれませんが、まずは下記のように使い分けてみてください。
●クリックで他ページにいきたい場合は「aタグ」
●フォームの送信、リセットの場合は「buttonタグ」

使い分けに明確なルールはありませんが、上記のやり方が多いと思います、詳しく知りたい方は、下記を参考にしてみてください。
　https://www.ameamelog.com/html-a-button/

○aタグルール

＜aタグ＞の中にbuttonタグを入れることはHTMLを定めるルール（W3C）で禁止されており、仕様にない書き方なので、バグを起こす可能性があります。
aタグの中に入れてはダメなタグとしては、buttonタグ意外にも、「select, a, input, textarea」があげられます。

基本的なボタンデザイン（サンプルコード付き）

ボタンはCSSで様々な装飾をする事ができます。
押しやすいボタン、押しにくいボタンでは、ボタンのクリック率に大きく差が出ます。webサイトにあったボタンをカスタマイズできるようになるために、今回はシンプルなボタンデザインを紹介・解説します、自分のwebサイトにコピペで貼り付けカスタマイズしてください。

基本的なボタン

最もシンプルなボタンを紹介させていただきます。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button" class="btn">ボタン</button>

CSSサンプルコード

.btn {
 padding: 10px 30px;
 background: blue;
 color: #ffffff;
}
 
 
.btn:hover {
 opacity: 0.7;
}

※解説
buttonにクラスを指定し、CSSで装飾します、今回は「btn」というクラスを追加
paddingでボタン内の幅を調整
backgroundでボタンの色を指定
colorで「ボタン」の文字色を指定
:hover擬似クラスに「opacity: 0.7」を指定し、ボタンの上にカーソルが乗ったら、ボタンを少し透明にして、目立たせるようにしています。

立体的なボタン（基本ボタンに影をつける）

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button" class="btn">ボタン</button>

CSSサンプルコード

.btn {
 padding: 10px 20px;
 background: yellow;
 color: #111111;
 border-bottom: solid 5px gray;
 border-radius: 4px;
}
.btn:active {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
 border-bottom: none;
}

※解説
.btn{}
・border-bottom: solid 5px gray;でボタンに影を作成
・border-radius: 4px;でボタンに丸みをつける

.btn:active{}　ボタンが押された時の動きを指定する。
・transform: translateY(5px);の指定で、ボタンが押される前より5px、Y方向に移動（下に沈みます）
・border-bottom: none;の指定で影を消す

まとめると「ボタンに影をつけておく→ボタンが押されたら影を消す」の指定をCSSで装飾しています。

立体的なボタン（丸み）

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button" class="btn">ボタン</button>

CSSサンプルコード

.btn {
 padding: 10px 20px;
 background: yellow;
 color: #111111;
 border-bottom: solid 5px gray;
 border-radius: 25px;
}
.btn:active {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
 border-bottom: none;
}

※解説
立体的なボタンに丸みを作る
1つ前に紹介した、立体ボタンにさらに丸みをプラスする。
「border-radius」の値を変更し丸みを追加、border-radiusに指定する値が大きくなればなるほど、丸みがプラスされます。
カスタマイズの参考にしてみてください。

丸型のボタン

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button" class="btn">ボタン</button>

CSSサンプルコード

.btn {
 background: blue;
 color: #ffffff;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 text-align: center;
 line-height: 100px;
 overflow: hidden;
}
 
.btn:hover {
 opacity: 0.7;
}

※解説
backgroundでボタンの色を指定
colorでボタンの文字色を指定
width:100px・height:100pxでボタンの大きさを作成
border-radius: 50%;を指定し円を作成
text-aligin: center;でボタンの文字を真ん中に寄せる
line-height: 100px;で文字の高さを真ん中に寄せる
0verflow:hidden;で要素ボックスからはみ出てしまった部分を隠す
:hover擬似クラスに「opacity: 0.7」を指定し、ボタンの上にカーソルが乗ったら、ボタンを少し透明にして、目立たせるようにしています。

丸型のボタン（立体）

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<button type="button" class="btn">ボタン</button>

CSSサンプルコード

.btn {
    background: #3399FF;
    color: #ffffff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    overflow: hidden;
    border-bottom: solid 5px #003399;
   }
    
   .btn:active {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    border-bottom: none;
   }

※解説
.btn{}
・border-bottomでボタンに影を作成

.btn:active{}　ボタンが押された時の動きを指定
・transform: translateY(5px);の指定で、ボタンが押される前より5px、Y方向に移動（下に沈みます）

・border-bottom: none;の指定で影を消す

まとめると「ボタンに影をつけておく→ボタンが押されたら影を消す」の指定をCSSで装飾しています。

まとめ

今回は、「bottonタグの基本知識」「bottonタグに必要な属性」「コピペで使える基本のボタンデザイン」を中心に解説しました。

最後にポイントをまとめます。

1.ボタンを作成するには＜button＞タグを使用する

2.type属性を指定し、ボタンの機能を決める事ができる。指定できる属性は①submit②reset③buttonの3点

3.aタグの中に＜button＞タグを入れることは禁止されており、buttonタグ意外にも、「select, a, input, textarea」があげられる

4.コピペで使える基本的なボタンデザインを紹介

いかがだったでしょうか？
押しやすいボタンかそうでないかでは、クリック率に大きく影響します。
これを機会にボタンの使い方を覚えていき、WEB制作に活かしていきましょう。