リンクの下線をいじる

リンクと言えば下線ですが、この下線を消したり、点線にするというテクニックです。

テクニック使用前

テクニック使用後：下線なし

テクニック使用後：点線にする

１：下線を消す場合

a{text-decoration:none;}を設定すれば基本的には消すことができます。しかし、複数のスタイルシートを読み込んでいるページでは、 スタイルシートの書き方によっては消えません。消えない場合は個々の擬似クラスにtext-decoration:none;を設定することで消せるようになります。

a:link.sample{
    text-decoration:none;
}
a:visited.sample{
    text-decoration:none;
}
a:hover.sample{
    text-decoration:none;
}

２：点線にする場合

下線を消し、代わりにボーダーを使用することで、点線にすることができます。
ボーダーの色と文字色をそろえるといいと思います。
線までの距離はpaddingで調整できます。

a.sample1{
    border-width:0px;
    border-bottom-width:2px;
    border-style:dotted;
}
a:link.sample1{
    text-decoration:none;
    border-color:#0000D4;
}
a:visited.sample1{
    text-decoration:none;
    border-color:#996699;
}
a:hover.sample1{
    text-decoration:none;
    border-color:#FF0000;
}

---

使いこなすための＋α

下線を消す場合は本文中には使わないように気をつけてください。リンク部分が分かりにくくなります。
ロールオーバーリンクと組み合わせて使うと効果を発揮すると思います。