STEP D：リンクがクリックできない／ボタン化できない

visibility_off現象

• リンクテキストの周りをクリックしても反応せず、小さな文字部分だけがクリック領域になっている
• 見た目はボタン風にしたいのに、リンク全体にスタイルが適用されず余白部分が非アクティブ化している

---

help_outline原因

<a> がデフォルトで display: inline

インライン要素は、その名の通り「行の中」に表示される要素で、文字そのものが持つ領域しか持ちません。そのため、上下の余白（margin）や、幅（width）・高さ（height）の指定が効きません。

パディングや背景色が反応しない

paddingやbackground-colorを指定しても、display: inlineのままでは、見た目上は背景色が広がっても、クリックできる領域は文字部分だけのままです。

他の要素がリンクの上に重なっている

z-index や position の設定によって、意図しない透明な要素がリンクの上に覆いかぶさり、クリックを妨げている可能性があります。

---

build対策・コード例

リンクをブロックまたはインラインブロック化

display: inline-block;を指定することで、インライン要素のように他の要素と横に並びつつ、ブロック要素のように幅・高さ・余白を持つことができます。これにより、paddingで指定した余白部分もクリック領域になります。

a.button {
  display: inline-block;     /* 余白全体をクリック可能に */
  padding: 0.8em 1.2em;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}
a.button:hover {
  background-color: #2980b9;
}

クリック領域を可視化して重なりを確認

a.button {
  outline: 1px dashed red;    /* デバッグ時のみ使用 */
}

要素の重なり順を修正

a.button {
  position: relative;
  z-index: 10;                /* 前面に表示してクリックを妨げない */
}

---

bug_reportデバッグ方法

• 開発者ツール（F12キー）でリンク要素を選択し、「Styles」や「Computed」パネルでdisplayとz-indexのプロパティが意図通りに適用されているかチェックします。
• 透過色やアウトラインを一時的に付与して、クリック領域がどこまで伸びているかを可視化します。

---

school応用ポイント：フォームボタンと統一する

フォームで使う<button>や<input type="submit">も、<a>タグのボタンと同じ見た目に揃えると、サイト全体で統一感が出てユーザーの混乱を防げます。

button, input[type="submit"] {
  all: unset;                /* デフォルトスタイルをリセット */
  display: inline-block;
  padding: 0.8em 1.2em;
  background-color: var(--color-primary);
  color: #fff;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover {
  background-color: var(--color-accent);
}

---

---