リンク <a> エレメントとスタイル
リンク機能をもつ <a> エレメントの下線やフォントの色の変更方法です。
リンクはデフォルでは下線が表示され、特有の色で表示されます。見ためを重視する広告では変更したい場合があります。
<style>
a {
color: black;
text-decoration: none;
}
a:hover {
color: #0000ee;
text-decoration: underline;
}
</style>
<a href="example.html">リンク</a>
詳しくはExample
を参照してください
リンクの下線の消し方や色の変更、カーソルがのったときのスタイル、訪問済みリンクのスタイルの変更について順次解説します。
:link以外の似た疑似クラスに:visited、 :hover、 :activeがあります。
これらの疑似クラスにはユーザーに対する反応が想定されています。
:linkは未訪問、:visitedは訪問済み、:hoverはエレメントの上をマウスポインターがある状態、:activeはクリックされた状態です。
ユーザーに対する反応順として、:link —> :visited —> :hover —> :active と想定されており、
より右側の状態の設定が優先されます。:hoverの設定は:activeの設定で上書きされるということです。
<a> エレメントの下線
<a> エレメントの下線を消すには、text-decoration: none; を指定します。
a {
text-decoration: none;
}
リンクのフォントカラー
リンクのフォントカラーは、セレクターで<a> エレメントを指定しフォントカラーを設定すれば一括して変わります。
以下の例はフォントカラーを黒色に変えます。ポインターが上に乗ったときや訪問済みのリンクも指定した色になります。
a {
color: black;
}
<a> エレメントにカーソルがのったとき
<a> エレメントにカーソルがのったときのフォントカラーを変え、下線を表示します。:hoverクラスのプロパティを設定します。
a {
text-decoration: none;
}
a:hover {
color: #0000ee; /* default color*/
text-decoration: underline;
}
<a> エレメントの訪問済み
<a> エレメントの訪問済みの色を変えます。:visited クラスのプロパティを設定します。
a:visited {
color: black; /* default : #551b8c */
}
実行結果例では、リンク先に辿り着けないので訪問済みになりません。そのため色だけを変えています。
Example
<a>エレメントの CSS （スタイル設定）の例です。