今回はCSSを使って、「aタグで作ったリンクの押せる範囲を親要素の幅と一緒にする方法」を紹介します。
実務でも頻繁に使うので、コーディング初心者の方は是非参考にしてください。
【CSS】aタグで作ったリンクの押せる範囲を親要素の幅と一緒にする方法
まずは、以下の2つのボタンを比べてみましょう。
①のボタンは、文字の上でしかaタグをクリックすることができません。
これだどユーザーが文字の上でしかクリックできず、少し使い勝手が悪いですね。
そして②のボタンは、ボタンのどの場所をクリックしてもaタグが反応していることがわかります。
②のボタンはどの位置をクリックしてもaタグが反応するので、ユーザーにとって使いやすいボタンになっています。
これから②のボタンのように、aタグの押せる範囲を親要素の幅と一緒にする方法を解説していきます。
HTML
HTMLコードはこちら。
<!-- 2つ目のボタン --> <div class="btn2"> <a href="">② ボタンをクリック！</a> </div>
btn2を持った親要素のdivタグを作り、その中にaタグを入れます。
CSS
CSSコードはこちら。
.btn2 a {
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
background-color: #333;
color: #fff;
text-decoration: none;
margin-top: 50px;
}
①のボタンは、親要素に幅200pxと高さ50pxを持たせていました。
しかし、それだとaタグが文字の上でしかクリックできません。
aタグの押せる範囲を親要素と一緒の幅にするには、aタグにまずは「display: inline-block;」を指定することがポイントです。
そうすることで、aタグはインライン要素から「インラインブロック要素」になり、aタグ自身に幅を指定できるようになります。
そして、aタグに「width: 200px;」と「height: 50px;」を指定することで、aタグの押せる範囲が広くなります。
あとはテキストの文字を上下中央揃えにして、文字色を変えたらOK。
まとめ
以上が、「aタグで作ったリンクの押せる範囲を親要素の幅と一緒にする方法」でした。
ボタンはWEBサイトで必ず出てくるパーツなので、是非コーディングできるようになっておきましょう！
