リンクの色と下線

リンクのカラーと装飾

ホームページのリンクはサイト内を自由に移動するために欠かせないものです。自由に移動するためには、リンクであることを正しくわかるようにし、ユーザビリティを高める必要があります。また、リンクの色や文字サイズなどはデザインとしても重要です。

ユーザビリティとデザイン性を同時に満たすためには、CSSを使ってリンクをデザインする必要があります。デザインするための基礎を紹介していますので参考にしてください。

リンクをクリックしてサイト内を移動しますので、リンクであることを理解してもらう必要があります。リンクの色や装飾はCSSに記述することで様々な設定を行うことができます。プロパティ要素を追加していくことによって、様々なデザインを行うことができます。

リンク設定

a:link { プロパティ } 　通常のリンク
a:visited { プロパティ }　訪問済みのリンク
a:hover { プロパティ } 　マウスを乗せたときのリンク
a:active { プロパティ } 　選択したときのリンク

■リンクの文字色：color
a:link { color: #0000ff; }とプロパティ要素を追加すると、通常のリンクカラーを#0000ffに変えることが出来ます。カラー要素は#0000ffのような色コードとblueやredのようなシステムカラーが使えます。

■リンクの背景色：background-color
a:link { background-color: #0000ff; }と追加すると、背景色を変更することができます。background-imageを追加すると背景に画像を追加することが可能です。

■リンクを装飾する：text-decoration
a:link { text-decoration : underline ; }と追加すると、リンクには下線をつけることが出来ます。何も装飾を加えない場合は、a:link { text-decoration : none ; }のようにnoneと記述します。装飾の種類は以下のものがあります。
・none　装飾しない
・underline　下線を表示
・overline　上線を表示
・line-through　打ち消し線
・blink　点滅
・inherit　親要素から継承

■リンクの文字を太字にする：font-weight
リンクであることを強調したい場合は、太字にすることも有効です。太字はfont-weightでboldを用います。a:hover { font-weight : bold ; }と記述した場合、マウスがあたると太字に変化することができます。

関連記事

• W3C CSS 検証サービス
• 引用符を使ったblockquoteのデザインとCSS
• 書籍「HTML+CSS Handbook 3rd Edition」
• タグクラウドを設置