リンクをCSSで「ボタン型」に装飾

リンクをCSSで「ボタン型」に装飾

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

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


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

HTMLでリンクを作る際は、以下のようにa要素を使って記述します。
これは<a href="xxx">リンク</a>です。
「a要素」で作った<a href="xxx">普通のリンク</a>です。

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

スマートフォン上でリンクをボタン型に装飾した例 (Android2.2)

スマートフォン上でリンクをボタン型に装飾した例 (Android2.2)


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

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

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