CSSの設定は「AのBをCにする」をまずは理解しよう

Webプログラミングの中で、CSSで見栄えを設定していきますが、CSSの設定方法として、「プロパティ 」と「値」をそれぞれ、設定していきます。
ここでは、この２つを覚えましょう。

CSSの設定方法

「AのBをCにする」で設定

Webプログラミングの初心者の方には、
「AのBをCにする」
と言われても、なんのことかわからないと感じるかもしれませんが、とてもシンプルなので、簡単な例でみていきましょう。

body {
  background-color: red;
}

これを例にすると、

body

の

background-color（背景）

を

red（赤色）

にする。

このように見ると、非常にシンプルでわかりやすいと思います。

先ほどの、CSSを「AのBをCにする」で置き換えて見ると、

body {
  background-color: red;
}

このCSSは

A {
  B: C;
}

と考えることができます。

プロパティ と値

「BをCにする」がプロパティ と値

先ほど、説明したシンプルな例で

A {
  B: C;
}

B = プロパティ
C = 値

と読んでいます。

A {
  background-color: red;
  color: blue;
}

あとはこのように必要に応じて、B（プロパティ）とC（値）を増やしていくことになります。

上記の例は、Aに対して

「BをCにする」

が

background-color（背景）を red（赤色）にする

color（文字色）を blue（青色）にする

この２つを設定していることになります。

いかがでしたか。
シンプルな例でみていくと、「プロパティ 」と「値」に関しても、理解して頂けると思います。

この２つが「AのBをCにする」ことが理解できれば、あとは「B」と「C」の組み合わせを色々と試しながら覚えていくだけです。

この辺りは、楽しみながら覚えていきましょう。