HTMLリンク-さまざまな色
HTMLリンクは、アクセスされたか、アクセスされていないか、アクティブであるかによって、異なる色で表示されます。
HTMLリンクの色
デフォルトでは、リンクは次のように表示されます（すべてのブラウザで）。
- 未訪問のリンクには下線が引かれ、青色になっています
- 訪問したリンクには下線が引かれ、紫色になっています
- アクティブなリンクには下線が引かれ、赤で表示されます
CSSを使用して、リンク状態の色を変更できます。
例
ここでは、未訪問のリンクは下線のない緑色になります。訪問したリンクはピンク色になり、下線は表示されません。アクティブなリンクは黄色で下線が引かれます。さらに、リンク（a：hover）にマウスを合わせると、赤くなり、下線が引かれます。
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
リンクボタン
CSSを使用して、リンクをボタンとしてスタイル設定することもできます。
これはリンクです例
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
CSSの詳細については、CSSチュートリアルにアクセスしてください。
HTMLリンクタグ
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。