さて、ついでに文字色もスタイルシートで記述してみましょう。
color プロパティ
スタイルシートで文字色を指定するには、 color プロパティを使用します。
color: darkblue;
上記の記述は、濃い青色（ darkblue ）を指定(※)しています。
※色の指定方法は、1ページ目の中の注釈で説明したとおり、色名の他に「#ccffcc」や「rgb(100%,75%,50%)」といった指定なども可能です。
スタイルシートは、連続していくつでも指定できますので、背景色と文字色を同時に指定することも可能です。
color: white; background-color: purple;
上記の記述は、文字色が白色（ white ）で背景色が紫色（ purple ）になります。ここでは見やすいように改行していますが、実際に記述する際には、改行しなくても構いません。（しても構いません）
例えば、次のように記述すると、背景色が水色で文字色が濃い青色になります。
<div style="color: darkblue; background-color: #ccffff;"> All About Japan は ... が運営しています。 </div>
上記の記述は、次のように表示されます。
All About Japan は、株式会社リクルート・アバウトドットコム・ジャパンが運営しています。
文字色が濃い青色で、背景色が水色になっていることがお分かり頂けたと思います。このように、文字色と背景色を同時に指定することも可能です。 もちろん、これら以外のスタイルも同時に記述可能です。
TABLEを使わずに実現
今回ご紹介したように、背景色や背景画像を付けるだけなら、わざわざTABLEを使って長いHTMLソースを記述する必要はありません。
また、インライン要素に対して背景色や背景画像を指定することは、TABLEを駆使しても難しく、スタイルシートだからこそ実現できるデザインだと言えるでしょう。
スタイルシートに満足に対応していないブラウザが多かった頃は、あまり積極的にはスタイルシートを活用できませんでした。 しかし、最近のブラウザならほとんどのブラウザでスタイルシートに対応していますので、気軽に使ってみて下さい。
【関連記事】
