Webデザイン

ボタンなどの「a」タグを「div」で囲んで枠幅いっぱいのアンカーリンクで選択する方法[初心者向け・CSS]

2019年10月1日

webサイトを運営していると、アンカータグ(いわゆる「a」タグ)を使用して、文字にリンクを貼るという事があります。

しかし、そのまま文字にリンクを貼っただけでは「a」タグリンクは文字にのみしかかかりません

この場合、例えば「ボタン」など作成したい場合は大変押しづらい状況になります。ですので、文字を囲っている枠幅いっぱいでリンクを貼る方法を紹介致します。

HTMLを用意する

「a」タグを囲んで枠幅いっぱいで選択する方法の前提として、例えば「p」タグだけで

<p>文字リンク</p>

となっている場合、幅いっぱいにリンクを貼るケースというのはあまり考えられません。ですので今回想定するのは、「a」タグを「div」などで囲っている場合になります。

コードで表すと、

<div class="link_100">
<a href="リンクソース">リンクで飛ばしたい文字列</a>
</div>

というのが考えられます。

class名「link_100」はわかりやすいように、任意の文字をつけています。

しかし上記のコードの場合、文字列にしかリンクは当たらず、残りはマウスを当てても反応しません

ですのでコレを、「CSS」を記述して回避させます。

「CSS」を記述しよう

「CSS」を書いていきます。

.link_100 a{
display: block;
}

これだけでOKです。

囲っている親要素「div」の直下の「a」タグに「display: block;」にあてるだけで全体をリンクする事ができます。

関連記事 display:CSS

まとめ

文字列のリンク作成で、例えば「div」タグで囲ったボタンなどを作りたい場合は、親要素「div」の直下の「a」タグに「CSS」で「display: block;」をあてると全体をリンク化する事ができます

あとは 「padding」で余白、「color」で色を付け、「text-align: center;」でセンター合わせ、「hover」でマウスオン時の動作などの装飾していけばボタンのようなものを簡単に作る事ができます。

「CSS」の基本動作になりますので、初心者の方は是非習得していきましょう。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.