HTMLで「クリックすると別のページへ移動するボタン」を作るなら、基本はa要素でリンクを作り、CSSでボタンの見た目に整えます。
button要素は、フォームの送信や画面内の処理を実行するための要素です。見た目がボタンだからという理由だけで、ページ移動にbutton要素を使う必要はありません。
この記事では、リンクをボタン風に表示するコードを、HTMLだけの状態からCSSを加えた完成形まで順番に解説します。別タブで開く方法、同じページ内へ移動する方法、a要素とbutton要素の使い分けも確認できます。
HTMLでリンクボタンを作る基本コード
ページ移動を目的とするボタンは、a要素で作ります。aはアンカー要素とも呼ばれ、href属性に移動先のURLを指定するHTML要素です。
<a href="about.html">詳しく見る</a>href="about.html"は、同じフォルダーにあるabout.htmlへ移動する指定です。「詳しく見る」の部分が画面に表示され、クリックできるリンクになります。
この段階では通常のテキストリンクです。次のCSSを追加すると、リンクとしての正しい役割を保ったまま、ボタンのような見た目にできます。
a要素をCSSでボタン風にする方法
ここではindex.htmlとstyle.cssを同じフォルダーに作ります。まず、変更前のHTMLへクラス名を付けましょう。
変更前のHTMLを書く
class="link-button"を付けると、このリンクだけをCSSで選べます。リンク先と画面に表示する文言は、目的に合わせて変更してください。
<a class="link-button" href="about.html">詳しく見る</a>ブラウザで開くと、青色の文字と下線が付いた一般的なリンクとして表示されます。リンクとしては動作しますが、まだボタンらしい背景や余白はありません。
ボタンの見た目をCSSで追加する
次に、style.cssへデザインを書きます。固定の幅や高さを決めず、文字の周りにpaddingで余白を付けると、文言が変わっても崩れにくくなります。
.link-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 24px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
background-color: #2563eb;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.link-button:hover {
background-color: #1d4ed8;
}
.link-button:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}display: inline-flexによって、文字の周囲を含む領域をクリックできます。min-height: 44pxと上下左右の余白を設定しているため、スマートフォンでも押しやすい大きさです。
:hoverはマウスポインターを重ねた状態、:focus-visibleはキーボード操作などでリンクへフォーカスした状態を表します。色や枠線が変わるため、今どこを操作しているか分かりやすくなります。
変更後の完成コードを確認する
CSSを読み込むlink要素も含めた完成形は次のとおりです。2つのファイルを保存してindex.htmlをブラウザで開くと、青いリンクボタンが表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>リンクボタンの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="link-button" href="about.html">詳しく見る</a>
</body>
</html>HTMLへCSSを読み込む方法を先に確認したい方は、次の記事でファイルの作り方から確認できます。
リンクにはa要素、処理にはbutton要素を使う
a要素とbutton要素は、見た目ではなく役割で選びます。別ページや同じページ内の場所へ移動するならa要素、送信・開閉・再生などの処理を実行するならbutton要素です。
| 実現したいこと | 使う要素 | 理由 |
|---|---|---|
| 別ページへ移動する | a | URLへのリンクを作る要素だから |
| 同じページの見出しへ移動する | a | href="#id名"で場所を指定できるから |
| フォームを送信する | button | type="submit"で送信処理を実行できるから |
| メニューを開閉する | button | 現在の画面内で処理を実行するから |
この使い分けにすると、ブラウザや検索エンジン、読み上げソフトへ要素の役割が正しく伝わります。リンクなら新しいタブで開く、URLをコピーするなど、ブラウザ標準の操作も利用できます。
button要素のonclickでlocation.hrefを変更する方法も動作しますが、通常のページ移動にはa要素が適しています。リンクを作る基本から詳しく確認したい場合は、次の記事も参考にしてください。
リンク先URLの指定方法
href属性には、移動先に応じたURLを書きます。初心者がよく使う指定を整理すると次のようになります。
| リンク先 | hrefの例 |
|---|---|
| 同じフォルダーのページ | href="about.html" |
| 下の階層にあるページ | href="company/about.html" |
| 1つ上の階層にあるページ | href="../index.html" |
| 外部サイト | href="https://example.com/" |
| 同じページ内の見出し | href="#contact" |
別のWebサイトへリンクする
外部サイトへ移動する場合は、https://から始まるURLを省略せずに書きます。
<a class="link-button" href="https://example.com/">公式サイトを見る</a>同じページ内の見出しへリンクする
ページ内リンクでは、移動先へid属性を付け、hrefに半角の#と同じID名を書きます。
<a class="link-button" href="#contact">お問い合わせへ移動</a>
<h2 id="contact">お問い合わせ</h2>ID名はページ内で重複させないようにします。リンクをクリックすると、ブラウザがid="contact"の位置まで移動します。
リンクを別タブで開く方法
リンク先を新しいタブで開く場合は、target="_blank"を追加します。外部サイトを参照しながら現在のページも残したい場合に使えます。
<a
class="link-button"
href="https://example.com/"
target="_blank"
rel="noopener noreferrer"
>
公式サイトを見る（新しいタブで開く）
</a>rel="noopener noreferrer"は、別タブで開いたページとの不要なつながりを防ぎ、参照元情報を送らない指定です。また、リンク文言にも「新しいタブで開く」と書くと、クリック後の動作を事前に伝えられます。
同じサイト内の移動は、通常は同じタブで問題ありません。すべてのリンクを機械的に別タブへすると、戻るボタンで移動できず、利用者が混乱することがあります。
画像全体をリンクボタンにする方法
画像をクリックして別ページへ移動させる場合は、img要素をa要素で囲みます。画像がリンクの目的を表すときは、alt属性へリンク先が分かる代替テキストを書きます。
<a href="contact.html">
<img src="contact-button.png" alt="お問い合わせページへ移動">
</a>画像だけに文字を入れると、拡大時にぼやけたり、文言を修正しにくくなったりします。通常はテキストのa要素をCSSで装飾する方法が、読みやすさと管理のしやすさの両面でおすすめです。
HTMLのリンクボタンで避けたい書き方
button要素とa要素を入れ子にする
button要素の中へa要素を入れる書き方は避けます。どちらも利用者が操作する対話型コンテンツであり、入れ子にするとクリックやキーボード操作が不安定になるためです。
<!-- 避けたい書き方 -->
<button>
<a href="about.html">詳しく見る</a>
</button>ページ移動が目的なら、a要素だけを使ってCSSで装飾すれば十分です。
onclickだけでページを移動する
<button onclick="location.href='about.html'">でもページは移動します。しかし、JavaScriptが必要になり、リンク先URLのコピーや新しいタブで開く操作など、a要素が備える機能を自然に利用できません。
JavaScriptの処理を実行する本来のボタンとして使う場合は、type="button"を明記します。フォーム内のbutton要素は、typeを省略すると送信ボタンとして動く場合があるためです。
リンク先が分からない文言にする
「こちら」「クリック」のような文言だけでは、リンクだけを読み上げたり一覧表示したりしたときに移動先が分かりません。「料金プランを見る」「お問い合わせへ進む」のように、行き先や目的を具体的に書きます。
リンクボタンが動かないときの確認ポイント
hrefのスペルと半角の引用符を確認する- リンク先のファイル名と大文字・小文字が一致しているか確認する
- 現在のHTMLファイルから見た相対パスになっているか確認する
a要素の開始タグと終了タグがそろっているか確認する- HTMLとCSSを保存してからブラウザを再読み込みする
特に多い原因はパスの間違いです。同じフォルダーならabout.html、1つ上の階層なら../about.htmlのように、現在のHTMLファイルを基準に考えます。
HTMLファイルの保存とブラウザでの確認方法が分からない場合は、次の記事で手順を確認できます。
HTMLのリンクボタンでよくある疑問
HTMLだけでリンクをボタン風にできますか？
HTMLだけでもリンクは作れますが、背景色・余白・角丸などのデザインにはCSSが必要です。ページ移動という機能をHTML、ボタンらしい見た目をCSSが担当すると考えると分かりやすいです。
input要素をリンクに使ってもよいですか？
input type="button"とJavaScriptを組み合わせても移動できますが、通常のリンクには向きません。input要素はフォーム部品なので、ページ移動にはa要素を使います。
リンクボタンの幅を画面いっぱいにできますか？
できます。.link-buttonへdisplay: flexとwidth: 100%を指定します。ただし、親要素より横幅が広がらないよう、必要に応じてbox-sizing: border-boxも指定してください。
リンクボタンの文字色が変わるのはなぜですか？
ブラウザや既存CSSの:visitedスタイルが適用されている可能性があります。必要なら.link-button:visited { color: #ffffff; }のように、訪問済みリンクの文字色も指定します。
まとめ
HTMLでページ移動用のボタンを作る基本は、<a href="リンク先">をCSSでボタン風に整える方法です。リンクの機能はa要素、見た目はCSSに分けると、JavaScriptを使わずに分かりやすいコードを書けます。
- 別ページやページ内の場所へ移動するなら
a要素を使う - フォーム送信や画面内の処理には
button要素を使う button要素とa要素を入れ子にしない- リンク文言で移動先や目的を具体的に伝える
- 押しやすい余白とキーボード操作時のフォーカス表示を用意する
まずはabout.htmlのような短いリンク先で試し、表示とページ移動を確認してみてください。動作を確認できたら、色や余白を変更してサイトに合うリンクボタンへ仕上げられます。