aタグ内の文字色
aタグで囲んだ部分の文字色（colorプロパティ）はブラウザのデフォルトCSSであらかじめ設定されています。文字色を変更する場合はaタグにcolorプロパティを直接指定する必要があります。
<p><a href="index.html">トップへ戻る</a></p>
/* p要素で指定しても色が変わりません。 */
p{
color: #333333;
}
/* a要素をセレクタにすると色が変わります */
p a{
color: #333333;
}
aタグ内のテキストの下線
aタグで囲んだ部分は下線が付きます。これはブラウザのデフォルトCSSでtext-decoration: underline;が指定されているためです。下線なしの場合はtext-decoration: none;で指定します。
下線はリンクを示すために使用するものです。text-decorationプロパティは他の要素でも指定できますがユーザーが混乱するので使わないようにしましょう。
/* カーソルが重なった時に下線を表示 */
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
aタグ内の画像の枠線
aタグでimgタグを囲むと古いバージョンのブラウザでは1pxの青色のborderが付きます。これはブラウザのデフォルトCSSでborderプロパティが設定されているためです。リセットCSSであらかじめimg要素のborderをなしに設定しておきます。
/* aタグ内の画像の枠線をリセット */
a img{
border: none;
}
擬似クラス
:（コロン）から始まる4つの特殊なクラスです。主にa要素で使用します。
- :link ･･･未訪問リンク
- :visited ･･･訪問済みリンク
- :hover ･･･カーソルが重なった時
- :active ･･･クリックしてから離される時まで
擬似クラスはセレクタに続けて指定します。半角スペースを入れると無効になります。
/* aと:hoverの間に半角スペースが入った場合は無効 */
a :hover{
color: #B22222;
}
/* 正しい指定は半角スペースを入れない */
a:hover{
color: #B22222;
}
擬似クラスではcolor、background-color、text-decorationなどを指定します。擬似クラスは優先順位があります。下記の通りの順番で指定しないと他の擬似クラスで上書きされてしまいます。
<p><a href="#">リンクテキスト</a></p>
a:link{
color: #0000FF;
}
a:visited{
color: #00BFFF;
}
a:hover{
color: #B22222;
}
a:active{
color: #FF4500;
}
:visited擬似クラスは、ブラウザの履歴が残っていると色を変更しても確認することができません。ブラウザの履歴を消してから確認しましょう。
実際の制作では:link、:activeは指定せず下記のようにa要素と:visitedと:hoverのみで指定するケースが多くなっています。:visitedを指定しない場合はa要素の指定と同じになります。
<p><a href="#">リンクテキスト</a></p>
a{
color: #00008B;
text-decoration: none;
}
a:visited{
color: #4B0082;
}
a:hover{
color: #4B0082;
text-decoration: underline;
}
:hover擬似クラスはa要素以外にも使用できます。主にJavaScriptというプログラムと併用して利用される場合があります。
<p>段落テキスト</p>
p:hover{
color: #4B0082;
text-decoration: underline;
}
<p><a class="anchor" href="#">リンクテキスト</a></p>
また擬似クラスはid名やclass名でも指定できます。
.anchor:hover{
color: #4B0082;
text-decoration: underline;
}
まとめ
- a要素は継承で文字色の変更がされない
- a要素の装飾は直接指定して行う
- imgタグをaタグで囲んだ時の線はリセットCSSであらかじめ「なし」にしておく
- 擬似クラスの指定には順番がある
- :visitedはブラウザの履歴が残っているとCSSを変更しても反映されない