CSSで背景色を指定する方法

背景の色を変更したい、この様な場面もよくあるかと思います。背景色の指定はとても簡単です。背景色指定のプロパティはbackground-colorなので、background-colorを使って好きな色を指定するだけです。色の指定はRGB値か色の名前で行います。

背景色を指定してみよう

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

上の様に指定することで、ページ全体の背景の色が赤くなります。記述の仕方は以下の通りです。

先ほどは要素に、ページ全体を指定することで、ページ全体の背景の色を変更しましたが、もちろん別の要素を指定することでページ全体以外の背景色を変更することができます。

例えば、上記の様に記述した場合、クラス名sample1の要素の背景の色が赤く変わります。セレクタの指定の仕方は、別の記事で紹介した様にいろいろあるので、組み合わせて使用してみましょう。

背景色を変更した時に気をつけたいこと

背景色を変更した場合に注意したいことがあります。背景色を変更すると、閲覧する環境によっては、文字が見づらくなることがあります。その為、背景色を変更した際は必ず文字の色も指定しておきましょう。

背景の色を変えるだけで、ページの印象はガラリと変わるものです。デザインに合わせて活用していきましょう。