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

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

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(青色)にする

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

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

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

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