リンク <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 （スタイル設定）の例です。