こんにちは、ゆんつです。
Webページを閲覧していると、こんな感じのボタンをよく見かけます。
クリックすると、どこか別のページにジャンプしたり、同じページ内のどこかにジャンプしたりします。（このボタンは画像なのでクリックしても何も起こりません）
ボタンのどの部分をクリックしても有効で、ボタンの真ん中はもちろん端っこをクリックしてもちゃんと動作します。
このようなボタンdiv要素の中にa要素を入れることで作ることができます。
そこで今日は、aタグを親要素一杯に広げてどこをクリックしても有効なボタンを作る方法について自分への備忘を兼ねて書いておきます。
基本形
See the Pen
JxpLLm by konpure (@yuntu)
on CodePen.
子要素であるa要素をdisplay: blockでブロックレベルにしています。
これによりa要素にwidthとheightが設定できるようになります。
親要素一杯までa要素を広げるのでwidthとheightの値は100%。
これで親要素と同じ大きさのa要素が出来ます。
これによりボタンのどこをクリックしても有効なリンクができます。
発展形
先ほどの場合は親要素にpaddingが設定されていませんでした。
親要素にpadding: 10pxを設定してみます。
See the Pen
gqvejp by konpure (@yuntu)
on CodePen.
このボタン。
フチをクリックしても何も起こりません。
親要素で設定したpaddingの部分まではa要素が広がっていないからです。
そこで親要素にposition：relative、子要素にposition:absoluteを設定します。
See the Pen
PVQRyZ by konpure (@yuntu)
on CodePen.
すると親要素と全く大きさの子要素が出来上がりますが、paddingの分だけa要素が右下にズレています。
ですのでリンクの有効範囲が親要素からずれてしまい、ボタンの左端はクリックしても何も起こりませんし、逆にボタンの右下からほんの少し離れたボタンじゃない場所をクリックしてもリンクが機能してしまいます。
そこで位置の調整のためa要素の位置（positon）をtop:0、left:0にして親要素の左上とピッタリ合わせます。
See the Pen
gqveZa by konpure (@yuntu)
on CodePen.
すると、親要素の左上に子要素がぴったりと合い、親要素にpaddingが設定されていてもa要素が親要素一杯になって、ボタンとリンクの有効範囲が重なりどの部分をクリックしても有効になります。
見た目も整える
先ほどのボタンなんですが、文字が左上です。
やはりボタンのど真ん中にあるほうが見た目がいいので、文字を縦横センタリングします。
See the Pen
JxpLWB by konpure (@yuntu)
on CodePen.
text-align: centerで横位置のセンタリングを行い、line-heightで縦位置のセンタリングを行っています。
line-heightの値は親要素のheight+親要素の上下方向のpadingです。
今回のケースなら親要素のheight30px + 親要素の上下方向のpading(10px+10px)=50pxにすることでボタンのど真ん中に文字が配置されます。
あとは文字色やborder-radiusでボタンに丸みをつけたり、hoverなどでボタンを装飾するだけです。
一度やり方を覚えてしまえば簡単ですね。
それでは、またー。
コメント