CSSの標準リンクスタイルとは？リンク状態ごとのデフォルト色とカスタマイズ方法
リンクは、目的に応じて自由にスタイルを設定できます。リンクは通常のテキストと視覚的に区別できるスタイルにすることが推奨されています。リンクの各状態におけるデフォルトのスタイルは、以下の表のとおりです。
| リンク状態 | デフォルトの色 |
|---|---|
| Active（アクティブ・クリック中） | #EE0000 |
| Focus（フォーカス時） | #5E9ED6 または類似の青系のアウトライン（Windows・Macの場合） Linuxでは #F07746 のアウトライン（テキストの色は変わりません） |
| Hover（ホバー時） | #0000EE |
| Link（未訪問リンク） | #0000EE |
| Visited（訪問済みリンク） | #551A8B |
注意 − 上記の色は、ブラウザのバージョンアップに伴って変更される場合があります。また、擬似クラスを正しく機能させるためには、:link → :visited → :hover → :active の順序で指定することが重要です。
サンプルコード
以下の例は、標準的なリンクスタイルの挙動を示したものです。
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h2>Learn JDBC</h2>
<a href="">Click here</a>
<br/><br/>
<a href="#">And here <img src="https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html>
表示結果
上記のコードは、次のように表示されます。
リンクをクリックしている間（アクティブ状態）は、以下のように表示されます。
リンクスタイルのカスタマイズ例
次の例では、標準のリンクスタイルを独自のスタイルで上書きする方法を紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
#one {
color: black;
text-decoration: none;
}
#two {
font-style: italic;
box-shadow: inset 0 0 8px coral;
}
table, td {
font-size: 1.4em;
padding: 8px;
text-align: center;
border: thin solid;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="one" href="#">1</a>(non standard link)</td>
<td id="two"><a href="#">2</a></td>
</tr>
<tr>
<td><a href="">3</a></td>
<td><a href="#">4</a></td>
</tr>
</table>
</body>
</html>
表示結果
上記のコードは、次のように表示されます。
「2」のリンクをクリックすると、次のように表示されます。
-
CSSでリンクの各状態をスタイリングする方法：:link・:visited・:hover・:activeの使い方
CSSの擬似クラスである :link、:visited、:hover、:active を使うことで、リンクのさまざまな状態に応じて個別のスタイルを適用できます。これらを正しく機能させるためには、記述する順序が重要です。推奨される順序は以下の通りです。:link … まだ訪問していないリンク:visited … すでに訪問済みのリンク:hover … マウスカーソルが乗っている状態のリンク:active … クリックされている瞬間のリンクこの順序を守ることで、後から定義したスタイルが意図せず上書きされるのを防ぎ、すべての状態が正しく反映されます。構文CSSでリンクの状態を指定する基本構文は次の通
-
CSSでアイコンバーを作成する方法｜横型・縦型のサンプルコード付き解説
CSSを使えば、Webサイトのナビゲーションに便利な「アイコンバー」を簡単に作成できます。この記事では、Font Awesomeのアイコンを使用した横型・縦型のアイコンバーの作り方を、実際のコード例とともにわかりやすく解説します。 準備：Font Awesomeの読み込み アイコンを表示するために、ここではFont Awesome（4.7.0）を使用します。HTML内で以下のCDNリンクを読み込んでおきましょう。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font