テキストと色のスタイリング

前回は、非常に直感的かつ簡単な方法でテキストに色を追加しました。ここでは、色の適用方法について詳しく見ていきます。

色

テキストの色は、CSS の color プロパティを使用してテキスト要素に適用できます。このプロパティには、さまざまな形式で値を指定できます。

最も一般的に使用される色の値は、RGB、16進数、カラー名です。次の例では、テキストに青色を適用します。

色の指定形式

各形式について詳しく見ていきます。

カラー名

予約済みのカラーワードを使用可能。予約色の一覧は https://htmlcolorcodes.com で確認可能。

CSSには blue、red、green、purple などの定義済みカラー名が用意されており、可読性は高いが種類は限定的。

16進数形式

Hex は、# 記号の後に3組の2桁の値が並ぶ6桁のコードで色を表現。各ペアは red、green、blue の強度を順に示す。

16進数形式の値は、00（最小強度）からFF（最大強度）までの範囲。

RGB形式

RGBは、赤、緑、青（この順番）の強度を表す3つの数値で色を表現。

RGB形式の値は、0（最小強度）から255（最大強度）までの範囲。

RGBAによる透明度の設定

rgbカラーの透明度は、rgba記法（red, green, blue, alpha）を使用して設定できます。ここでalphaは色の不透明度または透明度のレベルを表します。

alpha値は0（完全に透明）から1（完全に不透明）までの範囲で指定できます。例えば、RGBA値rgba(0, 255, 0, 0.5)は、50%の不透明度を持つ緑色を表します。