ホーム(記事一覧)へ

CSSでリンクエリア・クリック範囲を広げる方法

普通にaタグでリンクを作ると文字部分しかクリックできません。

クリック範囲が狭いと一回でクリックできずストレスを与えてしまうかもしれません。

CSSでリンクエリア・クリック範囲を広げる方法を解説します。

【通常】クリック範囲が文字部分だけ

下記はふつうにaタグでリンクを作った例です。とくに2行になったとき、文字と文字の間がクリックできません。

リンク
リンク
<style>
.example{
    line-height: 2;
}
</style>
<a href="#" class="example">リンク<br>リンク</a>

【文章中のリンクなら】display:inline-block

下記はaタグに「display:inline-block」を指定した例です。2行にしても文字と文字の間もクリックできます。

リンク
リンク
<style>
.example2{
    display: inline-block;
    line-height: 2;
}
</style>
<a href="#" class="example2">リンク<br>リンク</a>

下記は文章中のリンクのクリック範囲を広げた例です。

長い文章中のリンクでもクリック範囲を広げられます。
<style>
.example3 a{
    display: inline-block;
    padding: 0.5em;
    margin: -0.5em;
}
</style>
<div class="example3">長い文章中の<a href="#">リンク</a>でもクリック範囲を広げられます。</div>

paddingを使用することでクリック範囲を広げることができます。しかしそのままではリンクが文章と離れてしまうため、マイナスmarginでプラスマイナス0にしています。

【単体のリンクなら】display:block

リンクの前後に文章がなくリンクがメインならdisplay:blockを指定してしまうのも有効です。

一覧のタイトルリンクなど
<style>
.example4{
    display: block;
    padding: 0.5em;
}
</style>
<a href="#" class="example4">一覧のタイトルリンクなど</a>

display:blockを指定すると文字の範囲ではなく横いっぱいをリンク範囲にできます。

リンク一覧など文章のサイズがマチマチな場合でもリンク範囲を統一できます。

もちろんwidthで範囲を指定することも可能です。

paddingでさらにクリック範囲を広げましょう。marginではクリック範囲が広がらないので注意です。

aタグの中にdivなどいれてもいい

aタグはインライン要素であるため本来はdivなどのブロック要素をいれることはできませんでした。

しかしhtml5からaタグの中にdivなどもいれていいようになりました。

これにより大きいサイズのボタンなども作りやすくなりました。

詳しい方法は下記記事をご覧ください

【まとめ】クリック範囲を広げる方法

【文章中のリンクなら】display:inline-block

【単体のリンクなら】display:block

いずれもpaddingでさらにクリック範囲を広げましょう。

以上、CSSでリンクエリア・クリック範囲を広げる方法でした。

関連記事