Webサイトをデザイン・制作するときには、必需ともいえるリンクの色や下線などの装飾の設定。

CSSが設定されていないリンクのデフォルト設定は、こんな感じです。

訳あって画像ですが、青と紫っぽい色で下線が引いてある、デフォルト設定だけに目にする機会は多いと思います。

今回は、そんなリンクの色や装飾をカスタマイズするポイントをメモっていこうかと思います。

4つ？2つ？の疑似クラスを覚えておこう

まずは、リンクの色や装飾の指定には、疑似クラスを使います。

疑似クラスというと難しく聞こえますが、ここでは「:link」、「:visited」、「:hover」、「:active」の4つを使うんだよ～ということだけ覚えておきましょう。

最後の方で紹介していますが・・・むしろ「:visited」、「:hover」だけ覚えておけばいいかもしれない感じです。

リンク色を指定する

ということで、先ほどの疑似クラスと「a」という文字を組み合わせて、リンク色を設定していきます。

a:link{
  color: #ff0000;
}
a:visited{
  color: #00ff00;
}
a:hover{
  color: #0000ff;
}
a:active{
  color: #800080;
}

「a:link」・・・未訪問のリンク
「a:visited」・・・訪問済みのリンク
「a:hover」・・・ポインタを重ねた（マウスオーバー）時のリンク
「a:active」・・・クリックされてから離されるまでのリンク
という風になります。

「a」という文字は、リンクを貼るときによく使うHTMLの<a href="#">の「a」です。

あとは、各該当箇所に「color: #000000;」を使って、リンク色を指定していきます。

ちなみに「#000000」は黒色を意味します。
いろんな配色については、こちらを参考にしてみてください。
WEB色見本 原色大辞典 – HTML Color Names

リンクの装飾（下線）の調整

今度は、先ほどのリンク色を設定したところに、下線を調整するCSSを書き足しました。

a:link{
  color: #ff0000;
  text-decoration: none;
}
a:visited{
  color: #00ff00;
  text-decoration: none;
}
a:hover{
  color: #0000ff;
  text-decoration: underline;
}
a:active{
  color: #800080;
}

この例では、ポインタが離れているときは下線が表示されず、マウスオーバーしたときに下線が現れる設定になっています。

「text-decoration: none;」・・・下線なし
「text-decoration: underline;」・・・下線あり
が、それにあたります。

ほかに装飾したい場合は、該当箇所に装飾のコーディングを記述します。

以前、テキスト装飾系として
「CSSを使って蛍光ペンで太い線や細い線を引いた雰囲気を出す」
「リンクテキストや文字の色がふわっと変わるCSS3と記述位置の疑問点」
などの記事も書いていますので、参考にしてみてください。

とりあえず、テキストリンクの基本として、色と下線の設定の2点を押さえておけばOKだと思います。

デモ

See the Pen link-decoration by webfeelfree (@webfeelfree) on CodePen.4259

※緑の文字で表示されていたら、デモの右下に現れる【RERUN】ボタンを押すと赤い文字に変わります。

シンプルなコーディング

a{
  color: #ff0000;
}
a:visited{
  color: #00ff00;
}
a:hover{
  color: #0000ff;
}

無駄を省いた感じのコーディングです。

説明で書いてきた例は、フルコーディング的な記述ですが、最近なのか？前々からなのか？「a:link」の部分を省略して「a」のみで指定しているサイトも多く見受けられます。

また「a:active」は、あまり使われていないようです。

どれが正解で不正解というわけではありません。
コーディングセンスの問題です。

始めからこれを紹介しろよ、コノヤローって思いますが、基本を知ってからの応用ってことで・・・。

あとがき

リンクの色が変わっているデザインには、例のような記述が必ずあります。
自分らしいWebサイト作りへのカスタマイズに使ってみてはいかがでしょうか？

もちろんブログのカスタマイズなどにも使えますので、CSSに興味がある・使ってみたいという人には、はじめの一歩としてオススメのコーディングです。