こんにちは！ProgRiroです。
本日のテーマは「div要素いっぱいに a要素のリンク範囲を広げてボタンを作る」です。
div要素でa要素を囲んでボタンを作成した時に、div要素いっぱいにa要素のリンク範囲を広げる方法を紹介します。div要素にCSSを適用して、ボタンをオシャレにしつつ、a要素のリンク範囲を広げます。
まずはじめに、完成したボタンをご覧ください。
完成したボタン
上の例では、ボタンの範囲いっぱいまでリンクを広げることができています。
単純なa要素でのリンクは、文字だけになってしまい見栄えは良くありません。そのため、CSSでデザインしたボタンを作成することで、ウェブサイト全体の見栄えも良くなります。
実際のコード
先ほどの例で作成したボタンのHTMLとCSSのコードです。コピペしてすぐに使えます。
どのようにして作っているかの解説は後述しているので、時間のある方はご覧ください。
1 2 3 | <div class="btnBox"> <a href="#">Button</a> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .btnBox{ width: 200px; margin: 0 auto; background-color: #fff; border: 5px solid #3498db; border-radius: 10px; } .btnBox > a{ display: block; width: 100%; padding-top: 20px; padding-bottom: 20px; text-align: center; text-decoration: none; font-weight: bold; color: #3498db; } |
コードの解説
ここから、コードの解説をしていきます。どのようにして全体にa要素のリンクを広げているかを学習していきましょう。
まず、上で示したCSSには見栄えを良くするためのスタイルも含まれているので、デザイン部分にはコメントで「design」と示したものを以下に載せておきます。
つまり、デザイン部分を変更してもa要素が全体に広がる状態は保持されるので、自分好みのデザインに変更可能です。
1 2 3 | <div class="btnBox"> <a href="#">Button</a> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .btnBox{ width: 200px; margin: 0 auto; //design background-color: #fff; //design border: 5px solid #3498db; //design border-radius: 10px; //design } .btnBox > a{ display: block; width: 100%; padding-top: 20px; padding-bottom: 20px; text-align: center; //design text-decoration: none; //design font-weight: bold; //design color: #3498db; //design } |
まず、a要素の親要素である「.btnBox」に横幅(width)を与えます。この幅が、a要素のリンク範囲の幅になります。
次に、a要素をブロック要素に変更します(a要素の初期値はインライン要素)。CSSでは「display: block」に該当します。こうすることで、a要素に横幅(width)を指定できるようになり、「width: 100%」と指定して、親要素いっぱいにリンク範囲を広げることができます。
最後に、a要素にpaddingを指定することで、親要素の高さいっぱいにリンク範囲を広げることができます。
※ 今回の解説では、デザイン部分は省いています。
まとめ
今回は「div要素いっぱいに a要素のリンク範囲を広げてボタンを作る」をテーマに、リンク範囲がいっぱいに広がっているボタンを作成する方法を解説しました。
これはどんなサイトでも使えるので、この機会に習得して見栄えのいいサイトを作成していきましょう。
最後までお読みいただき、ありがとうございました。
