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

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)
  • HSL関数： hsl(0, 100%, 50%)

使用例1：div要素に文字色を適用する

次の例では、2つのdiv要素に対してcolorプロパティを適用しています。1つ目はrebeccapurple、2つ目は赤字（red）で打ち消し線付きのテキストとして表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
div {
    height: 100px;
    width: 200px;
    margin: 10px;
    display: flex;
    float: left;
    font-size: 1.4em;
    word-spacing: 30px;
    line-height: 4.5em;
    border: thin solid blue;
    border-radius: 40%;
    text-align: center;
    color: rebeccapurple;
}
div + div {
    background-color: beige;
    color: red;
    text-align: justify;
    text-decoration: line-through;
}
</style>
</head>
<body>
<div>One Two</div>
<div>Three</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

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

ポイント

隣接セレクタ「div + div」を使うことで、直前のdiv要素に続く2つ目のdivだけに異なるスタイルを上書き適用しています。このように、colorプロパティは継承されるため、親要素で指定した文字色を子要素側で個別に変更することも可能です。

使用例2：span要素で文章の一部の色を変える

次の例では、段落全体にrebeccapurpleの文字色を設定しつつ、span要素で囲んだ一部分だけを赤字＋下線で強調しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
p {
    margin: 10px;
    display: flex;
    float: left;
    border: 3px groove green;
    text-align: center;
    color: rebeccapurple;
}
span {
    background-color: beige;
    color: red;
    text-decoration: underline;
}
</style>
</head>
<body>
<h2>Tableauとは？</h2>
<p>Tableauは、データを視覚的に分析するためのBI（ビジネスインテリジェンス）ツールです。
<span>ユーザーはインタラクティブで共有可能なダッシュボードを作成・配布でき、
データの傾向や変動、密度をグラフやチャートの形で表現できます。</span>
Tableauはファイルやリレーショナルデータベース、ビッグデータソースに接続して
データを取得・処理することができます。</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

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


  1. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

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