ボタンを押して別ページへ！HTMLボタンでリンクを作成する方法

2024-04-02

HTMLボタンをハイパーリンクとして機能させる方法

ここでは、HTMLボタンをハイパーリンクとして機能させる3つの方法をご紹介します。

href属性を使う

最も簡単な方法は、buttonタグにhref属性を追加する方法です。href属性には、リンク先のURLを指定します。

<button href="https://www.example.com/">リンク先へ</button>

上記のように記述すると、ボタンをクリックすると、https://www.example.com/へ移動します。

注意点

type属性をsubmitに設定すると、ボタンが送信ボタンとして機能するため、リンク機能は無視されます。
ボタンをクリックした際に、フォーカスが移動しないようにするには、tabindex="-1"属性を追加します。

onclickイベントを使用すると、ボタンをクリックした際にJavaScriptを実行することができます。JavaScriptを使用して、ページ遷移を行うことも可能です。

<button onclick="location.href='https://www.example.com/'">リンク先へ</button>

onclickイベントは、JavaScriptを使用するため、ブラウザによっては動作しない可能性があります。

aタグと組み合わせて使う

aタグとbuttonタグを組み合わせて使用することで、ボタンの見た目を保ちながら、リンク機能を持たせることができます。

<a href="https://www.example.com/"><button>リンク先へ</button></a>

buttonタグ内に直接テキストを記述すると、ボタンの見た目が崩れる可能性があります。その場合は、spanタグなどを用いてテキストを囲みましょう。

HTMLボタンをハイパーリンクとして機能させる方法はいくつかあります。それぞれの特徴を理解して、目的に合った方法を選択しましょう。

href属性を使う

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLボタンをハイパーリンクとして機能させる</title>
</head>
<body>
    <button href="https://www.example.com/">リンク先へ</button>
</body>
</html>

onclickイベントを使う

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLボタンをハイパーリンクとして機能させる</title>
</head>
<body>
    <button onclick="location.href='https://www.example.com/'">リンク先へ</button>
</body>
</html>

aタグと組み合わせて使う

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLボタンをハイパーリンクとして機能させる</title>
</head>
<body>
    <a href="https://www.example.com/"><button>リンク先へ</button></a>
</body>
</html>

これらのコードを参考に、HTMLボタンをハイパーリンクとして機能させてみてください。

HTMLボタンをハイパーリンクとして機能させるその他の方法

formタグとinputタグを使用することで、ボタンをクリックすると別のページへPOSTリクエストを送信することができます。

<form action="https://www.example.com/" method="post">
    <input type="hidden" name="name" value="John Doe">
    <input type="hidden" name="email" value="[email protected]">
    <button type="submit">送信</button>
</form>

上記のように記述すると、ボタンをクリックすると、https://www.example.com/へPOSTリクエストが送信され、nameとemailという名前のパラメータが送信されます。

POSTリクエストは、GETリクエストよりも多くの情報量を送信することができますが、セキュリティリスクも高くなります。

CSSを使用することで、ボタンの見た目をリンクのようにすることができます。

<button>リンク先へ</button>

<style>
button {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}
</style>

上記のように記述すると、ボタンに下線が引かれ、青色になり、カーソルがポインターになると、リンクのように見えます。

CSSのみでボタンをハイパーリンクとして機能させることはできません。クリックした際にページ遷移させるためには、JavaScriptなどの他の方法と組み合わせる必要があります。

ライブラリを使う

jQueryなどのライブラリを使用することで、より簡単にHTMLボタンをハイパーリンクとして機能させることができます。

<button id="my-button">リンク先へ</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#my-button").click(function() {
        window.location.href = "https://www.example.com/";
    });
});
</script>