「buttonタグってどうやって使うの」や「ボタンのカスタマイズ方法を知りたい」と悩んでいませんか?
ここでは、buttonタグの基本的な使い方を、分かりやすく解説します。
buttonタグは、ホームページで使うボタンを作るためのHTMLタグです。
フォームの送信ボタンやクリックして動作するボタンなど、いろいろな用途で使われます。
ここでは、buttonタグの基本的な使い方からデザイン方法まで、分かりやすくお伝えするので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- buttonタグの基本知識
- buttonタグの属性とオプション
- buttonタグのデザインとカスタマイズ方法
- ボタンをクリックしたときの動きの設定方法
- buttonタグとinputタグの違い
- 【まとめ】buttonタグとは
|
buttonタグの基本知識
まずは、buttonタグの基本知識から、お伝えします。
buttonタグとは
buttonタグは、ホームページでボタンを作るためのタグです。
buttonタグの使い方
buttonタグは、下記のように使います。
buttonタグで文字を囲むことで、ボタンを表示することができます。
■ <button> タグの記述例
<button>ホームページに掲載する文章</button>
|
■ ホームページ上の表示
buttonタグの属性とオプション
buttonタグには、いくつかの属性(オプション)があります。
これらの属性を使うことで、ボタンの動きや見た目を変えることができます。
ここでは、buttonタグの属性とオプションについて、お伝えします。
type属性
type属性は、ボタンの種類を決めるものです。
buttonタグには、3つのtype属性があります。
■ 1. button
普通のボタンです。特に何もしません。
■ 2. submit
フォームを送信するボタンです。フォームの情報を送ります。
■ 3. reset
フォームの内容をリセットするボタンです。フォームに入力した情報を消します。
<button type="button">普通のボタン</button>
<button type="submit">送信ボタン</button>
<button type="reset">リセットボタン</button>
|
disabled属性
disabled属性を使うと、ボタンを無効にすることができます。
無効なボタンは、クリックできなくなります。
<button disabled>クリックできないボタン</button>
|
このコードをホームページに追加すると、クリックすることができないボタンが表示されます。
その他の属性
その他の属性として、「name属性」があります。name属性は、ボタンに名前をつけることができて、フォームで使うときに便利です。
また、「value属性」は、ボタンに値を持たせることができます。フォームで送信するデータとして使います。
<button name="myButton" value="1">名前と値を持つボタン</button>
|
このコードをホームページに追加すると、「名前と値を持つボタン」が表示されます。フォームで使うと便利です。
buttonタグのデザインとカスタマイズ方法
buttonタグを使ってボタンを作るとき、見た目を変えることができます。
ここでは、buttonタグのデザインとカスタマイズ方法をお伝えします。
ボタンの色や文字の色を変える方法
ボタンの色や文字の色は、次のようにして変えることができます。
<button class="myButton">カラフルなボタン</button>
<style>
.myButton {
background-color: #4CAF50; /* 背景色 */
color: white; /* 文字色 */
padding: 15px 32px; /* ボタンの中の余白 */
font-size: 16px; /* 文字の大きさ */
border: none; /* 枠線をなくす */
border-radius: 4px; /* 角を丸くする */
cursor: pointer; /* マウスの形を指にする */
}
</style>
|
このコードをホームページに追加すると、下記のように、緑色の背景に白い文字のボタンが表示されます。
ボタンにマウスをのせたときのデザインを変える方法
ボタンにマウスをのせたときのデザインを変えたい場合は、下記のように書きます。
<button class="hoverButton">ホバーボタン</button>
<style>
.hoverButton {
background-color: #008CBA; /* 背景色 */
color: white; /* 文字色 */
padding: 15px 32px; /* ボタンの中の余白 */
font-size: 16px; /* 文字の大きさ */
border: none; /* 枠線をなくす */
border-radius: 4px; /* 角を丸くする */
cursor: pointer; /* マウスの形を指にする */
}
.hoverButton:hover {
background-color: #005f6b; /* ホバー時の背景色 */
}
</style>
|
このコードをホームページに追加すると、下記のように、青い背景のボタンが表示されます。
そして、ボタンにマウスをのせると、背景色が少し暗くなります。
ボタンをクリックしたときの動きの設定方法
buttonタグを使ったボタンに、クリックしたときに何かの動きをさせることができます。
これを「イベントハンドリング」といいます。
ここでは、JavaScriptというプログラミング言語を使って、ボタンをクリックしたときの動きの設定方法をお伝えします。
onclickイベント
onclickイベントは、ボタンをクリックしたときに動くプログラムを作るためのものです。
たとえば、下記のように書きます。
<button onclick="alert('ボタンがクリックされました!')">クリックしてね</button>
|
このコードをホームページに追加すると、「クリックしてね」というボタンが表示されます。
そして、このボタンをクリックすると、「ボタンがクリックされました!」というメッセージが表示されます。
onmouseoverイベント
onmouseoverイベントは、ボタンにマウスをのせたときに動くプログラムです。
<button onmouseover="alert('マウスがボタンにのりました!')">マウスをのせてね</button>
|
このコードをホームページに追加すると、「マウスをのせてね」というボタンが表示されます。
そして、このボタンにマウスをのせると、「マウスがボタンにのりました!」というメッセージが表示されます。
onmouseoutイベント
onmouseoutイベントは、ボタンからマウスを離したときに動くプログラムです。
<button onmouseout="alert('マウスがボタンから離れました!')">マウスを離してね</button>
|
このコードをホームページに追加すると、「マウスを離してね」というボタンが表示されます。
そして、このボタンからマウスを離すと、「マウスがボタンから離れました!」というメッセージが表示されます。
buttonタグとinputタグの違い
ここでは、buttonタグとinputタグの違いについて、お伝えします。
buttonタグ
buttonタグは、ボタンの中にいろいろな内容を入れることができます。
たとえば、文字だけでなく、画像やアイコンも一緒に表示できます。
<button>文字だけのボタン</button>
<button><img src="icon.png" alt="アイコン"> アイコン付きのボタン</button>
|
このコードをホームページに追加すると、文字だけのボタンとアイコン付きのボタンが表示されます。
inputタグ
inputタグは、ボタンを作るためのもう一つの方法です。
inputタグで作るボタンは、シンプルで、文字だけを表示することができます。
なお、inputタグの中には、他の内容を入れることはできません。
<input type="button" value="シンプルなボタン">
|
このコードをホームページに追加すると、シンプルな文字だけのボタンが表示されます。
buttonタグとinputタグの使い分け
buttonタグは、ボタンの中に文字以外の内容を入れたいときに使います。
たとえば、アイコンや画像を入れたい場合です。
一方、inputタグは、シンプルなボタンを作りたいときに使います。
特に、フォームの中でよく使われます。
どちらのタグを使うかは、作りたいボタンのデザインや機能によって決めるといいでしょう。
【まとめ】buttonタグとは
buttonタグとは?使い方からデザイン方法まで徹底解説!の内容は、いかがでしたでしょうか?
buttonタグは、ホームページでボタンを作るためのタグです。
ホームページにお問い合わせフォームを設置するときに、よく使います。
なお、ボタンを設置するポイントは、わかりやすい文面のボタンにするということです。
たとえば、「送信」や「詳細を見る」などの文面を書くと、わかりやすくなります。
お問い合わせフォーム以外では、あまり使う機会はないかもしれませんが、ぜひ1つの知識として覚えておいてくださいね。