MENU
  1. ホーム
  2. CSS
  3. background-colorプロパティ

background-colorプロパティ

CSS
2023.07.13

background-colorプロパティは、背景色を指定します。

background-colorに関しての図
例
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景色の指定について</title>
    <link rel="stylesheet" href="./main.css" />
</head>
<body>
    <!-- キーワード -->
    <div class="type1">背景色の指定(キーワード)</div>

    <!-- 16進数 -->
    <div class="type2">背景色の指定(16進数)</div>

    <!-- RGB値 -->
    <div class="type3">背景色の指定(RGB値)</div>
    <div class="type4">背景色の指定(RGBA値)</div>

    <!-- HSL値 -->
    <div class="type5">背景色の指定(HSL値)</div>
    <div class="type6">背景色の指定(HSLA値)</div>

    <!-- 特殊(currentColor) -->
    <div class="type7">背景色の指定(特殊)</div>
</body>
</html>
/* キーワード */
.type1 {background-color: silver;}

/* 16進数 */
.type2 {background-color: #ffff00;}

/* RGB値 */
.type3 {background-color: rgb(200, 255, 100);}
.type4 {background-color: rgba(200, 255, 100, 0.5);}

/* HSL値 */
.type5 {background-color: hsl(50, 56%, 50%);}
.type6 {background-color: hsla(50, 56%, 50%, 0.75);}

/* 特殊(currentColor) */
.type7 {
     /* colorのyellowをborderで適応 */
     color: yellow;
     border: 5px solid currentColor;
     background-color: hsla(180, 56%, 50%, 0.75);
}
出力結果
背景色の指定(キーワード)
背景色の指定(16進数)
背景色の指定(RGB値)
背景色の指定(RGBA値)
背景色の指定(HSL値)
背景色の指定(HSLA値)
背景色の指定(特殊1)
CSS