スマートフォンで押しやすいボタン型リンクを作るCSS

スマートフォンは、主に指で画面に触れて操作します。リンクを大きめの「ボタン型」に装飾しておくと、指で押しやすいリンクになるでしょう。例えば、右図のようにです。

これは、「ボタンに見える」よう装飾しただけで、リンクそのものは（普通のリンクと同様に）HTMLの「a要素」で作っています。CSS3で加わったいくつかのプロパティを用いれば、このようにボタンに見えるよう装飾できます。

リンクをボタン型に装飾した例

HTMLでリンクを作る際は、以下のようにa要素を使って記述します。

これは<a href="xxx">リンク</a>です。
「a要素」で作った<a href="xxx">普通のリンク</a>です。

上記のソースをブラウザで表示させれば、下図の左側のように見えます。これにCSSで装飾を加えると、下図の右側のように見せられます。


ページ内のあらゆるリンクをボタン型にしている上図は、装飾効果を紹介するための極端な例です。ここまですると、逆に読みにくくなってしまうでしょう。しかし、重要なリンクや、ナビゲーションとしての役割を果たすリンクに限って「ボタン型」に装飾しておけば、指で操作するスマートフォンでも押しやすいリンクになり、使いやすいサイトになるでしょう。

今回は、このように「a要素で作ったリンク」にCSSで装飾を加えて、大きなボタン型に見せる方法をご紹介致します。スマートフォン用に作ったサンプルですが、PC用サイトでも活用できます。

それでは、装飾に使うCSSソースを見てみましょう。