CSSでリンクの下線を消す
CSSでリンクの下線を消す
通常、html内でリンクを指定されたテキストには下線が引かれます。
下線があるとリンクの場所がわかりやすくていいのですが、デザインの関係でこのリンクの下線を消したいこともあるでしょう。
多くのサイトでみかける、普段はリンクの下線を消しておき、オンマウス時（マウスカーソルがテキストの上にきた時）だけ下線を表示するCSSを紹介します。
ついでに、「リンクテキスト・訪問済みリンク・オンマウス時」の色も指定しておきましょう。
a:link {
color:#0000cc;
text-decoration: none;
}
a:visited {
color:#cc0000;
text-decoration:none;
}
a:hover {
color:#6666cc;
text-decoration:underline;
}
「a:link」はリンクテキストの普段の状態です。ここで下線を消しています。
「a:visited」は訪問済みのリンクテキストです。ここも下線を消しています。
「a:hover」はオンマウス時のリンクテキストです。ここでは下線を表示します。
この３つの順番は重要なので、順番を変えてはいけません。
なお、colorはテキストカラーの指定なので好きな色にしてくださいね。
|
