リンクをデザインする

以下の3つのリンクにマウスを載せてみて下さい。 一見、サイト名部分だけがリンクのように見えますが、実際には周辺の余白も含めて、上下の文字列全体がリンクになっています。

上記のリンクでは、画像やスクリプトは一切使っていません。それぞれ、HTMLのa要素を使ってリンクを作り、スタイルシートを使って装飾することで実現しています。

このようなデザインが何の役に立つのかと問われても困るのですが、 リンクを目立たせることや、リンク範囲を広くしてクリックしやすくすることには役立つかもしれません。 実用的だからというわけではなく、スタイルシートを使えばこのような装飾も可能だという点をご紹介するための解説です。 スタイルシートを使って、いろいろデザインを工夫する際の参考にしてみて下さい。

今回は、このリンクの作り方（スタイルシートの書き方）を、順を追ってご紹介致します。

【この記事の目次】

[STEP.1] HTMLを書く
[STEP.2] ベースの装飾を作る
[STEP.3] 各部分の装飾を作る
[STEP.4] 状況に応じて色を変化させる装飾を作る
[STEP.5] 横幅を制限する場合の記述
[STEP.6] ソースのまとめ
[Appendix] ※リストを使った場合のソース

1 2 3 … 9
次のページへ