CSSのcolorプロパティで文字色を設定する方法
CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。
基本構文
CSSのcolorプロパティは、次のような形式で記述します。
セレクタ {
color: /* 値 */;
}値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。
サンプルコード①：divとp要素への色指定
以下の例では、div要素とp要素に対して、それぞれ文字色と背景色を設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: seashell;
background-color: lightcoral;
}
p {
font-size: 1.5em;
color: blue;
background-color: palegreen;
box-shadow: 0 0 5px 1px rgb(0,0,0);
}
</style>
</head>
<body>
<div>
これはデモテキストです。
<p>
参考用として追加したテキストです。
</p>
これはデモテキスト2です。
</div>
</body>
</html>出力結果①
上記のコードを実行すると、次のように表示されます。
サンプルコード②：見出しと段落への色指定
次の例では、h3見出しに赤い文字色とボーダーを、p要素に青い文字色と背景色を設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
h3 {
color: red;
border: 2px ridge rosybrown;
}
p {
color: royalblue;
background-color: cornsilk;
box-shadow: 0 0 5px 1px deeppink;
}
</style>
</head>
<body>
<h3>デモ デモ デモ デモ</h3>
<p>ここにデモテキストを表示します</p>
</body>
</html>出力結果②
上記のコードを実行すると、次のように表示されます。
まとめ
CSSのcolorプロパティを使えば、テキストの色を簡単に変更できます。キーワード名だけでなく、16進数やRGB関数など複数の指定方法があるため、デザインの意図に合わせて柔軟に使い分けましょう。また、background-colorやborder-colorと組み合わせることで、より視覚的に魅力的なページを作成できます。
-
CSSのcolorプロパティでテキストの色を設定する方法
CSSのcolorプロパティは、要素内のテキスト（文字）の色を指定するために使用します。色の値には、色名キーワード（red、blueなど）、16進数カラーコード（#ff0000など）、rgb()・hsl()などの関数表記が利用でき、Webページの文字色を柔軟にコントロールできます。 構文 CSSのcolorプロパティの基本構文は以下のとおりです。 セレクタ { color: /* 値 */ } 色の主な指定方法 キーワード： red、blue、rebeccapurple など定義済みの色名 16進数（HEX）： #ff0000 のような形式 RGB関数： rgb(255, 0, 0)
-
CSSでリンクの色を設定する方法｜colorプロパティと疑似クラスの使い方
CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。構文CSSの color プロパティの基本構文は以下のとおりです。Selector { color: /*値*/ }サンプルコード1次の例では、リン