「ボタンは作ったけど、押してもリンクに飛ばない」
「別のタブで開くようにしたいが上手く行かない」
「ボタンを作るたびにどのタグを使えばいいのか迷う」
こんなことで悩むことはありませんか？
この記事では、3種類のタグを使用したボタンの作り方を解説していきます。
よくあるエラーとその対処法についてもご紹介しますので、ボタンの作成に悩んでいる方はぜひ最後まで読んでみてください。
この記事もオススメ
この記事の目次
ボタンのリンクの作り方 比較表
HTMLでは、<a>タグ、<button>タグ、<input>タグの3つのタグを使ってボタンを作成可能。
それぞれのボタンには、以下のような違いがあります。
「どのタグを使えばいいの？」と迷う時はこちらの表を参考にしてください。
それでは、それぞれのタグを使ったボタンの作成方法をみていきましょう。
【このページを見ている方限定】受講料30,000円OFF
- プログラミングは難しくて挫折しそう
- 独学でちゃんとスキルが身につくのか不安
- 効率的にプログラミングスキルを習得する方法を知りたい
ぜひ無料カウンセリングにお申し込みください！
HTMLでボタンにリンクを貼る方法は3つ
<a>タグ、<button>タグ、<input>タグを使った、ボタンの作成方法を解説します。
aタグでボタンを作成する
<a>タグは、主にリンクを設置したいときに使用。
<a>タグの中には、<p>タグや<div>タグなどのブロック要素を含めても良いです。
ブロック要素を含めることで、テキストや画像などさまざまな要素にリンクを貼り、リンクを貼った要素をクリックすることで、画面を遷移させられます。
とても汎用性が高いため、最も使われているタグです。
<a>タグのボタンは、以下のように記述して作成してください。
この記事もオススメ
aタグのリンクを別タブで開く方法
<a>タグで作成したボタンをクリックした時、別のタブでリンク先の画面を開きたい場合、target属性<target=”_blank”>を追記します。
<a>タグで作成したボタンのデザインを変える方法や、より詳しい機能について知りたい方は以下の記事をご参考ください。
この記事もオススメ
<button>タグは、フォームの「送信」や「リセット」ボタンを設置するときによく使います。
似た機能を持つ<input>タグより汎用性が高く簡単にボタン作成ができるので、ぜひ使い方をマスターしましょう。
<button>タグのボタンは、以下のように記述して作成します。
※<button>タグは、HTML5から使用できるようになりました。HTML4で構築する場合は、使用できないので注意。
<button>タグのボタンを使いこなすために、3つのtype属性の値を覚えておきましょう。
type属性<button type=”◯◯”>の◯◯の値を変更することで、汎用ボタン以外にもフォームの送信ボタンやリセットボタンを作成可能。
- submit：送信ボタン
- reset：リセットボタン
- 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=”◯◯’”>の◯◯の値を変更することで、遷移画面をどのように開くか指定することができます。
- 「location.href=”URL”」：現在のタブで遷移画面を開く
- 「window.open(‘URL’)」：別タブで遷移画面を開く
<input>タグと<button>タグは同じ機能を持ちます。
そのため、「どれを使えばいいの？」と迷う方がいるかも知れません。
結論、機能面以外で大きな違いがあります。
それは、<button>タグには閉じタグがあるが、<input>タグには閉じタグがないこと。
閉じタグがあると、beforeやafterといった疑似要素が使えるのです。
ボタンにアイコンを付加できるので、<button>タグの方がデザインの幅が広がります。
ここで改めて、3つのタグの比較表を復習しましょう。
リンクが飛ばない時の対処法
ボタンをクリックしてもリンクが正しく飛ばないときの原因は、主に3つです。
- 記述にミスがある
- リンクが貼れない場所にリンクを貼っている
- 遷移先のページが存在しない
それぞれの対処法について詳しくみていきましょう。
記述ミスがある場合
よくある記述のミスは以下のようなものがあります。
当てはまることがないか一度確認してみましょう。
- URLを囲む「’ ’」が全角だったり、抜けている
- 「href」のスペルミスがある
- </button>や</a>など閉じタグがない
- URLにスペルミスがある
URLをコピペしている場合、最初と最後の文字が欠けている場合がよくありますので、注意しましょう。
この記事もオススメ
リンクが貼れない場所にリンクを貼っている場合
HTMLで一から記述している場合や、ワードプレスではほとんど問題はありません。
しかし、ショッピングサイトなどの管理画面からHTMLを記述する場合、他のサイトへの誘導を禁止している場合があります。
お使いのサイトの利用規約を見直してみましょう。
遷移先のページが存在しない場合
記述のミスがなく、リンクの貼る場所も問題なし。
それでも遷移画面にエラーが出てしまう場合、そもそも飛ばした先のページが非公開になっていたり、削除されてしまっている可能性があります。
リンク先のページが問題なく公開されているページなのか一度確認してみましょう。
HTMLでボタンにリンクを貼る方法まとめ
本記事では、HTMLでボタンを作成する3つタグの使い方ついて解説してきました。
3つのタグの使い分けや、ボタンを作成したけど上手くページに遷移しない時は、またこの記事を読み返してみてください。
この記事もオススメ
この記事もオススメ
最先端のITスキルが学び放題！AI時代で勝ち残る人材になる。
＼テクノロジー時代に活躍できる人材になりませんか？／
あらゆる業界でIT化が進んでいる今、
エンジニアではなくともテクノロジーへの理解が不可欠な時代になりました。
プログラミングを活用して新しい価値を生み出すことで、
あなたの人材価値を高めることができます。
プログラミングを学ぶと、
・キャリアアップ、年収アップを目指せる
・テクノロジーを活用した課題解決ができる
・業務効率化ができるようになる
・自分でサービスを作れるようになる
テックキャンプは、テクノロジースキルが定額で学び放題。
プログラミング、AI、デザイン、DXスキル、
そして、話題のChatGPTも学ぶことができます。
これからの時代で必要とされるスキルを学び、
市場価値を高め、個人で活躍できる人材を一緒に目指しましょう。
