テックキャンプ無料カウンセリング テックキャンプ無料カウンセリング
資料請求はこちら 資料請求はこちら

【HTML】ボタンにリンクを貼る方法3つ!別タブで開くやり方・飛ばない時の対処法も

更新: 2021.11.05

>>No1エンジニア養成プログラム テックキャンプ

プログラミングを仕事にして収入を上げる方法

「ボタンは作ったけど、押してもリンクに飛ばない」

「別のタブで開くようにしたいが上手く行かない」

「ボタンを作るたびにどのタグを使えばいいのか迷う」

こんなことで悩むことはありませんか?

この記事では、3種類のタグを使用したボタンの作り方を解説していきます。

よくあるエラーとその対処法についてもご紹介しますので、ボタンの作成に悩んでいる方はぜひ最後まで読んでみてください。

ボタンのリンクの作り方 比較表

HTMLでは、<a>タグ、<button>タグ、<input>タグの3つのタグを使ってボタンを作成することができます。

それぞれのボタンは以下のような違いがあります。

「どのタグを使えばいいの?」と迷う時はこちらの表を参考にしてください。

それでは、それぞれのタグを使ったボタンの作成方法をみていきましょう。

未経験から10週間でプロのデザイナーへ

テックキャンプは、未経験からのWEBデザイナー・エンジニア転職を実現するスクール。 【こんな悩みを抱えていませんか?】
・好きなことを仕事にしたい…
・家にいながら仕事ができれば…
・あと少し収入が増えれば… テックキャンプなら超実践型カリキュラムと徹底したサポートがあるので、個人で稼げるスキルが10週間で身につきます! 詳しいサービス内容や実績を知りたい方、IT業界に詳しいプロのカウンセラーにキャリアの相談をしたい方は、無料カウンセリングへ。 無理な勧誘は一切致しませんので、気軽にご参加ください。

HTMLでボタンにリンクを貼る方法は3つ

<a>タグ、<button>タグ、<input>タグを使った、ボタンの作成方法を解説します。

aタグでボタンを作成する

<a>タグは、主にリンクを設置したいときに使用します。

<a>タグの中には、<p>タグや<div>タグなどのブロック要素を含めても良いとされています。

ブロック要素を含めることで、テキスト、画像などさまざまな要素にリンクを貼り、リンクを貼った要素をクリックすることで画面を遷移させることができます。

とても汎用性が高いため、最も使われているタグでもあります。

<a>タグのボタンは、以下のように記述して作成します。

aタグのリンクを別タブで開く方法

<a>タグで作成したボタンをクリックした時、別のタブでリンク先の画面を開きたい場合、target属性<target=”_blank”>を追記します。

<a>タグで作成したボタンのデザインを変える方法や、より詳しい機能について知りたい方は以下の記事をご参考ください。

buttonタグでボタンを作成する

<button>タグは、フォームの「送信」や「リセット」のボタンを設置するためによく使用されます。

似た機能を持つ<input>タグより汎用性が高く簡単にボタン作成ができるので、ぜひ使い方をマスターしましょう。

<button>タグのボタンは、以下のように記述して作成します。

※<button>タグは、HTML5から使用できるようになりました。HTML4で構築する場合は、使用できないので注意しましょう。

<button>タグのボタンを使いこなすために、3つのtype属性の値を覚えておきましょう。

type属性<button type=”◯◯”>の◯◯の値を変更することで、汎用ボタン以外にもフォームの送信ボタンやリセットボタンを作成することができます。

  1. submit・・・送信ボタン
  2. reset・・・リセットボタン
  3. button・・・汎用ボタン(クリックした時の動きは自分で決める)

<button onclick=”location.href=’URL’”>を指定すると、クリックした時に指定したURLに画面遷移します。

その他にも、クリックした時の何らかの処理を決める属性が多数あります。

Javascriptで何らかの処理を行いたい場合は、<button>タグを使用すると良いでしょう。

inputタグでボタンを作成する

<input>タグも<button>タグ同様、汎用ボタン以外にもフォームの「送信」や「リセット」のボタンを作成することができます。

<input>タグではtype属性<input type=”◯◯”>の◯◯に「button」を指定することでボタンが作成できます。

ボタンに表示したいテキストは、value属性<input value=”◯◯”>の◯◯に設定しましょう。

<button>タグと同様、<input onclick=”location.href=’URL’”>を指定すると、クリックした時に指定したURLに画面遷移します。

buttonタグとinputタグのリンクを別タブで開く方法

<button onclick=”◯◯’”>と<input onclick=”◯◯’”>の◯◯の値を変更することで、遷移画面をどのように開くか指定することができます。

  1. 「location.href=”URL”」・・・現在のタブで遷移画面を開く
  2. 「window.open(‘URL’)」・・・別タブで遷移画面を開く

