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 リンク タグ
| タグ | 説明 |
|---|---|
| <a> | ハイパーリンクを定義します |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照して下さい。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。