【初心者ノート】スタイルシートでページの背景に色をつける

カンプイメージ

前回の記事「HTMLのマークアップ、artcle、header、footer」まででページのヘッダー記事フッターマークアップしました。

今回はWEBページに色をつけて飾ります。

背景に色をつける

HTMLでマークアップしたbodyheaderfooterarticleなどの要素は、CSSbackground-colorプロパティ背景色を指定することができます。

スタイルシートでの色の指定方法はいくつかあります。

  • RGB指定
    rgb(255,120,0)のように、赤、緑、青の各色をそれぞれ0から255の値で指定します。
  • 16進数指定
    #ff7800 のように、「#」のあとに赤、緑、青の各色を16進数の00からffの値で指定します。
  • HSL指定
    HSL(30,80%,70%)のように色相(Hue)彩度(Saturation)明度(Brightness)を指定します。
  • redlawngreenlightpinkのように、色の名前を指定します。

rgbhslの簡易変換ツールを別のページに作りました。
興味がある方はご覧下さい。

bodyの背景に色を付ける

WEBページの枠全体はHTMLのbody要素でマークアップされています。

このbodyの背景色を設定するには、スタイルシート(CSS)のbodyセレクタbackground-colorプロパティで色を指定します。

練習サイトでは16進数で薄いピンク(#f1dfec)を設定してみましょう。

記事の背景に色をつける

記事の背景に色を設定するには、スタイルシート(CSS)のarticleセレクタbackground-colorプロパティで色を指定します。

ここでは白(#ffffff)を設定します。

ヘッダーの背景に色をつける

ヘッダーの背景の色は、スタイルシート(CSS)のheaderセレクタbackground-colorプロパティで色を指定します。

ここではピンク(#e1c5ec)を設定します。

フッターの背景に色をつける

フッターの背景の色は、スタイルシート(CSS)のfooterセレクタbackground-colorプロパティで色を指定します。

ここではグレー(#626262)を設定します。

背景を#626262にすると、文字色が黒だと見にくくなるので、文字色(fontプロパティ)白(#ffffff)にします。

1つのセレクタに複数のプロパティ(ここではbackgroud-colorとcolor)を設定する場合は、プロパティの値の後ろにセミコロン(;)を記述します。
また、プロパティごとに改行することができます。

ブラウザでの表示

ブラウザで表示してみましょう。

CSS 背景色の設定

bodyヘッダー記事フッター背景色がそれぞれ設定どおりに表示されています。

ここまでのまとめ

今回は背景色についてまとめてみました。

  • 背景色はCSSのbackground-colorプロパティで指定する。
  • 文字色はCSSのcolorプロパティで指定する。

ここまでのHTMLとCSSは次のようになっています。

次回は表示領域の大きさ変更についてまとめます。

スポンサーリンク

シェアする

フォローする

スポンサーリンク