【HTML】コピペOK！div要素いっぱいにa要素のリンク範囲を広げてボタンを作る

こんにちは！ProgRiroです。

本日のテーマは「div要素いっぱいに a要素のリンク範囲を広げてボタンを作る」です。

div要素でa要素を囲んでボタンを作成した時に、div要素いっぱいにa要素のリンク範囲を広げる方法を紹介します。div要素にCSSを適用して、ボタンをオシャレにしつつ、a要素のリンク範囲を広げます。

まずはじめに、完成したボタンをご覧ください。

Contents

完成したボタン
実際のコード
コードの解説
まとめ

完成したボタン

上の例では、ボタンの範囲いっぱいまでリンクを広げることができています。

単純なa要素でのリンクは、文字だけになってしまい見栄えは良くありません。そのため、CSSでデザインしたボタンを作成することで、ウェブサイト全体の見栄えも良くなります。

実際のコード

先ほどの例で作成したボタンのHTMLとCSSのコードです。コピペしてすぐに使えます。

どのようにして作っているかの解説は後述しているので、時間のある方はご覧ください。

<div class="btnBox">
    <a href="#">Button</a>
</div>

<a href="#">Button</a>

</div>

.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;
}

.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要素が全体に広がる状態は保持されるので、自分好みのデザインに変更可能です。

<div class="btnBox">
    <a href="#">Button</a>
</div>

<a href="#">Button</a>

</div>

.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
}

.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を指定することで、親要素の高さいっぱいにリンク範囲を広げることができます。

※ 今回の解説では、デザイン部分は省いています。