CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでテキストの色を設定する方法｜colorプロパティの使い方を解説

CSSでテキストの色を設定するには、colorプロパティを使用します。色の指定方法は複数あり、色名（キーワード）・16進数（HEX）・RGB値・HSL値のいずれかを使って自由に設定できます。用途に応じて使い分けることで、柔軟なデザイン表現が可能になります。

colorプロパティの基本的な使い方

selector {
   color: 値;
}

主な色の指定方法

  • 色名： red、blue、white など、定義済みのキーワードで指定します。
  • 16進数（HEX）： #F8E61C のように「#」に続く6桁のコードで指定します。
  • RGB値： rgb(248, 230, 28) のように、赤・緑・青の強さを0〜255の数値で指定します。
  • HSL値： hsl(55, 94%, 54%) のように、色相（Hue）・彩度（Saturation）・輝度（Lightness）で指定します。

サンプルコード1

まずは、span要素に背景色と文字色を同時に設定する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: orange;
   color: white;
}
p.demo {
   display: none;
}
span.demo1 {
   display: inline;
}
</style>
</head>
<body>
<h1>試合詳細</h1>
<div>
試合は12月20日の <p class="demo">午前9時</p> 午前10時に開始されます。
</div>
<div>
試合は12月20日の <span class="demo1">午後5時</span> に終了します。
</div>
</body>
</html>

表示結果

CSSでテキストの色を設定する方法｜colorプロパティの使い方を解説

この例では、span要素に対して背景色をオレンジ（orange）、文字色を白（white）に設定しています。そのため「午後5時」の部分が、オレンジ色の背景に白い文字として表示されます。また、p.demoはdisplay:noneによって非表示になり、span.demo1はdisplay:inlineでインライン表示される点にも注目してください。

サンプルコード2

次に、16進数（HEX）カラーコードを使って文字色を指定する例です。あわせてword-spacingプロパティで単語間隔も調整しています。

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
   word-spacing: 1cm;
   color: #F8E61C;
}
p.demo2 {
   word-spacing: 40px;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<h2>見出し2</h2>
<p class="demo1">This is demo text.</p>
<h2>見出し2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>

表示結果

CSSでテキストの色を設定する方法｜colorプロパティの使い方を解説

この例では、クラスdemo1の段落に16進数カラーコード「#F8E61C」（明るい黄色）を文字色として指定しています。単語間のスペースを広げるword-spacingプロパティと組み合わせることで、色指定と文字間隔の調整を一度に確認できます。

まとめ

  • テキストの色はcolorプロパティで設定する。
  • 指定方法は色名・16進数（HEX）・RGB・HSLの4種類がある。
  • 背景色とのコントラストを意識し、読みやすい配色を心がけることが重要。
  1. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用

  2. CSSでグラデーションのカラーストップ位置を設定する方法

    CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に