CSSの color プロパティは、テキストの色を指定するために使用されます。本記事では、 color プロパティの基本から応用まで詳しく解説します。
colorプロパティの基本
color プロパティは、テキストの色を指定するために使用されます。以下のように指定できます。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>monmontraining</title>
</head>
<body>
<h1>こんにちは！monmonです</h1>
<p>ブログの他の記事やX（旧Twitter）も見ていってね～</p>
</body>
</html>css
p {
color: red; /* 名前付き色 */
}この場合、 <p> 要素のテキストの色が赤になります。
色の指定方法
color プロパティでは、以下のような方法で色を指定できます。
名前付き色
red や blue などの色の名前を指定できます。
h1 {
color: blue;
}
16進数（Hex）
#RRGGBB や #RGB の形式で指定できます。
p {
color: #ff5733; /* 赤みがかったオレンジ */
}
少しだけ変化をつけられましたね。
RGBA（透明度付き）
rgba(r, g, b, a) 形式で透明度を指定できます。
rgbaはそれぞれ、赤（red）、緑（green）、青（blue）、アルファ値（alpha）を示します。
また、r・g・bは0から255までの整数、もしくは0％から100％までの割合で書きます。aは0（透明）から1（完全不透明）で書きます。
p {
color: rgba(255, 87, 51, 0.5); /* 透明度50% */
}
少しだけ薄くなりましたね。
他にもrgb(r, g, b) で指定することもできます。
p {
color: rgb(255, 87, 51);
}こっちの方がざっくりした設定で、透明度は変えられません。
HSL
hsla(h, s%, l%, a) で透明度を指定できます。
hslaはそれぞれ、色相（hue）、彩度（saturation）、明度（lightness）、アルファ値（alpha）を示します。
また、hは0から360までの整数、s・lは0％から100％までの割合で書きます。また、aは0（透明）から1（完全不透明）で書きます。
p {
color: hsla(14, 100%, 50%, 0.7);
}
他にもhsl(h, s%, l%) で指定することもできます。
p {
color: hsl(14, 100%, 50%);
}こっちの方は透明度は指定できません。
colorプロパティの応用
透過テキストの作成
rgba や hsla を使うことで、背景色に溶け込むテキストを作れます。
p {
color: rgba(255, 255, 255, 0.8);
}ダークモード対応
:root {
color-scheme: light dark;
}詳しくはこちらへ
カスタムプロパティ（CSS変数）との組み合わせ
CSS変数を使うと、一括で色を管理できます。
:root {
--main-color: #ff5733;
}
h1 {
color: var(--main-color);
}詳しくはこちらへ
まとめ
CSSの color プロパティは、さまざまな方法で色を指定できる便利なプロパティです。基本の使い方から応用までマスターして、より美しいデザインを実現しましょう！
コメント