HTML/CSS

初心者必見!HTMLでボタンからリンクするため3つの方法を解説

HTMLではハイパーリンクを使ってWebサイト内のページや外部のサイトにアクセスすることができます。aタグで囲って文字で表記すれば簡単にリンクを作ることができます。aタグでは、文字がリンクになります。

しかし、文字だけではリンクが分からなかったり、ページのデザインによってはシンプルすぎる場合もあります。HTMLではリンクをボタンの形式で作ることができます。

本記事ではHTMLでボタンからリンクするための3つの方法を紹介します。3つめはCSSを使いますが、コード自体は簡単なのでCSSの学習と同時にやってみることをおすすめします。

HTMLでボタンにリンクをつける方法

button

buttonタグを使えばクリックできるボタンを作ることができます。しかし、buttonタグをそのまま使うだけでは別のページにリンクしません。タグの中にonclick属性をつけて、リンク先を指定することでボタンからページを飛ぶことができます。

基本コードは以下の通りです。

<button type=”button” onclick = “location.href=’リンク先のURL’”>ボタンのテキスト</button>

buttonタグを使うメリットは汎用性です。カスタマイズも可能で、フォームボタンとしても利用できます。他の二つではカスタマイズとフォームボタン機能のどちらかができませんが、buttonタグはどちらもできるため、迷ったらbuttonタグがおすすめです。

buttonタグはHTML5から利用になったタグなので、HTML4以前ではタグ自体がないので気を付けてください。

input

inputタグでtype属性にsubmitかbuttonを設定することでボタンになります。リンクさせる際にはtype属性をbuttonにします。inputタグでもonclick属性を使ってリンク先を指定します。指定方法はbuttonタグと同じです。基本コードは以下の通りです。

<input type = “button” onclick= “location.href=’リンク先のURL’”>

inputは閉じタグがないため、ボタンにテキスト表示をしたい場合はvalue属性を設定します。また、inputはCSSでカスタマイズができないため、見た目を整えることができませんので注意してください。

inputタグはtype属性によって入力画面(type=”text”)になったり、ラジオボタン(type=”radio”)になったりします。submitは入力画面やラジオボタンなどのフォーム入力値を送信するために利用されます。

aタグをCSSを用いてボタンにする

aタグにCSSを用いることでボタンにすることができます。aタグ単体ではタグで囲まれた文字にリンクが貼られる形になります。しかし、CSSを使えばaタグでボタンのような見た目にすることができます。

aタグはインライン要素のため、余白や枠線を指定することができません。しかし、インラインブロック要素にすることで、余白や枠線を作ることができるのでボタンのような見た目にすることが可能です。しかし、aタグはフォームボタンとして利用することができません。

aタグを用いてリンクするボタンを作る方法は以下の通りです。

<a href=”リンク先のURL”>リンク</a>
a{
  display: inline-block;
  text-decoration:none;
  width:100px;
  height:30px;
  background-color:red;
  padding:3px 10px;
  border :black 1px solid;
  border-radius:3px;
}

CSSはaタグをインラインブロックにして、幅と高さを指定します。指定した幅と高さのところまでリンクするクリックができるようになります。あとは、あなたの好きなようにボタンをカスタマイズしてみてください。

aタグを使う場合はカスタマイズに優れますが、CSSのコードが長くなるというデメリットがあります。基本的にボタンを作るときはbuttonを使うことをおすすめします。

buttonタグにリンクを貼るときの注意点

buttonタグでaタグを囲うことはやってはいけません。なぜならば、HTMLの規定を定めているW3Cの仕様に、aタグの中にインタラクティブコンテンツを入れては行けないとされています。ユーザーの操作に反応するタグのことをインタラクティブコンテンツと言います。

buttonの他にもselectやinput、textareaなどがあります。もし、buttonタグの中にaタグを入れるとブラウザによっては動作しないことがあります。ソースコードを見るとたまにbuttonタグでaタグを囲っているコードを見かけます。しかし、仕様に反した利用方法であることを覚えておいたほうが良いと思います。

サンプルコード(buttonタグ)

ボタンを押すとYahoo JAPANへ飛ぶリンクを作ります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="location.href='https://www.yahoo.co.jp/'">Yahooへ</button>
</body>
</html>

まとめ

ボタンからリンクをする方法は3種類を紹介しました。HTML5にbuttonタグが実装されてからはbuttonが主流になっています。しかし、inputやaタグが利用されていないわけではありません。用途に応じて使い分けをすることをおすすめします。使い分けは以下の通りです。

  • button:特に指定がない場合
  • input:フォームボタンとして使うとき(buttonでもフォームボタンとして使える)
  • aタグをCSSでボタンにする:デザインにこだわるとき

クライアントや自分の用途に合わせてすべて使えるようになるといいと思います。