color/フォントの色

colorプロパティを使うと文字の色を変更出来ます。

説明

 colorプロパティは以下のように赤、青、緑等、フォントが表示される時の文字の色を指定出来ます。

 

 色は3原色を256×256×256まで指定出来るため、掛け合わせると16,777,216色と膨大な色を表現出来ますが、ディスプレイの機種や見る角度でも色合いが変わってきます。

 このため、文字の色を分けて使う時は、はっきりと違いが分かる色を使う必要があります。

構文

 colorプロパティは以下の4つの指定方法があります。

color: 英語;
color: rgb(,,);
color: rgba(,,,透明度);
color: #16進数;

 英語はredやblue等です。

 rgbは左から赤、緑、青をそれぞれ0〜255で指定し、3色を混ぜた色で表示されます。数字が大きい程薄く、全て255を指定すると白色になり、全て0にすると黒色になります。

 rgbaではrgbの3色に加えて透明度を指定出来ます。透明度はIE8以下ではサポートされていないため透明度は反映されず、色も指定した色と異なって表示されます。

 16進数は上記のrgbをそれぞれ16進数に直した値を繋げて記述します。例えばrgb(2,10,16)と同じ色は#020A10です。RGBの左から2は16進数でも2、10は16進数ではA、16は16進数で10でこれを2桁に直して繋げると020A10になるためです。

 尚、16進数は3桁でも記述出来ます。例えば#22AA33は#2A3と記述出来ます。6桁の左から22が2、AAはA、33は3に対応します。

 6桁の場合はフルカラーと呼ばれ、16×16×16×16×16×16=16,777,216通りの色が表現出来ます。3桁の場合は16×16×16=4,096通りの色が表現出来ます。

英語指定の利用例

 colorの英語を指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
color: red;
}

<p>ホームページ</p>

 上記を表示すると以下になります。

ホームページ

 英語指定が一番簡単に色を指定出来ますが、細かく調整したい場合は不向きです。

RGB指定の利用例

 rgbを指定した利用例は以下の通りです。

p {
color: rgb(200,100,20);
}

<p>ホームページ</p>

 上記を表示すると以下になります。

ホームページ

 RGBは指定したい色に対する数字の組み合わせが難しいですが、細かく調整が出来ます。

 又、Excel等を利用すると簡単に確認が出来ます。

 まず、セルを右クリックして「セルの書式設定」を選択すると以下の画面になります。

Excelでの色の確認1

 上記で背景色を設定し、赤枠の「その他の色」をクリックすると以下の「色の設定」画面になります。そこで「ユーザー設定」タブをクリックするとRGBが表示されます。

Excelでの色の確認2

 又、「標準」タブをクリックすると多くの色から選択出来ます。選択した色は「ユーザー設定」のタブでRGBが確認出来ます。

Excelでの色の確認3

透明度の利用例

 rgbaで透明度を利用する例は以下の通りです。

p {
color: rgba(200,100,20,0.5);
}

<p>ホームページ</p>

 上記を表示すると以下になります。

ホームページ

 透明度を指定せずに同じ色を表示すると以下になります。

ホームページ

 かなり薄く表示されていると思います。

 透明度は0は透明、1以上は指定しないのと同じになります。

16進数の利用例

 16進数を利用する例は以下の通りです。

p {
color: #C86414;
}

<p>ホームページ</p>

 上記を表示すると以下になります。

ホームページ

 上記はrgb(200,100,20)と指定したのと同じ色になります。

文章の途中での色の指定

 外部CSSファイルではなく、文章の一部だけ色を変えたい場合があります。そのような時はHTMLファイル中で以下のようにstyleで指定出来ます。

文章の途中で<span style="color:red;">赤色</span>にする。

 上記を表示すると以下になります。

文章の途中で赤色にする。

関連ページ

・ホームページ作成「フォントの変更

 フォントの色だけでなく、種類やサイズ、太字の指定等フォント全般の変更方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)