新着！私の44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃

今すぐ入手 →

#background-color

要素の背景の色を定義します。

デフォルト background-color: transparent;

デフォルトでは、背景色は透明です。つまり、基本的に何もないということです。

background-color: red;

140種類以上のカラー名のいずれかを使用できます。

background-color: #05ffb0;

16進数カラーコードを使用できます。

background-color: rgb(50, 115, 220);

rgb()カラーコードを使用できます

  • 最初の値はred用です
  • 2番目の値はgreen用です
  • 3番目の値はblue用です

それぞれ0から255までの値を取ることができます。

background-color: rgba(50, 115, 220, 0.3);

rgba()カラーコードを使用できます

  • 最初の3つの値はrgb用です
  • 4番目の値はalphaチャンネル用で、色の不透明度を定義します

アルファ値は、ゼロ0（透明）から11（不透明）の範囲です。

background-color: hsl(14, 100%, 53%);

hsl()カラーコードを使用できます

  • 最初の値は色相(hue)で、0から359の範囲です
  • 2番目の値は彩度(saturation)で、0%から100%の範囲です
  • 3番目の値は輝度(luminosity)で、0%から100%の範囲です

background-color: hsla(14, 100%, 53%, 0.6);

hsla()カラーコードを使用できます

  • 最初の3つの値はhsl用です
  • 4番目の値はalphaチャンネル用で、色の不透明度を定義します

アルファ値は、ゼロ0（透明）から11（不透明）の範囲です。