HTMLでかっこいいボタンをみるとついつい押したくなってしまいますよね。ボタンの色や、配置などでクリック率も変わると言われているので興味深いです。
今日は、そんなボタンを作れるよう
- buttonタグのとは
- buttonタグとinput type=”button”の違い
という内容で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/courses/">
<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遷移に使うおまじないと思っておけば良いでしょう。
プログラミングスクールなら受講期間で仕事獲得も？
HTMLはウェブサイト制作を行う上で根幹となる技術であり、CSSやJavaScriptなどと組み合わせて学ぶことでクオリティの高いサイトを作れるようになります。
簡単なウェブサイトであれば独学でも作れるようになりますが、本格的なウェブサイトを作れるようになって副業にしたい、転職したいと考えるならプログラミングスクールでの学習がおすすめです。
弊社「侍エンジニア」では、受講期間中にクラウドソーシングから仕事を受注し、納品までを講師と行なって最初の仕事獲得まで支援させていただいた事例もございます。
一度仕事する流れを押さえることで、卒業後も自分で同じように仕事を行えるように超実践型の授業を心がけています。38歳でご家庭をお持ちになりながらも学習をしていき受講期間中に仕事獲得に成功した生徒様の事例は以下からご覧ください。
まずは無料カウンセリングへ
侍エンジニアではコードを書けるようになるではなく、「プログラミングで人生を変える」ことを目的としたレッスンを行なっています。
- あなたの理想に近い講師によるマンツーマン授業
- あなたの目標から逆算したオーダーメイドカリキュラム
- あなたのアイディアを形にするオリジナルアプリ制作
上記3つの特徴と共に、仕事獲得までもご協力いたしますので、ウェブサイト制作を仕事にしたいなら是非無料カウンセリングへお越しください。
未経験でもサイト制作を仕事にするためのコツや、サイト制作の勉強を効率よく進めるための学習手順などもお教えいたします。
下記のボタンよりお申し込みください。オンラインでも受講可能のため、全国どこからでも受講可能です。
まとめ
いかがでしたでしょうか。
- buttonタグ
- inputタグの違い
- buttonの使い方
- 正しいリンクの付け方
といった内容を説明してきました。buttonタグは結構イケてて使いやすいので実際に現場でガンガン使っていきましょう！ それでは！！
