【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遷移に使うおまじないと思っておけば良いでしょう。

プログラミングスクールなら受講期間で仕事獲得も?

HTMLはウェブサイト制作を行う上で根幹となる技術であり、CSSやJavaScriptなどと組み合わせて学ぶことでクオリティの高いサイトを作れるようになります。

簡単なウェブサイトであれば独学でも作れるようになりますが、本格的なウェブサイトを作れるようになって副業にしたい、転職したいと考えるならプログラミングスクールでの学習がおすすめです。

弊社「侍エンジニア塾」では、受講期間中にクラウドソーシングから仕事を受注し、納品までを講師と行なって最初の仕事獲得まで支援させていただいた事例もございます。

一度仕事する流れを押さえることで、卒業後も自分で同じように仕事を行えるように超実践型の授業を心がけています。38歳でご家庭をお持ちになりながらも学習をしていき受講期間中に仕事獲得に成功した生徒様の事例は以下からご覧ください。

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年7月29日

まずは無料体験レッスンへ

侍エンジニア塾ではコードを書けるようになるではなく、「プログラミングで人生を変える」ことを目的としたレッスンを行なっています。

  • あなたの理想に近い講師によるマンツーマン授業
  • あなたの目標から逆算したオーダーメイドカリキュラム
  • あなたのアイディアを形にするオリジナルアプリ制作

上記3つの特徴と共に、仕事獲得までもご協力いたしますので、ウェブサイト制作を仕事にしたいなら是非無料体験レッスンへお越しください。

未経験でもサイト制作を仕事にするためのコツや、サイト制作の勉強を効率よく進めるための学習手順などもお教えいたします。

下記のボタンよりお申し込みください。オンラインでも受講可能のため、全国どこからでも受講可能です。

侍エンジニア塾
無料体験レッスンを受ける

まとめ

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

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

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

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

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