HTML ボタンでリンクを作成

1. HTML で <a> および <button> タグを使用してリンクとして機能するボタンを作成する
2. HTML で button タグの onclick 属性を使用してリンクとして機能するボタンを作成する
3. HTML で <a> および <input> タグを使用してリンクとして機能するボタンを作成する
4. HTML フォームを使用して、HTML のリンクとして機能するボタンを作成する

リンクとして機能する HTML ボタンを作成する方法を説明します。

HTML で <a> および <button> タグを使用してリンクとして機能するボタンを作成する

<button> タグを使用して HTML ボタンを作成できます。<button> タグは、クリック可能なボタンを定義します。アンカータグ <a> を使用してハイパーリンクを作成します。あるページを別のページにリンクします。アンカータグ内に <button> タグをネストすることで、リンクとして機能するボタンを作成できます。リンクのアドレスは、href 属性を介して指定できます。

たとえば、HTML 本文内にアンカー要素を作成します。アンカー要素内に href 属性を記述し、URL https://www.youtube.com を指定します。その後、<button> タグを使用してボタンを作成します。<button> タグ内に、Youtube というテキストを入力します。次に、ボタンタグを閉じてからアンカータグを閉じます。

以下の例は、リンクとして機能する HTML ボタンの作成プロセスを示しています。Youtube にリダイレクトするボタンを作成します。

サンプルコード：

<a href="https://www.youtube.com">
<button>Youtube</button>
</a> 

HTML で button タグの onclick 属性を使用してリンクとして機能するボタンを作成する

ボタンタグ内の onclick 属性を使用して、HTML のリンクとして機能するボタンを作成することもできます。この属性は、要素をマウスでクリックすると発生します。スクリプトは、マウスがクリックされたときに実行されます。ただし、このプロセスでは、最初にボタンを作成し、次に目的の URL のみを追加します。また、このメソッドでは JavaScript を少し使用します。window.location オブジェクトを使用して、現在のページアドレスを取得し、それを新しいページにリダイレクトします。

たとえば、HTML 本文内で、最初に <button> タグを作成します。ボタンタグ内で、onclick 属性を使用して window.location.href に設定します。次に、宛先 URL https://www.facebook.com/を window.location.href で指定します。次に、<button> タグの間にテキスト Facebook を書き込みます。

HTML のイベント属性の一部である onclick 属性を使用しました。このようにして、リンクとして機能する HTML ボタンを作成できます。

サンプルコード：

<button onclick="window.location.href='https://www.facebook.com/'">Facebook</button>

HTML で <a> および <input> タグを使用してリンクとして機能するボタンを作成する

<input> タグを使用して HTML ボタンを作成できます。<input> タグは <form> タグ要素でもあります。ユーザーがデータを入力できる入力フィールドを指定します。type 属性を使用してボタンを作成し、値 button で指定できます。value 属性を使用して、ボタンのコンテンツを書き込むことができます。次に、アンカータグを使用して <input> タグをラップできます。次に、リンクとして機能するボタンが形成されます。

たとえば、アンカータグを記述して、href 属性を介してその中に宛先 URL を指定します。URL を https://www.facebook.com/として記述します。次に、<input> タグを記述し、その type 属性を button として指定します。次に、value 属性にテキスト Facebook を指定します。アンカータグを閉じます。

以下の例では、Facebook という名前のボタンを作成します。クリックすると Facebook にリダイレクトされます。したがって、リンクとして機能するボタンを作成できます。

サンプルコード：

<a href="https://www.facebook.com/">
<input type="button" value="Facebook">
</a>

HTML フォームを使用して、HTML のリンクとして機能するボタンを作成する

この方法では、<form> タグを使用して、リンクとして機能するボタンを作成します。action 属性を使用して、リンク先 URL を指定します。method 属性は、フォームデータの送信方法を指示します。フォームは、action 属性​​で指定されたページに配信されます。フォームデータを送信するときに、ボタンの type を submit に設定します。

たとえば、HTML 本文内で、<form> タグを作成し、method 属性に get を使用します。次に、action 属性​​内に目的の URL を指定します。次に、<button> 要素を使用してボタンを作成し、type 属性を submit に設定します。次に、ボタンに必要なテキストを指定します。次に、<button> タグを閉じてから、<form> タグを閉じます。次に、上で開いた残りのタグをすべて閉じます。

サンプルコード：

<form method="get" action="https://www.youtube.com/">
<button type="submit">Continue</button>
</form>