スタイルシートによる文字色、フォントカラーの変更 - CSS

スタイルシートを用いてフォントの色(文字色)を変更する方法を紹介します。

概要

スタイルシートでフォントの色を変更するには、color プロパティに変更したいカラー値を設定します。

書式

color:(カラー値);

カラー値の代表的な書式は以下が利用できます。

書式 意味
#RRGGBB 16進数でR, G, B を2桁で表現した値
rgb(r g b) 10進数でr, g, b を表現した値
(カラーコード) 定義されたカラー名を指定できます。詳細はこちらの記事を参照してください

他の書式についてはこちらの記事を参照してください。

実装例

コード

CssFontColor.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="StyleFontColor.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <span class="FontColorBlue">白熊の毛は中が空洞になっている。</span>
    <br />
    <span class="FontColorGreen">白熊の毛は中が空洞になっている。</span>
    <br />
    <span class="FontColorRed">白熊の毛は中が空洞になっている。</span>

</body>
</html>
StyleFontColor.css
.FontColorBlue {
  color:#0000FF;
}

.FontColorRed {
  color:#FF0000;
}

.FontColorGreen {
  color:#00FF00;
}

解説

CSSの宣言ブロック内で"color"を記述するとフォントのカラーを変更できます。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
文字色が変化していることが確認できます。

著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-07-02
改訂日: 2024-02-05
作成日: 2012-12-06
iPentec all rights reserverd.