サイト制作

HTMLのリンクとボタンの違い｜ページ移動と操作で使い分ける

慈愛妃きづな

2026-10-29

この記事には広告・アフィリエイトリンクが含まれます。

別のページやURLへ移動するならリンク、メニューの開閉や保存などの処理にはボタンを使います。見た目ではなく役割で要素を選び、キーボードや別タブで開く操作でも期待どおり動くか確認します。

見た目より移動・操作の役割で要素を選ぶ

角の丸いピンクの部品でも、記事へ移動するものと、入力を送信するものでは役割が違います。サイトを作るときは、まず「移動するのか、操作するのか」を決めます。リンクもボタンも見た目は整えられますが、見た目だけでHTMLの要素を選ぶと、使う人が期待する動作から外れてしまうことがあります。

MDNは、実際のURLへの移動にハイパーリンクを使うと説明しています。記事一覧へ戻る、商品詳細を見る、といった用途です。リンクには行き先を示すURLを持たせ、表示文言も移動先が分かるものにします。「こちら」だけより、「記事一覧へ戻る」のほうが、押す前に目的が伝わりますね。

メニューを開く、検索を実行する、保存するなどの操作にはボタンが適します。リンクの行き先を空の記号などにして、クリック処理だけでボタンの代わりにすると、新しいタブで開く、URLをコピーする、といった操作の期待を裏切ります。標準の要素を使うことは、見た目を妥協することではありません。

完成したら、キーボードで移動して実行し、リンクなら別タブで開けるかも確認します。私なら、装飾を付ける前に役割を決めておきたいです。かわいい見た目と、迷わず操作できることは両立できます。押した先で驚かせない設計にしたいですね。