備忘録的プログラミングリファレンス

<a>エレメントと CSS

 <a> エレメントに関する CSS (スタイルシート)の使用例です。 リンクはデフォルでは下線が表示され、特有の色で表示されます。見ためを重視する広告では変更したい場合があります。
 リンクの下線の消し方や色の変更、カーソルがのったときのスタイル、訪問済みリンクのスタイルの変更についての解説です。

<a>エレメントと CSS
<a href="example.html">リンク</a>
<style>

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: #0000ee;
	text-decoration: underline;
}
</style>
詳しくはExampleを参照してください

ページ内 Index

<a> エレメントの下線

 <a> エレメントの下線を消す

<a> エレメントの下線
a {
	text-decoration: none;
}
実行結果
リンクの CSS の例

<a> エレメントにカーソルがのったとき

 <a> エレメントにカーソルがのったときのフォントカラーを変え、下線を表示します。:hoverクラスのプロパティを設定します。

<a> エレメントにカーソルがのったとき
a:hover {
	color: #0000ee; /* default color*/
	text-decoration: underline;
}
実行結果
リンクの CSS の例

<a> エレメントの訪問済み

 <a> エレメントの訪問済みの色を変えます。:visited クラスのプロパティを設定します。

<a> エレメントの訪問済み
a:visited {
	color: black; /* default : #551b8c */
}
実行結果
リンクの CSS の例

 実行結果例では、リンク先に辿り着けないので訪問済みになりません。そのため色だけを変えています。

Example

 <a>エレメントの CSS (スタイル設定)の例です。