SoyaBlog

これを見れば解決しそうや

HOME>CSS>要素の背景色を設定するbackground-colorについて解説
ブログ投稿日時:
ブログ更新日時:
要素の背景色を設定するbackground-colorについて解説

要素の背景色を設定するbackground-colorについて解説

  1. background-colorとは
  2. background-colorの指定方法
  3. 今回のまとめ

1.background-color とは

background-color とは、要素の背景色を指定するプロパティです。

2.background-color の指定方法

background-color の指定方法と表示は下記の通りです。

<div class="background-color-code"></div>

<div class="background-color-name"></div>

<div class="background-color-rgba"></div>
.background-color-code {
 width: 100%;
 height: 300px;
  /* background-color: 色; で指定 */
 background-color: #ff0000;
}

.background-color-name {
 width: 100%;
 height: 200px;
  /* background-color: 色; で指定 */
 background-color: blue;
}

.background-color-rgba {
 width: 100%;
 height: 200px;
  /* background-color: 色; で指定 */
 background-color: rgba($color: #00ff00, $alpha: 0.5);
}
HTMLとCSSの表示

上記のように background-color を指定することで背景色を設定することができます。

色を指定する際はカラーコードやカラーネーム、rgbaなどを使用して色を指定することができます。

3.

今回のまとめ

この記事では background-color について解説しました。

background-color とは、要素の背景色を指定するプロパティです。

最後までお読みいただきありがとうございます。