メインメニュー


[スポンサードリンク]


文字の色を指定する
color:色指定
colorプロパティで、文字色を指定します。
CSSで色を指定するときの方法は、下記の6種類があります。
(詳細は『色の指定方法』を御覧ください)
  • 16進数で指定 (#RRGGBB形式)
  • 16進数で指定 (#RGB形式)
  • 10進数で指定 (rgb(n,n,n)形式)
  • %で指定     (rgb(n%,n%,n%)形式)
  • 色名で指定
  • システムカラーで指定
色の指定は半角の英数字を使用します。
CSSでは、大文字・小文字の区別はありません。

文字色を指定しない場合は、ユーザーのブラウザ設定に従って表示されます。
文字色を指定する場合は、背景色も同時に指定しておくようにします。
ユーザーがブラウザの設定で背景色を変更している場合などは、文字色と背景色が同じ系統の色になってしまい、文字が読めなくなる可能性があります。
また、暗い背景画像に明るい文字色を指定していたとき、画像が表示されなければ白い背景色に明るい文字になる可能性がある(=文字が読めない)ので、背景画像を指定するときも背景画像に合わせた背景色と文字色をセットで指定するようにしましょう。


●16進数で指定 (#RRGGBB形式)

●16進数で指定 (#RRGGBB形式)

●16進数で指定 (#RGB形式)

●10進数で指定 (rgb(n,n,n)形式)

●%で指定  (rgb(n%,n%,n%)形式))

●色名で指定

●システムカラーで指定


<STYLE type="text/css">
<!--
P { color:red; }
.color1 { color:#00cc00; }
.color2 { color:#ff0; }
.color3 { color:rgb(0,0,255); }
.color4 { color:rgb(100%,60%,0%); }
.color5 { color:purple; }
.color6 { color:buttonface; }
-->
</STYLE>

<P>●16進数で指定 (#RRGGBB形式)</P>
<P class="color1">●16進数で指定 (#RRGGBB形式)</P>
<P class="color2">●16進数で指定 (#RGB形式)</P>
<P class="color3">●10進数で指定 (rgb(n,n,n)形式)</P>
<P class="color4">●%で指定  (rgb(n%,n%,n%)形式))</P>
<P class="color5">●色名で指定</P>
<P class="color6">●システムカラーで指定</P>