【HTML入門】ボタンを使いこなして正しくリンクを作成してみよう!

HTMLでかっこいいボタンをみるとついつい押したくなってしまいますよね。ボタンの色や、配置などでクリック率も変わると言われているので興味深いです。

今日は、そんなボタンを作れるよう

  • buttonタグのとは
  • buttonタグとinput type=”button”の違い

という内容でbuttonタグを使いこなしつつ、間違えやすい

  • buttonタグでリンクを作る

について詳しくみていきましょう!

buttonタグとは

まずは、buttonタグは名前からもわかるよう、buttonを作るためのタグです。buttonを作る理由は、buttonを押した時に別ページに遷移させたり、フォームを送信したり、何らかのアクションを起こす時ですよね。

うまくCSSをかけて立体的に魅せたり、綺麗な配色を使うことによってクリック率をあげたりするこのbuttonタグですが、間違いやすいポイントもあるので事項以降で説明していきます!

buttonタグとinput type=”button”の違い

まずは、同じボタンを作るのでもbuttonタグinputタグでtypeにbuttonを指定するものがあります。

これらは見た目などは同じですが、違うものですので用途によって使い分けられるようにしましょう。実は動きは一緒なのですが、大きな違いはbuttonタグは

このように、開始タグと閉じタグがあり、

inputタグには閉じタグがないことです。つまりbuttonタグは子要素をもてるということです。この違いが実際に使う時に具体的にどう関わってくるかというと、まずbuttonタグは、子要素を持てるため、内側に好きなだけかけるので、CSSでカスタマイズしやすい[です。

また、子要素が持てるということは、buttonタグは、::beforeや::afterなどの擬似要素が使用できるということです。もちろん、inputタグはできないのでこの差は大きいですね。

実際につかってみよう

さて、それでは実際にbuttonタグを使って見ましょう! サンプルのコードを用意しました。見やすいように背景色を設定しています。

index.html

画像のようにボタンができていますね。しかし、buttonタグについているtype属性name属性value属性が謎なのでこれらについて 一つずつ見ていきましょう!

type属性

まずは、type属性を見ていきましょう。type属性には、

  • submit
  • reset
  • button

の3つの属性を指定できます。まず、一番上のsubmitですが、これはフォームタグや、ボタンの値を送信する時に使われます。フォームタグとは、何らかの情報を入力するためのタグで主にサイトなどでお問い合わせフォームなどに使われていますね。

次のresetはフォームの内容をリセットする時に使われます。例えばフォームにリセットボタンを用意しておけばユーザが入力を間違えた時に押せて便利ですね。

さて、今回メインで紹介していくのが最後のbuttonです。これは、button自体に機能はないただのボタンを作成するためのものです。利用例は次章で挙げるので使い方がわかるはずです。

name属性

name属性は、ボタンに名前をつけることのできる属性です。

value属性

value属性はボタンに割り当てる値を決めることができます。例えば、

例えばこのようにすれば、送信を押したときに”値”という値を送信できて、その値の名前は”name”ということになります。現状では、Webサーバなど立っていないので実際には送信できませんが、このようにして使います。

buttonタグを使ってリンクを作ってみよう!

さて、送信ボタン以外にボタンを作るときの用途といえば、他のURLに遷移するときですよね。そのやり方を見ていきましょう。まず、HTMLを書いたある人であれば、aタグで囲んじゃえばいいじゃん!と思う方もいるかもしれません。

こういうことですよね。

確かにきちんと動作しました。しかし、これはHTMLとしては正しくありません。正しいコーディングをしないとバグに繋がったり、Googleでの検索結果が落ちたりということに繋がりかねません。HTMLを書くものとして正しいコーディングを常に心がけることはとても大切です。

なぜaタグではだめなのか

では、なぜaタグでダメなのかを解説していきます。それは、HTMLの規定を定めるW3Cの仕様に、aタグの中にインタラクティブコンテンツを入れてはいけないと定められているためです。インタラクティブコンテンツとはユーザの操作に対して反応するタグのことです。

具体的には、select, button, a, input, textareaなどなどです。(他にもありますが割愛)仕様に対応していない書き方をすると、思わぬバグを引き起こします。buttonタグに関して言えば、aタグの中にbuttonタグを入れると、IE11は動作しません。

aタグの中にインラクティブコンテンツを入れてはいけないというルールは普通のエンジニアでも知らないことが多いです。そのため、buttonタグをaタグで囲うという実装も時々ありますが、みなさんは絶対しないようにしましょう。

正しいリンクの作り方

それでは、正しい実装方法を見ていきましょう。

正しくはこう書きます。

このようにきちんと遷移できていますね。

とは、クリック時のイベント(処理)をしていできるもので、これによってクリックした時にlocation.hrefに指定されたURLに遷移します。location.hrefはURL遷移に使うおまじないと思っておけば良いでしょう。

まとめ

いかがでしたでしょうか。

  • buttonタグ
  • inputタグの違い
  • buttonの使い方
  • 正しいリンクの付け方

といった内容を説明してきました。buttonタグは結構イケてて使いやすいので実際に現場でガンガン使っていきましょう! それでは!!

エラーばかりでプログラミング学習が進まない、と悩んでいませんか?

プログラミング学習を始めたけれど、エラーの原因がよく分からなかったり、調べてみたけれど解決されず「どうやって進めればいいんだろう」と放置してそのまま挫折しかけていませんか?

一度進め方が分からなくなるとやる気も失せてしまいますよね。

そんなあなたにオススメしたいのが、「侍エンジニア塾」の無料体験レッスンです。独学で1000時間以上の学習が必要と言われているところを300時間に短縮する「プログラミング独学法」をお伝えします。

下記の無料体験レッスン予約カレンダーよりお申し込みいただけます。あなたのご相談を心よりお待ちしております。

LINEで送る
Pocket

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説