リンクはウェブサイトの重要な部分です. ほとんどすべてのウェブページに多くのリンクが表示されます. リンクスタイルの合理的なデザインは、ウェブページの外観にポイントを追加できます.リンクには、リンク、訪問済み、アクティブ、ホバーの 4 つの異なる状態があります。次の疑似クラス セレクターを使用して、リンクの 4 つの状態に異なるスタイルを設定できます。
図: :link疑似クラスセレクタのデモ 
図: :visited擬似クラス セレクターのデモ 
図: :hover擬似クラス セレクターのデモ 
図: :active疑似クラスセレクターのデモ
:link: 通常または未訪問のリンクのスタイルを定義します。:visited: 訪問したリンクのスタイルを定義します。:hover: マウスがリンクの上を通過またはホバーしたときのスタイルを定義します。:active: リンクがクリックされたときのスタイルを定義します。
上記の 4 つの擬似クラス セレクターを使用して、通常のテキストのスタイルを定義するのと同様に、色、フォント、背景、境界線など、リンクに必要な CSS スタイルを定義できます。
注: 4 つの擬似クラス セレクターを定義する場合、特定の順序が必要です. 一般に、 :hover :linkと:visited後に配置する必要があり:activeは:hoverの後に配置する必要があります。
Chrome、Firefox、Safari などの主流の Web ブラウザーでは、リンクに対して一連の既定のスタイルが定義されています。リンクに対して特にスタイルが設定されていない場合、ブラウザーは既定のリンク スタイルを使用します。
- 通常のリンク: 下線付きの青いテキスト。
- 訪問したリンク: 下線付きの紫色のテキスト。
- リンクがクリックされたとき: 赤い下線付きのテキスト。
- リンクの上を歩いたりホバリングしたりする場合: リンクの外観は変わりません。以前の状態の色が保持されます。
コンテンツ
表示
1. :link
:link擬似クラス セレクターを使用して、通常のリンクまたは未訪問のリンクのスタイルを設定できます。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
</style>
</head>
<body>
<a href=''>これはリンクです</a>
<a href=''>別のリンクです</a>
</body>
</html> 実行結果は次の図のとおりです。
2. :visited
:visited擬似クラス セレクターを使用して、訪問したリンクのスタイルを設定できます。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px soild red;
color: red;
}
</style>
</head>
<body>
<a href=''>これはリンクです</a>
<a href=''>別のリンクです</a>
</body>
</html> 実行結果は次の図のとおりです。
3. :hover
:hover疑似クラス セレクターは、マウスがリンクの上を通過またはホバーしたときのスタイルを定義できます。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
</style>
</head>
<body>
<a href=''>これはリンクです</a>
<a href=''>これもリンクです</a>
</body>
</html> 実行結果は次の図のとおりです。
:active疑似クラス セレクターを使用して、リンクがクリックされたときのスタイルを定義します。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
a:active {
background: #000;
border: 1px solid black;
color: white;
}
</style>
</head>
<body>
<a href=''>これはリンクです</a>
<a href=''>別のリンクです</a>
</body>
</html> 実行結果は次の図のとおりです。
「CSSリンクスタイル（4種類）」についてわかりやすく解説！絶対に観るべきベスト2動画
超初心者向け！！リンクを作るHTMLタグの使い方！（テスト動画）
CSS を HTML にリンクする方法
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
