CSSで文字色を指定する方法

これも多く使用することがあるデザインです。文字の色を変更したい時は、colorを使用します。記述の仕方などは、背景の色を指定する時と一緒で、とても簡単です。

文字色指定のプロパティはcolorなので、colorを使って好きな色を指定するだけです。文字色の指定の場合も、RGB値か色の名前を使用します。

文字色の指定をしてみよう

では実際に、例を見ていきましょう。

これで、ページ全体の文字色が白になりました。これは以下のように記述してあります。

文字の色を変えたい部分と、変えたい色を当てはめて書いてみましょう。

背景色も一緒に指定しよう

背景色を変えた場合は文字色の設定も行ったほうが良いので、背景色を指定するプロパティと、文字色を指定するプロパティを、一緒に記述することが増えるかと思います。

そちらも確認しておきましょう。背景色の指定と、文字色の指定を一緒に行った場合の記述の仕方は次の通りです。

このように、background-colorを追加するだけで、背景の色と文字の色を指定することができました。デザイン的な面を特に重視している場合以外は、文字は読みやすいことが重要なので、背景の色と文字の色の組み合わせは、読みやすさを考えて選択していきましょう。