<input>タグと<button>タグは同じ機能を持ちます。

そのため、「どれを使えばいいの?」と迷う方がいるかも知れません。

結論、機能面以外で大きな違いがあります。

それは、<button>タグには閉じタグがあるが、<input>タグには閉じタグがないということです。

閉じタグがあると、beforeやafterといった疑似要素が使えます。

ボタンにアイコンを付けることができるので、<button>タグの方がデザインの幅が広いといえます。

ここで改めて、3つのタグの比較表を復習しましょう。

リンクが飛ばない時の対処法

ボタンをクリックしても、以下のようなエラー画面をみたことがある方は多いのではないでしょうか。

リンクに正しく飛ばない原因は、主に3つあります。

  • 記述にミスがある
  • リンクが貼れない場所にリンクを貼っている
  • 遷移先のページが存在しない

それぞれの対処法について詳しくみていきましょう。

記述ミスがある場合

よくある記述のミスは以下のようなものがあります。

当てはまることがないか一度確認してみましょう。

  • URLを囲む「’ ’」が全角だったり、抜けている
  • 「href」のスペルミスがある
  • </button>や</a>など閉じタグがない
  • URLにスペルミスがある

URLをコピペしている場合、最初と最後の文字が欠けている場合がよくありますので、注意しましょう。

リンクが貼れない場所にリンクを貼っている場合

HTMLで一から記述している場合やワードプレスではほとんど問題はありませんが、ショッピングサイトなどの管理画面からHTMLを記述する場合、他のサイトへの誘導を禁止している場合があります。

お使いのサイトの利用規約を見直してみましょう。

遷移先のページが存在しない場合

記述のミスがなく、リンクを貼れる場所であるのにもかかわらず、遷移画面にエラーが出てしまう場合、

そもそも飛ばした先のページが非公開になっていたり、削除されてしまっている可能性があります。

リンク先のページが問題なく公開されているページなのか一度確認してみましょう。

この記事のハッシュタグ

HTMLでボタンにリンクを貼る方法まとめ

本記事では、HTMLでボタンを作成する3つタグの使い方ついて解説してきました。

3つのタグの使い分けや、ボタンを作成したけど上手くページに遷移しない時は、またこの記事を読み返してみてください。

もし「HTML・CSSやWebデザインのスキルを身につけたいけど、独学では挫折しそう…」と感じているなら、スクールを検討してみてはいかがでしょうか。

スクールならいつでも質問できる環境があるため、効率よく学習をすることができます。

テックキャンプ デザイナー転職は学習を最後までやり切るサポートが充実しているので、ぜひ公式サイトで詳細を確認してみてください。

>>テックキャンプ デザイナー転職 公式サイト

テックキャンプでは詳しいサービス内容やスクールの雰囲気が分かる、無料カウンセリングも実施中!効率的な学習方法やキャリアの悩みなど、ITに特化したプロのカウンセラーに何でも相談できます。

無理な勧誘は一切致しませんので、気軽にご参加ください。悩んでいるなら今こそ一歩踏み出してみませんか。

無料カウンセリングはこちら

↑目次へ戻る

Webデザイナーになって、自分らしい人生を手に入れる

「Webデザイナーになって自由に働きたい」と思っても、何から始めればいいか分からない方へ。

未経験からのWEBデザイナー・エンジニア転職を実現するスクール テックキャンプでは、デザイナーを目指すためにまずは押さえるべきポイントを6つをまとめたebookを無料で公開中!

【ebookの内容】
・IT業界転職における35歳限界説は本当?
・資格がないとデザイナーになれない?
・Webデザイナーの給料って?

限定ebookのダウンロードはこちら

Webデザイナーになって、自分らしい人生を手に入れる

「Webデザイナーになって自由に働きたい」と思っても、何から始めればいいか分からない方へ。

未経験からのWEBデザイナー・エンジニア転職を実現するスクール テックキャンプでは、デザイナーを目指すためにまずは押さえるべきポイントを6つをまとめたebookを無料で公開中!

【ebookの内容】
・IT業界転職における35歳限界説は本当?
・資格がないとデザイナーになれない?
・Webデザイナーの給料って?

限定ebookのダウンロードはこちら

この記事を書いた人

キム クナ
新卒では人材大手のパーソルキャリアに入社しキャリアアドバイザーとして、就活のサポートしていました。その後はフリーランスのWebデザイナーを経て、現在は株式会社divのデザイナーコースのコンテンツ制作を担当しています。異色なキャリアに挑戦したい方を応援したく日々有益なコンテンツ制作に奮闘中です!

あなたの理想のキャリアに合わせた、テックキャンプの3つのサービス

Advertisement