文字リンクでも画像リンクでも、通常のリンクではリンク範囲が狭くクリックやスマートフォンでのタップがしづらいなんてことはないでしょうか！？
というわけで、今回はCSSでリンクの範囲を広げる方法をご紹介します☆
paddingとdisplay:block;でリンク範囲を広げよう！
【HTML】
<a href="link.html">テキストリンク</a>
上のようにHTMLを書いた場合、リンク範囲は下のようになります。(分かりやすくリンク範囲にピンクの背景色をつけています！)
リンク部分が小さすぎるとスマートフォンなんかではタップがしづらくて仕方がありませんよね。
そんな時はpaddingとdisplay:block;でリンク範囲の広いクリックしやすいリンクを作りましょう！作り方はとっても簡単です。
【CSS】
a {
padding: 10px;
display: block;
}
上のように、aタグにpaddingとdisplay:block;を入れるとリンク範囲が下のように、こんなにも広がるんです！
横幅いっぱいにリンク範囲が必要ない場合はpaddingを入れるだけでもリンク範囲を広げることができます。下はpaddingのみ入れています。
以下はpaddingとdisplay:block;でリンク範囲が広がる解説です！
ブロックレベル要素とインライン要素
HTMLの要素にはブロックレベル要素とインライン要素というものがあり、aタグはインライン要素になります。
display:block;を使うことでインライン要素のaタグをブロックレベル要素のような扱いにすることでリンク範囲が横幅いっぱいになるというわけです。
paddingを入れることで縦幅も広がり更にクリックしやすいリンクにすることができます☆
スマートフォンサイトのリンク作成時なんかにはとっても便利ですよ！
あとがき
この記事の内容とは全く関係ないんですが、今回Syntax Highlighterを使ってソースコードを表示させたかったのですが、何でだかうまく表示されずに悪戦苦闘。
結局解決しなくてそのまま記事を書きました。割と簡単そうだったのに、残念ーーー。
また挑戦してみようと思います！
追記
Syntax Highlighterですが、プレビューの段階では出ていなったのに、記事を公開した途端に表示されました！ビックリした～
何はともあれ成功していたようです。
Syntax Highlighterについてはまた後日書きます☆
2014.3.17追記
一時、こちらのミスで説明のリンク部分にCSSがきいていなかったようです。申し訳ありませんでした。
現在は修正が完了しております！
0 件のコメント:
コメントを投稿