CSSの疑似クラスを使ってテキストリンクに色々と装飾してみましょう

テキストリンクにマウスを乗せたりクリックしたりすると、テキストの色が変わったり、アンダーラインが消えたりとアクションがあるとサイトを利用するユーザーは解りやすくて親切に感じるものです。
疑似クラスを使ってテキストリンクを装飾してみましょう。

1 マウスを乗せた時にCSSを適用する
2 未訪問（クリック前）のリンクの色を変更する
3 訪問済み（クリック済み）のリンクの色を変更する
4 リンクを押し始めて離す間までリンク色を変更する
5 まとめ
6 CSSコーディングのオススメ本

マウスを乗せた時にCSSを適用する

CSSを記述する外部ファイルを作成します。
このファイルを読み込む事で、ページにCSSが反映します。

テキストリンクにマウスを乗せた時にスタイルを変化させるのは「hover」という疑似クラスを使用します。

※疑似クラス・・・CSSに付け加えてデザインの適用方法を増やすことができるもの。

マウスを乗せたら色を変える

テキストリンクにマウスを乗せた時に色を変えてみましょう。

HTML

<a href="リンク先URL">テキストリンクを変化</a>

CSS

a:hover{
　color: #ff0000;
}

「:hover」を付ける事で「マウスを乗せた時に」という意味になり、「color: #ff0000;」で色を赤に変えるという意味になります。

アンダーラインを消す

テキストリンクを貼るとデフォルトでアンダーラインが付きます。
マウスを乗せるとボーダーが消える様に設定してみましょう。

HTML

<a href="リンク先URL">テキストリンクを変化</a>

CSS

a:hover{
 text-decoration: none;
}

「:hover」を付ける事で「マウスを乗せた時に」という意味になり、「text-decoration」で「テキストの装飾は」、「none（無し）」という意味になります。

マウスを乗せた時だけアンダーラインを表示する

通常はボーダーを消し、マウスを乗せた時だけボーダーを表示してみましょう。

HTML

<a href="リンク先URL">テキストリンクを変化</a>

CSS

a{
　text-decoration: none;
}

a:hover{
　text-decoration: underline;
}

最初に「a」に付く「text-decoration: none;」でアンダーラインを消して、マウスを乗せた時に「text-decoration: underline;」でアンダーラインを表示する様にしてみました。

マウスを乗せた時にアンダーラインを点線にする

アンダーラインはデフォルトで一本線なのですが、マウスを乗せた時に点線に変えてみましょう。

HTML

<a href="リンク先URL">テキストリンクを変化</a>

CSS

a{
　text-decoration: none;
}
		
a:hover{
　text-decoration: underline dotted;
}

最初に「text-decoration: none;」でボーダーを消して、マウスを乗せた時に「text-decoration: underline dotted;」でアンダーラインを点線表示（dotted ）する様にしてみました。

未訪問（クリック前）のリンクの色を変更する

HTML

<a href="リンク先URL">クリック前の色を変更</a>

CSS

a:link {
　color: #0000FF;
}

リンク前の色を青色（color: #0000FF;）に変えてみました。
大体はサイト全体のリンクカラーは統一する事が多いと思いますので、「:link」を使う機会は少ないかもしれません。

訪問済み（クリック済み）のリンクの色を変更する

一度クリックしたテキストリンクの色を変える事で、ユーザーがどのリンクをクリックしたか解りやすくなります。
疑似クラス「:visited」を使って訪問済みリンクを設定しましょう。

HTML

<a href="リンク先URL">クリック後を変更</a>

CSS

a:visited{
　color: #ff0000;
}

最初の見た目では解りませんが、一度クリックした後に再度見てみるとテキストリンクが赤色になっています。

リンクを押し始めて離す間までリンク色を変更する

リンクを押した時だけ変更をするには疑似クラス「:active」を使用します。

HTML

<a href="リンク先URL">押した時だけ色を変更</a>

CSS

a:active{
　color: #ff0000;
}

クリックを押してる間だけで赤色になる様に設定しました。

まとめ

リンクの疑似クラスは必須ではありませんが、ユーザーがサイトを利用する際に使いやすい様に、マウスを乗せた時など見た目で解る仕組みがあると親切なサイトになりますね。

CSSコーディングのオススメ本

CSS辞典第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。