aリンクを親要素いっぱいに広げる方法

更新日:2019.04.18

下記のようなデザインのリンクを作成する場合，ユーザビリティや使いやすさ，クリック率をあげるため，枠の中ならどこをクリックしてもリンクに飛ぶようにしたいですよね．

しかし，a要素でリンクを作成した場合，リンクを押すにはテキストの上をしっかりクリックしないといけません．

HTML
<div>
    <a href="">テキストリンク(a要素)</a>
</div>

CSS
div{
    border-radius: 3px;
    border: 2px solid #bbbbbb;
    width: 400px;
    height: 120px;
    text-align: center;
}

a{
    color: #777777;
    line-height: 120px;
}

そこで，a要素を親要素全体に広げる方法を解説します．

まず，親要素にpaddingが設定されている場合，それを0にします．

padding: 0;

そして，a要素をdisplay: block;でブロック要素にして，widthとheightをそれぞれ100%にします．

display: block;
width: 100%;
height: 100%;

こうすることによってa要素が親要素と同じサイズになり，枠内全てがリンクになります．

テキストリンク(a要素)

HTML
<div>
    <a href="">テキストリンク(a要素)</a>
</div>

CSS
div{
    border-radius: 3px;
    border: 2px solid #bbbbbb;
    width: 400px;
    height: 120px;
    text-align: center;
    padding: 0;
}

a{
    color: #777777;
    line-height: 120px;
    display: block;
    width: 100%;
    height: 100%;
}

turutani.com

aリンクを親要素いっぱいに広げる方法

プロフィール

コメントフォーム