目次
- はじめに：ボタンって結局どのタグを使えばいいの？
- 結論：「何をするボタンか？」でタグが決まる
- aタグ（アンカー）の役割
- こんなときは a を使うべき
- 基本形
- なぜリンクが「a」なの？
- buttonタグの役割
- こんなときは button を使うべき
- 基本形
- type属性は超重要
- よくある間違い（初心者がハマりやすいポイント）
- ページ遷移なのに button を使う
- JavaScript操作なのに a を使う
- aタグでボタン風にしたいときのCSS例
- buttonタグでボタンとして使う場合のCSS例
- まとめ（今日覚えるべき重要ポイント）
- ページ遷移する → aタグ
- ページ遷移しない → buttonタグ
- 見た目はCSSで自由に作れる
- 正しいタグ選びはSEO・アクセシビリティ的にも重要
- 最後に
はじめに：ボタンって結局どのタグを使えばいいの？
Web制作をしていると必ず出てくる疑問。
「このボタンは button で作るべき？ それとも a？」
見た目は同じでも、意味（役割）がまったく違います。
ここを理解しておくと、SEOにもアクセシビリティにも強いコーディングができます。
結論：「何をするボタンか？」でタグが決まる
- ページ遷移する → aタグ
- ページ遷移しない → buttonタグ
この基準さえ覚えればOKです。
aタグ（アンカー）の役割
ページを移動させるためのタグ。
こんなときは a を使うべき
- 別ページに移動
- サイト内リンク（/about や #section）
- 外部リンク（Google、SNSなど）
- メールリンク（mailto）
- 電話リンク（tel）
基本形
<a href="/contact" class="btn">お問い合わせ</a>なぜリンクが「a」なの？
- ブラウザやスクリーンリーダーが「これはリンク」と判断できる
- SEO的にも「リンク構造」として扱われる
buttonタグの役割
フォーム送信・JavaScript操作・UI操作に使うタグ。
こんなときは button を使うべき
- フォーム送信
- モーダル開閉
- スライドメニュー開閉
- タブ切り替え
- JavaScriptのイベント実行のみ
基本形
<button type="button" class="btn">メニューを開く</button>type属性は超重要
type="submit"→ フォーム送信type="button"→ JS操作用（デフォルトにするべき）type="reset"→ 入力リセット
よくある間違い（初心者がハマりやすいポイント）
ページ遷移なのに button を使う
<button onclick="location.href='/about'">会社概要</button>→ これはNG
理由：スクリーンリーダーが「ボタン」と誤認 → UX低下
SEO的にもリンクと認識されない。
JavaScript操作なのに a を使う
<a href="#" class="menu-btn">メニュー</a>→ ページトップに戻ってしまう・役割が不適切
UI操作なら button が正解。
aタグでボタン風にしたいときのCSS例
.btn {
display: inline-block;
padding: 12px 24px;
background: #4087BF;
color: #fff;
text-decoration: none;
border-radius: 6px;
}
.btn:hover {
background: #2e6a9d;
}buttonタグでボタンとして使う場合のCSS例
.btn {
padding: 12px 24px;
background: #4087BF;
border: none;
color: #fff;
border-radius: 6px;
cursor: pointer;
}
.btn:hover {
background: #2e6a9d;
}まとめ（今日覚えるべき重要ポイント）
ページ遷移する → aタグ
ページ遷移しない → buttonタグ
見た目はCSSで自由に作れる
正しいタグ選びはSEO・アクセシビリティ的にも重要
この基準を守るだけで、あなたのHTMLは プロ品質 に近づきます。
最後に
HP Build Studio の制作実績ページやお問い合わせページのように、
「遷移型のボタン」＝ aタグ
「操作型のボタン」＝ buttonタグ
を明確に分けると、サイト全体の設計が美しくなります。