カテゴリー:
CSS
タグ:
 css リンク link

このエントリーをはてなブックマークに追加
更新日時:
2014年05月15日(木)
作成日時:
2014年05月15日(木)

前の記事 / 次の記事

最近まではリンクをクリックできる領域広げるなら単に文字大きくすればいいんじゃない?
って思ってて全く気にすることはなかったんだけど、レスポンシブ脳になってきたら
文字のサイズは変更したくないけどクリックできる領域だけ広げたい、と思いました。

参考:リンクのクリック範囲を広げる:CSS小技

結論から言うとインライン要素やめればいいんじゃね?ってことで。

<a href="index.html" class="a-expanded">なんか一覧</a>
:sass
  .a-expanded
    display:       inline-block
    padding-left:  10px
    padding:right: 10px

とか。
inline-blockじゃなくてblockでも構わない。
要はa要素にpaddingを付与できればなんでもいい。

blockにした場合は自動的に領域が広がるからpadding付けなくても
クリックできる領域広がるけど、思わぬ場所でクリックできたりしてしまうので
その場合でもpaddingを付与しておいた方がいいと思う。