Cascading Style Sheets color property.
文字の色（前景色）を設定します。
環境によっては、ブラウザの設定やユーザーのスタイルシートで背景色が変更されている場合があります。設定した文字色とユーザーの設定した背景色が似ていると文字が読みにくくなってしまいますので、文字色を指定する時には背景色（background-color）も同時に指定するようにした方が良さそうです。
color: 値body要素に文字色を指定すると、ページ全体の文字がその色になります。
CSS source
body {
color: #ff0000;
}
HTML source
<body>
<h1>見出し</h1>
<p>これは段落です。</p>
<ul>
<li>リスト項目１</li>
<li>リスト項目２</li>
<li>リスト項目３</li>
</ul>
<table>
<thead>
<tr>
<th>セル１</th>
<th>セル２</th>
<th>セル３</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル４</td>
<td>セル５</td>
<td>セル６</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>セル７</td>
<td>セル８</td>
<td>セル９</td>
</tr>
</tfoot>
</table>
</body>
＞＞ サンプルページを表示する
＞＞ サンプルページを表示する
段落1 ～ 段落4 には、それぞれ c1～c4 というクラスを指定し、別の色で表示させています。
CSS source
.c1 {
color: #003399;
}
.c2 {
color: #006600;
}
.c3 {
color: #ffcc00;
}
.c4 {
color: #ff6600;
}
HTML source
<p class="c1">■段落１は青■</p>
<p class="c2">■段落２は緑■</p>
<p class="c3">■段落３は黄色■</p>
<p class="c4">■段落４はオレンジ色■</p>
Sample
■段落１は青■
■段落２は緑■
■段落３は黄色■
■段落４はオレンジ色■
HTMLのソースは「#ff0000形式の指定例」と同じもので、CSSの色の指定形式だけを変更しています。
CSS source
.c1 {
color: #039;
}
.c2 {
color: #060;
}
.c3 {
color: #fc0;
}
.c4 {
color: #f60;
}
HTML source
<p class="c1">■段落１は青■</p>
<p class="c2">■段落２は緑■</p>
<p class="c3">■段落３は黄色■</p>
<p class="c4">■段落４はオレンジ色■</p>
Sample
■段落１は青■
■段落２は緑■
■段落３は黄色■
■段落４はオレンジ色■
HTMLのソースは「#ff0000形式の指定例」と同じもので、CSSの色の指定形式だけを変更しています。
CSS source
.c1 {
color: rgb(0, 51, 153);
}
.c2 {
color: rgb(0, 102, 0);
}
.c3 {
color: rgb(255, 204, 0);
}
.c4 {
color: rgb(255, 102, 0);
}
HTML source
<p class="c1">■段落１は青■</p>
<p class="c2">■段落２は緑■</p>
<p class="c3">■段落３は黄色■</p>
<p class="c4">■段落４はオレンジ色■</p>
Sample
■段落１は青■
■段落２は緑■
■段落３は黄色■
■段落４はオレンジ色■
HTMLのソースは「#ff0000形式の指定例」と同じもので、CSSの色の指定形式だけを変更しています。
CSS source
.c1 {
color: rgb(0%, 20%, 60%);
}
.c2 {
color: rgb(0%, 40%, 0%);
}
.c3 {
color: rgb(100%, 80%, 0%);
}
.c4 {
color: rgb(100%, 40%, 0%);
}
HTML source
<p class="c1">■段落１は青■</p>
<p class="c2">■段落２は緑■</p>
<p class="c3">■段落３は黄色■</p>
<p class="c4">■段落４はオレンジ色■</p>
Sample
■段落１は青■
■段落２は緑■
■段落３は黄色■
■段落４はオレンジ色■