CSS：aタグを親要素いっぱいに広げる方法

リンクを設置するのにほぼ100％登場してくるのが aタグ。

aタグで囲ったテキストは、デフォルトでは下線が引かれてそのテキスト部分だけクリックできるようになります。

ではたとえば

<div class="btn">
  <a href="#!">ここをクリック</a>
</div>

こんなコードがあったとして

.btn{
  width: 240px;
  background: #eca9c7;
  height: 50px;
  border-radius: 20px;
  text-align: center;
  line-height: 50px;
}
a{
  color: #333;
}

こんなスタイルをつけたとしましょう。

ここをクリック

この場合、周りのピンクのエリアもクリックできるようにしておきたいですよね。
aタグに何もしないで.btnにスタイルをつけてしまうと、上記のように文字しかクリックできない「なんちゃってボタン」になってしまいます。

じゃあ今.btnについているスタイルを全部aタグにつけたらいいのね！と思いやってみると

.btn{
}
a{
  color: #333;
  width: 240px;
  background: #eca9c7;
  height: 50px;
  border-radius: 20px;
  text-align: center;
  line-height: 50px;
}

ここをクリック

せまーーーい！

widthとheightを指定しているのに効きません。

これらの挙動の原因は、aタグがインライン要素であることが挙げられます。

インライン要素についてはそのうち記事を書くかもしれません…が説明サイトもいっぱいあるので見てみるといいかも。

ということで、これの解消方法はaタグをブロック要素にすること。

最初のコードと2つめのコードどちらもaタグをdisplay:block;にしてみましょう。

.btn{
  width: 240px;
  background: #eca9c7;
  height: 50px;
  border-radius: 20px;
  text-align: center;
  line-height: 50px;
}
a{
  color: #333;
  display: block;
}

ここをクリック

.btn{
}
a{
  color: #333;
  width: 240px;
  background: #eca9c7;
  height: 50px;
  border-radius: 20px;
  text-align: center;
  line-height: 50px;
  display: block;
}

ここをクリック

どちらの場合も良い感じにボタン全体がクリックできるようになりましたね！

aタグ自体にスタイルをつけるか親要素にスタイルをつけるかは好みに依って来るのかなと思います。

aタグが思ったように広がらない場合は、インライン要素のままになってないかチェックしてみましょう～～

よいaタグライフを！

Pocket