【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タグは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

かい

かい

日向徹かこよすぎか

[email protected]