背景の色を変更したい、この様な場面もよくあるかと思います。背景色の指定はとても簡単です。背景色指定のプロパティはbackground-colorなので、background-colorを使って好きな色を指定するだけです。色の指定はRGB値か色の名前で行います。
背景色を指定してみよう
では、実際に例を見ていきましょう。
1 2 3 |
body { background-color: red; } |
上の様に指定することで、ページ全体の背景の色が赤くなります。記述の仕方は以下の通りです。
1 2 3 |
背景色を指定したい要素 { background-color: 色; } |
先ほどは要素に、ページ全体を指定することで、ページ全体の背景の色を変更しましたが、もちろん別の要素を指定することでページ全体以外の背景色を変更することができます。
1 2 3 |
.sample1 { background-color: red; } |
例えば、上記の様に記述した場合、クラス名sample1の要素の背景の色が赤く変わります。セレクタの指定の仕方は、別の記事で紹介した様にいろいろあるので、組み合わせて使用してみましょう。
背景色を変更した時に気をつけたいこと
背景色を変更した場合に注意したいことがあります。背景色を変更すると、閲覧する環境によっては、文字が見づらくなることがあります。その為、背景色を変更した際は必ず文字の色も指定しておきましょう。
背景の色を変えるだけで、ページの印象はガラリと変わるものです。デザインに合わせて活用していきましょう。