これも多く使用することがあるデザインです。文字の色を変更したい時は、colorを使用します。記述の仕方などは、背景の色を指定する時と一緒で、とても簡単です。
文字色指定のプロパティはcolorなので、colorを使って好きな色を指定するだけです。文字色の指定の場合も、RGB値か色の名前を使用します。
文字色の指定をしてみよう
では実際に、例を見ていきましょう。
1 2 3 |
body { color: white; } |
これで、ページ全体の文字色が白になりました。これは以下のように記述してあります。
1 2 3 |
文字色を指定したい要素 { color: 色; } |
文字の色を変えたい部分と、変えたい色を当てはめて書いてみましょう。
背景色も一緒に指定しよう
背景色を変えた場合は文字色の設定も行ったほうが良いので、背景色を指定するプロパティと、文字色を指定するプロパティを、一緒に記述することが増えるかと思います。
そちらも確認しておきましょう。背景色の指定と、文字色の指定を一緒に行った場合の記述の仕方は次の通りです。
1 2 3 4 |
body { background-color: red; color: white; } |
このように、background-colorを追加するだけで、背景の色と文字の色を指定することができました。デザイン的な面を特に重視している場合以外は、文字は読みやすいことが重要なので、背景の色と文字の色の組み合わせは、読みやすさを考えて選択していきましょう。