目次
- はじめに：aタグをボタンにしていいのか問題
- 結論：リンクならa、処理ならbutton
- aタグ
- buttonタグ
- aタグでボタンを作る基本構造
- なぜdisplayが重要なのか
- 基本のボタンデザイン
- hoverで「押せる感」を出す
- 横スクロールが発生する原因
- 中央寄せする方法
- 方法① ブロック化
- 方法② 親で制御
- サイズがバラつく問題
- DevToolsで確認するポイント
- hrefを空にしてはいけない理由
- NG
- 仮リンクでも最低限
- JavaScriptだけの処理なら？
- 悪い例
- アクセシビリティの観点
- SEO観点での注意
- よくある事故パターン
- レスポンシブ時の注意
- 実務チェックリスト
- まとめ：構造はa、見た目はCSS
はじめに：aタグをボタンにしていいのか問題
Web制作を始めると、一度は迷います。
- 「これ、buttonタグで作るべき？」
- 「aタグをボタンっぽくしても怒られない？」
- 「見た目はボタンだけどリンクってアリ？」
結論から言います。
ページ遷移が目的なら、aタグでOKです。
ただし「正しい理解」が前提。
なんとなく使うと、アクセシビリティや保守性で問題が出ます。
この記事では、
- aタグとbuttonタグの本質的な違い
- aタグをボタン風にする正しい設計
- CSS実装の基本
- よくある事故パターン
- スマホ崩れ・横スクロール問題の回避
まで、実務レベルで解説します。
結論：リンクならa、処理ならbutton
役割の違いはシンプルです。
aタグ
- ページ遷移
- 外部リンク
- 別ページへの移動
buttonタグ
- フォーム送信
- JavaScript処理実行
- 画面内アクション
「遷移するかどうか」で判断する。
これが原則です。
aタグでボタンを作る基本構造
<a href="/contact.html" class="btn">
お問い合わせ
</a>HTMLはこれだけ。
見た目はCSSで作ります。
なぜdisplayが重要なのか
aタグはデフォルトでインライン要素。
そのままだと、
- paddingが効きにくい
- 高さ調整が不安定
- 横スクロールの原因になることも
必ず指定します。
.btn {
display: inline-block;
}基本のボタンデザイン
.btn {
display: inline-block;
padding: 12px 24px;
background-color: #4087bf;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-size: 16px;
transition: 0.2s ease;
}hoverで「押せる感」を出す
.btn:hover {
background-color: #306a99;
}視覚的フィードバックはUXの基本です。
横スクロールが発生する原因
実務でよくあるトラブル。
- padding過多
- width固定＋小画面
- box-sizing未指定
安全策：
.btn {
box-sizing: border-box;
max-width: 100%;
}中央寄せする方法
方法① ブロック化
.btn {
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
}方法② 親で制御
.btn-wrap {
text-align: center;
}サイズがバラつく問題
文字数が違うと崩れます。
.btn {
min-width: 200px;
text-align: center;
}DevToolsで確認するポイント
崩れたら必ず見る。
- displayは適切か
- box-sizingは？
- 親要素のoverflowは？
- z-indexで覆われていないか
UIトラブルはほぼCSS。
hrefを空にしてはいけない理由
NG
<a class="btn">送信</a>hrefが無いaタグはリンクではありません。
アクセシビリティ的にも不適切。
仮リンクでも最低限
<a href="#" class="btn">実務では必ず正しいURLを入れます。
JavaScriptだけの処理なら？
悪い例
<a href="#" onclick="submitForm()">これはリンクではなくボタンです。
正解：
<button type="button">アクセシビリティの観点
aタグはキーボード操作可能。
- Tabでフォーカス
- Enterで遷移
見た目だけボタンでも、
意味は「リンク」です。
SEO観点での注意
aタグはリンク評価対象。
内部リンクならSEO的に有効。
buttonではリンク評価はされません。
よくある事故パターン
- href="#"で本番公開
- クリックできない装飾リンク
- pointer-events:noneで無効化
- 全部aタグで作る
役割の誤用が原因。
レスポンシブ時の注意
- 固定幅指定
- font-size過大
- padding過大
小画面では必ず確認。
実務チェックリスト
✔ ページ遷移用途か
✔ hrefが正しいか
✔ display指定済みか
✔ text-decoration削除済みか
✔ hover演出ありか
✔ スマホ崩れ確認済みか
まとめ：構造はa、見た目はCSS
aタグでボタンを作るのは問題ありません。
ただし、
- 役割を理解する
- CSSで正しく整える
- 無理にbuttonと混同しない
これが重要。
「遷移か、処理か」。
この基準だけは、必ず守りましょう。
ここを理解すると、
UI設計の質が一段上がります。