Webサイト作成において、必ず1つ以上は必要になると言っても過言ではないのが、HTMLでのボタン作成です。
本記事では、HTMLでのボタン作成方法について、初心者プログラマー向けにサンプルコードを掲載しながら紹介していきたいと思います。
目次
HTMLでのボタン作成方法は大きく3つ
HTMLでボタンを作成する方法としては、大きく3つの方法が利用可能です。
- HTMLとCSSでボタンを作成
- HTMLのボタンタグを使用
- HTMLのinputタグでフォーム用ボタンを実装
HTMLとCSSでボタンを作成
HTMLとCSSでボタンを作成する方法は、複数のタグでボタンを実装することが可能です。
また、CSSでいくらでもデザインの自由が効くため、汎用的なボタンを作成したい場合に利用します。
HTMLのボタンタグを使用
HTML5からは「button」タグが利用可能になりました。
buttonタグでは、デフォルトで既にボタンとして表示されるようなデザインとなっているため、簡単にWebサイト上にボタンを配置することが可能です。
ただし、自分好みのボタンデザインを作成したい場合には、buttonタグに元々設定されたデザインを上書きするように作る必要があるため、少し手間が多くなります。
HTMLのinputタグでフォーム用ボタンを実装
HTMLの「ログインフォーム」や「送信フォーム」といったフォーム内では、「input」タグを利用してボタンを実装する方法が一般的です。
フォーム内で「inputタグ」でボタンを作成した場合、Javascriptで別途送信用の処理を記述する必要がなく、簡単にデータ送信を行うことが可能です。
HTMLとCSSでボタンを作成しよう
HTMLとCSSでボタンを作成する場合、「aタグ」を利用する方法が一般的です。
サンプルコードで確認してみましょう。
サンプルコード
サンプルコードでは、「aタグ」要素をCSSでボタンに見えるよう装飾しています。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Button Sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="sample.html" class="btn">ボタン</a> </body> </html>
style.css
.btn {
border-radius: 5px;
background-color: lightblue;
padding: 10px;
text-decoration: none;
color: white;
}
Webブラウザで表示したのが下記の画像です。
最低限のコードでボタンを作成すると、サンプルのような形になります。
「aタグ」で作成しているため、ボタンがクリックされると「href」属性に指定したURLに画面遷移します。
サンプルコードを解説
CSSでのボタン作成でいくつかのポイントを解説していきます。
ボタン風に見せるコード
aタグはデフォルト状態だと囲み枠は表示されませんが、「border-radius」プロパティを利用することで丸みを帯びた囲み枠を表現しています。
ただし、ボタンとして枠線は不要なため、囲み枠を表示するような設定にはしていません。
背景色を設定した状態で、枠に丸みを持たせることで、ボタンのように表現しています。
また、「padding」プロパティでテキストと枠の幅を持たせることで、ボタンサイズを調整しています。
デフォルトの文字色と下線を修正
aタグはデフォルトの状態では、リンクとして判断しやすいように青色のテキストと下線が表示されてしまいます。
まず下線を消すために「text-decoration」プロパティを「none」に設定します。
さらに、文字色を変更するために「color」プロパティで「white」を指定しました。
HTMLのボタンタグを使ってみよう
次にHTML5より利用可能な「button」タグを使用してみましょう。
CSSを利用しない場合のサンプル
CSSで一切装飾をせず、「button」タグを表示します。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Button Sample</title> </head> <body> <button>ボタン</button> </body> </html>
Webブラウザで表示すると下記の画像の通りとなります。
CSSを利用した場合のサンプル
次に上述した「aタグ」で作成したボタンと同じCSSを適用してみたいと思います。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Button Sample</title> </head> <body> <button class="btn">ボタン</button> </body> </html>
style.css
.btn {
border-radius: 5px;
background-color: lightblue;
padding: 10px;
text-decoration: none;
color: white;
}
Webブラウザ上で表示した結果が下記の通りです。
ほとんど同じように見えますが、枠線に影のようなものが表示されており、厳密には若干異なることをご確認頂けるかと思います。
HTMLのフォーム用ボタンを実装してみよう
HTMLのフォーム送信用ボタンとしては、「input」タグを利用する方法が一般的です。
まずはCSSを使用せず、デフォルト状態の表示を確認してみましょう。
CSSを使用しないフォームボタン
CSSでデザインを施さない場合、「button」タグとは少し異なるシンプルなボタンが表示されます。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Button Sample</title>
</head>
<body>
<form>
<input type="submit" value="ボタン">
</form>
</body>
</html>
Webブラウザ上で表示した結果が下記の通りです。
「button」タグで作成した時よりも、少し小さいシンプルなボタンが表示されています。
CSSで装飾したフォームボタン
「a(アンカー)」タグと「button」タグに適用したCSSを、「input」タグで作成したボタンにも適用してみましょう。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Button Sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<input type="submit" value="ボタン" class="btn">
</form>
</body>
</html>
style.css
.btn {
border-radius: 5px;
background-color: lightblue;
padding: 10px;
text-decoration: none;
color: white;
}
Webブラウザで表示した結果が下記の通りです。
さいごに：HTMLでのボタン作成は最頻出処理の1つ
本記事では、HTMLでのボタン作成方法を3つの種類でご紹介してきました。
一般的に「a(アンカー)」タグと「button」タグでフォーム以外のボタン処理、「input」タグのボタンでフォーム送信処理が実装されます。
必ず決められたタグでボタンを作成しないといけないというようなルールはないため、自身のプログラムで利用しやすいタグを使ってボタン処理を実装しましょう。
