CSSでリンクの色を設定する方法｜colorプロパティと疑似クラスの使い方
CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。
さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。
構文
CSSの color プロパティの基本構文は以下のとおりです。
Selector {
color: /*値*/
}サンプルコード1
次の例では、リンクの状態（未訪問・訪問済み・ホバー中・クリック中）ごとに異なる色を設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
#demo::after {
content: " (visited) ";
font-style: italic;
}
a:link {
color: lime;
}
a:visited {
color: green;
}
a:hover {
color: orange;
}
a:active {
color: gold;
}
</style>
</head>
<body>
<h2>Demo Links</h2>
<a id="demo" href="">This is demo text 1.</a>
<hr>
<p>
<a href="#">This is demo text 2.</a>
</p>
</body>
</html>出力結果
上記のコードを実行すると、次のような表示になります。
2つ目のリンクにマウスカーソルを重ねたとき（ホバー時）は、次のように表示されます。
2つ目のリンクをクリックしたとき（アクティブ時）は、次のように表示されます。
サンプルコード2
続いて、背景色のあるボックス内に配置したリンクに対して、a:link だけで文字色を指定するシンプルな例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
font-size: 1.4em;
background-color: lightseagreen;
width: 100px;
text-align: center;
}
a:link {
color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<a id="demo" href="">Demo link.</a>
</div>
</body>
</html>出力結果
上記のコードを実行すると、次のような表示になります。
-
CSSで放射状グラデーションの形状を設定する方法
CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで
-
CSSでグラデーションのカラーストップ位置を設定する方法
CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に