リンクをデザインする
以下の3つのリンクにマウスを載せてみて下さい。 一見、サイト名部分だけがリンクのように見えますが、実際には周辺の余白も含めて、上下の文字列全体がリンクになっています。
- いまオススメの素材やその使い方など、Web素材のお役立ち情報を紹介
All About [Web素材]
http://allabout.co.jp/gm/gt/37/
- 簡単で楽しいフラッシュの作り方から、ActionScriptのワザまでを解説
All About [Flash]
http://allabout.co.jp/gs/flash/
- 写真の加工や画像をパソコンで作って楽しむ情報やテクニックを解説
All About [CG・画像加工]
http://allabout.co.jp/gm/gt/43/
上記のリンクでは、画像やスクリプトは一切使っていません。それぞれ、HTMLのa要素を使ってリンクを作り、スタイルシートを使って装飾することで実現しています。
このようなデザインが何の役に立つのかと問われても困るのですが、 リンクを目立たせることや、リンク範囲を広くしてクリックしやすくすることには役立つかもしれません。 実用的だからというわけではなく、スタイルシートを使えばこのような装飾も可能だという点をご紹介するための解説です。 スタイルシートを使って、いろいろデザインを工夫する際の参考にしてみて下さい。
今回は、このリンクの作り方（スタイルシートの書き方）を、順を追ってご紹介致します。
【この記事の目次】
[STEP.1] HTMLを書く
[STEP.2] ベースの装飾を作る
[STEP.3] 各部分の装飾を作る
[STEP.4] 状況に応じて色を変化させる装飾を作る
[STEP.5] 横幅を制限する場合の記述
[STEP.6] ソースのまとめ
[Appendix] ※リストを使った場合のソース
