HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎24. a要素の装飾と擬似クラス

      2017/07/11   hatano

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が付きます。これはブラウザのデフォルトCSSborderプロパティが設定されているためです。リセットCSSであらかじめimg要素のborderをなしに設定しておきます。


/* aタグ内の画像の枠線をリセット */
a img{
	border: none;
}

擬似クラス

:(コロン)から始まる4つの特殊なクラスです。主にa要素で使用します。

  • :link 未訪問リンク
  • :visited 訪問済みリンク
  • :hover カーソルが重なった時
  • :active クリックしてから離される時まで

擬似クラスはセレクタに続けて指定します。半角スペースを入れると無効になります。


/* aと:hoverの間に半角スペースが入った場合は無効 */
a :hover{
	color: #B22222;
}

/* 正しい指定は半角スペースを入れない */
a:hover{
	color: #B22222;
}

擬似クラスではcolorbackground-colortext-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を変更しても反映されない