【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タグは結構イケてて使いやすいので実際に現場でガンガン使っていきましょう!

それでは!!

自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

LINEで送る
Pocket

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

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

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