<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を参照してください
- ad -
<a> エレメントの下線
<a> エレメントの下線を消す
a {
text-decoration: none;
}
<a> エレメントのリンク
<a> エレメントのリンクを表すフォントカラーを黒色に変えます。ポインターが上に乗ったときや訪問済みのリンクも指定した色になります。
a {
color: black;
}
<a> エレメントにカーソルがのったとき
<a> エレメントにカーソルがのったときのフォントカラーを変え、下線を表示します。:hoverクラスのプロパティを設定します。
a:hover {
color: #0000ee; /* default color*/
text-decoration: underline;
}
<a> エレメントの訪問済み
<a> エレメントの訪問済みの色を変えます。:visited クラスのプロパティを設定します。
a:visited {
color: black; /* default : #551b8c */
}
実行結果例では、リンク先に辿り着けないので訪問済みになりません。そのため色だけを変えています。
Example
<a>エレメントの CSS （スタイル設定）の例です。
- ad -