リンク色を複数設定

関連リンク

• 色の見本
• リンクの記載方法
• 指定場所に移動
• リンク余白の設定
• リンク色を複数設定

Pickup

• 無料アフィリエイト
• 無料ブログ 比較 宣伝

3種類を使い分け

リンク色を複数設定する方法は、以下の3種類を使い分けます。

■ 普通の設定

a:link { color: #0000cd }
a:visited { color: #800080 }
a:hover { color: #fffacd; background-color: #d2b48c }
a:active { color: #ffffff }

---

■ クラスに設定

.link a:link { color: #0000cd }
.link a:visited { color: #800080 }
.link a:hover { color: #fffacd; background-color: #8fbc8f }
.link a:active { color: #ffffff }

<div class="link">〜</div>の全てのリンクに設定されます。

---

■ 個別に設定

a.link:link { color: #0000cd }
a.link:visited { color: #800080 }
a.link:hover { color: #fffacd; background-color: #8fbc8f }
a.link:active { color: #ffffff }

<a class="link" href="http://www.syousai.com/web.html">〜</a>

※ .linkはクラス名です。