みなさんこんにちは！HTMLでかっこいいボタンをみるとついつい押したくなってしまいますよね。ボタンの色や、配置などでクリック率も変わると言われているので興味深いです。今日は、そんなボタンを作れるよう
- buttonタグのとは
- buttonタグとinput type="button"の違い
- buttonタグでリンクを作る
について詳しくみていきましょう！
buttonタグとは
まずは、buttonタグは名前からもわかるよう、buttonを作るためのタグです。buttonを作る理由は、buttonを押した時に別ページに遷移させたり、フォームを送信したり、何らかのアクションを起こす時ですよね。
うまくCSSをかけて立体的に魅せたり、綺麗な配色を使うことによってクリック率をあげたりするこのbuttonタグですが、間違いやすいポイントもあるので事項以降で説明していきます！
buttonタグとinput type=”button”の違い
まずは、同じボタンを作るのでもbuttonタグとinputタグでtypeにbuttonを指定するものがあります。これらは見た目などは同じですが、違うものですので用途によって使い分けられるようにしましょう。
実は動きは一緒なのですが、大きな違いはbuttonタグは
<button type="button"></button>
このように、開始タグと閉じタグがあり、
<input type="button">
inputタグには閉じタグがないことです。つまりbuttonタグは子要素をもてるということです。この違いが実際に使う時に具体的にどう関わってくるかというと、
まずbuttonタグは、子要素を持てるため、内側に好きなだけかけるので、CSSでカスタマイズしやすいです。また、子要素が持てるということは、buttonタグは、::beforeや::afterなどの擬似要素が使用できるということです。
もちろん、inputタグはできないのでこの差は大きいですね。
実際につかってみよう
さて、それでは実際にbuttonタグを使って見ましょう！サンプルのコードを用意しました。見やすいように背景色を設定しています。
index.html
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button type="button" name="name" value="value">button</button>
</body>
</html>
画像のようにボタンができていますね。しかし、buttonタグについているtype属性、name属性、value属性が謎なのでこれらについて 一つずつ見ていきましょう！
type属性
まずは、type属性を見ていきましょう。type属性には、
- submit
- reset
- button
の3つの属性を指定できます。まず、一番上のsubmitですが、これはフォームタグや、ボタンの値を送信するときに使われます。フォームタグとは、何らかの情報を入力するためのタグで主にサイトなどでお問い合わせフォームなどに使われていますね。
次のresetはフォームの内容をリセットするときに使われます。例えばフォームにリセットボタンを用意しておけばユーザが入力を間違えた時に押せて便利ですね。
さて、今回メインで紹介していくのが最後のbuttonです。これは、button自体に機能はないただのボタンを作成するためのものです。利用例は次章で挙げるので使い方がわかるはずです。
name属性
name属性は、ボタンに名前をつけることのできる属性です。
value属性
value属性はボタンに割り当てる値を決めることができます。例えば、
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button type="submit" name="name" value="値">送信!</button>
</body>
</html>
例えばこのようにすれば、送信を押したときに”値”という値を送信できて、その値の名前は”name”ということになります。現状では、Webサーバなど立っていないので実際には送信できませんが、このようにして使います。
buttonタグを使ってリンクを作ってみよう！
さて、送信ボタン以外にボタンを作るときの用途といえば、他のURLに遷移するときですよね。そのやり方を見ていきましょう。
まず、HTMLを書いたある人であれば、aタグで囲んじゃえばいいじゃん！と思う方もいるかもしれません。
<!DOCTYPE >
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="https://www.sejuku.net">
<button type="button">遷移！</button>
</a>
</body>
</html>
こういうことですよね。
確かにきちんと動作しました。しかし、これはHTMLとしては正しくありません。正しいコーディングをしないとバグに繋がったり、Googleでの検索結果が落ちたりということに繋がりかねません。
HTMLを書くものとして正しいコーディングを常に心がけることはとても大切です。
なぜaタグではだめなのか
では、なぜaタグでダメなのかを解説していきます。それは、HTMLの規定を定めるW3Cの仕様に、aタグの中にインタラクティブコンテンツを入れてはいけないと定められているためです。
インタラクティブコンテンツとはユーザの操作に対して反応するタグのことです。具体的には、select, button, a, input, textareaなどなどです。(他にもありますが割愛)仕様に対応していない書き方をすると、思わぬバグを引き起こします。
buttonタグに関して言えば、aタグの中にbuttonタグを入れると、IE11は動作しません。aタグの中にインラクティブコンテンツを入れてはいけないというルールは普通のエンジニアでも知らないことが多いです。
そのため、buttonタグをaタグで囲うという実装も時々ありますが、みなさんは絶対しないようにしましょう。
正しいリンクの作り方
それでは、正しい実装方法を見ていきましょう。
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button type=“button” onclick="location.href='https://www.sejuku.net'">遷移！</button>
</body>
</html>
正しくはこう書きます。
このようにきちんと遷移できていますね。
onclick="location.href=‘サイトURL' "
とは、クリック時のイベント(処理)をしていできるもので、これによってクリックした時にlocation.hrefに指定されたURLに遷移します。location.hrefはURL遷移に使うおまじないと思っておけば良いでしょう。
まとめ
いかがでしたか。buttonタグやinputタグの違い、buttonの使い方、正しいリンクの付け方といった内容を説明してきました。butttonタグは結構イケてて使いやすいので実際に現場でガンガン使っていきましょう！それでは！！
