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

HTML のコントロールで URL を開く方法は、実行したいことによって変わります。ページ移動なら href を持つ <a> を使い、CSS でボタンのように見せます。操作を実行する場合は <button>、フォームデータを送信する場合は submit コントロールを使います。<button> や <input> を <a> の中に入れないでください。どちらもインタラクティブ要素なので、役割とキーボード操作が競合します。

目的に応じてアンカーとボタンを選ぶ

現在の URL を変える、文書を開く、ファイルをダウンロードする、別ページへ移動する場合はアンカーを使います。href に実際の移動先があるため、新しいタブで開く、URL をコピーする、ブックマークする、キーボードで Enter を押す、といったブラウザーの機能を利用できます。

現在のページを変更したり、ダイアログやパネルを開いたり、スクリプトを実行したりする場合は <button type="button"> を使います。四角い見た目だけで button をリンクにしてはいけません。要素の役割と動作を一致させます。

ナビゲーション用の <a> をボタンのように装飾する

単にページ移動したい場合の推奨方法です。移動先を href に置き、意味のあるリンクテキストと、見えるフォーカス表示を用意します。/docs/ は実際の移動先に置き換えてください。

<a class="button-link" href="/docs/">Open the documentation</a>

.button-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.35rem;
  background: #1769aa;
  color: #fff;
  text-decoration: none;
}

.button-link:hover {
  background: #0d4f80;
}

.button-link:focus-visible {
  outline: 3px solid #f5b700;
  outline-offset: 2px;
}

見た目はボタンでも、意味はリンクのままです。新しいタブで開く場合はテキストでも知らせます。

<a href="https://example.com/docs" target="_blank" rel="noopener">
  Open the documentation (new tab)
</a>

href="#" や href="javascript:void(0)" をボタンの代わりに使わないでください。実際の移動先を表さず、スクロールやブックマークで予期しない動作を起こします。href は相対 URL、絶対 HTTPS URL、フラグメントなどにできます。CSS は表示だけを変えるので、リンクの標準機能は維持されます。

本当にボタン操作が必要な場合だけ <button> と JavaScript を使う

移動前に状態確認などの処理を行う必要がある場合は button を使えます。型を明示し、addEventListener でイベントを登録します。window.location.assign() が移動を実行します。

<button type="button" id="docs-button">Open the documentation</button>

<script>
  document.querySelector("#docs-button").addEventListener("click", () => {
    window.location.assign("https://example.com/docs");
  });
</script>

この例はポインター、Enter、Space で動作しますが、JavaScript が必要です。通常のナビゲーションではアンカーを優先してください。大きなアプリケーションでは属性 onclick よりモジュール内のイベントリスナーを使います。空の URL は境界ケースなので、動的な値を assign() の前に検証します。

データ送信が目的ならフォームを使う

サーバーへフィールドを送る場合は、フォームの action を移動先にして submit コントロールを置きます。これはリンク移動ではなくフォーム送信です。

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" name="q" type="search">
  <button type="submit">Search</button>
</form>

CSS button を送信すると、通常のフォームエンコードにより /search?q=CSS+button のようなリクエストになります。見た目だけのために空のフォームを使わないでください。submit button ごとに移動先を変える必要があれば formaction を使えます。

古い value ベースのフォームでは <input type="submit"> も有効です。

<form action="/docs/" method="get">
  <input type="submit" value="Open the documentation">
</form>

value が表示ラベルになります。この input をアンカーで囲まないでください。<input type="button"> は単独では送信も移動もしないため、スクリプトが必要です。

リンクを開かないボタンを修正する

• 移動なら、CSS でボタンに見せてもマークアップは <a href="..."> にします。
• フォーム内で送信しない操作には type="button" を指定します。型を省くと submit になり、ページ再読み込みや送信が起きます。
• JavaScript の button が動かない場合は、コンソール、セレクター、スクリプトの読み込みを確認します。JavaScript 無効時は handler は動きません。
• キーボード利用者のために :focus-visible を残します。フォーカス枠を消すなら代替表示が必要です。
• 通常のリンクに <button> や <input> を入れ子にしないでください。

まとめると、移動には <a href="...">、操作には <button type="button">、データ送信にはフォーム内の submit button を使います。この分離により、ブラウザーと支援技術が予測可能な意味を取得できます。