CSSでテキストの色を変えるには、’color’プロパティを使います。
‘text-color’や’font-color’ではないことに気を付けてください。
主に3パターンの方法で色を指定できます。
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォントカラーの基本</title>
<style>
/* ここにCSSを書きます */
body {
font-family: sans-serif; /* 読みやすいフォントを指定 */
margin: 20px;
}
h1 {
color: #333; /* 見出しの色 */
}
/* --- 色の名前で指定 --- */
.red-text {
color: red; /* 赤 */
}
.blue-text {
color: blue; /* 青 */
}
.green-text {
color: green; /* 緑 */
}
/* --- 16進数コードで指定 (#RRGGBB) --- */
.hex-color1 {
color: #ff0000; /* 鮮やかな赤 */
}
.hex-color2 {
color: #008000; /* 暗めの緑 */
}
.hex-color3 {
color: #3498db; /* 明るい青 (よく使われる色) */
}
/* --- RGB値で指定 (rgb(R,G,B)) --- */
.rgb-color1 {
color: rgb(255, 165, 0); /* オレンジ */
}
.rgb-color2 {
color: rgb(128, 0, 128); /* 紫 */
}
/* --- RGBA値で指定 (rgb(R,G,B,A) - Aは透明度) --- */
.rgba-color1 {
color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
}
.rgba-color2 {
color: rgba(0, 0, 255, 0.7); /* 70%の不透明度で青 */
}
</style>
</head>
<body>
<h1>フォントカラーの指定方法</h1>
<p class="red-text">この文章は「**red**」という名前で赤色にしました。</p>
<p class="blue-text">この文章は「**blue**」という名前で青色にしました。</p>
<p class="green-text">この文章は「**green**」という名前で緑色にしました。</p>
<p class="hex-color1">この文章は「**#ff0000**」という16進数コードで赤色にしました。</p>
<p class="hex-color2">この文章は「**#008000**」という16進数コードで緑色にしました。</p>
<p class="hex-color3">この文章は「**#3498db**」という16進数コードで明るい青色にしました。</p>
<p class="rgb-color1">この文章は「**rgb(255, 165, 0)**」というRGB値でオレンジ色にしました。</p>
<p class="rgb-color2">この文章は「**rgb(128, 0, 128)**」というRGB値で紫色にしました。</p>
<p class="rgba-color1">この文章は「**rgba(255, 0, 0, 0.5)**」というRGBA値で半透明の赤色にしました。</p>
<p class="rgba-color2">この文章は「**rgba(0, 0, 255, 0.7)**」というRGBA値で少し透明な青色にしました。</p>
<p>このように、CSSの`color`プロパティを使えば、簡単に文字の色を変えられます。</p>
</body>
</html>
プレビュー
