【初心者用】よくわかるcss入門・中編

cssを書くときは「セレクタ＝どこの？」「プロパティ＝何を？」「値＝どのように？」変えるかの３つの用ぞをそれぞれ記述する。

• セレクタの後ろの｛ ｝（波かっこ）
• プロパティの後ろに：（コロン）
• 値の後ろに；（セミコロン）

という記号の種類と書く位置もイラストのルールで決まっているので間違えないよう覚えよう。

左が実際のcss記述例だ。

• セレクタ部分がpタグ
• プロパティはcolor（文字の色）
• 値はred(赤色)

となっているので「pタグの中の文字の色を赤色にする」という意味の記述になる。

続いて３つの要素を詳しく解説していく。

cssテンプレートコード

body{
       color:red;
     }
    

例えば、イラストの例のコードの中でh1とpの文字の色を赤色に変えたいとしよう。

h1とpはどちらもbody要素に該当するのでbodyをせてセレクタに指定してあげればどちらの文字も赤色に代わる。

左のイラストのコードのように、上から１番目と2番目のpだけ文字を赤色にしたいとする。

その時セレクタは何を指定すればいいのだろうか？

「div」か？「p」か？・・・どちらも不正解だ。なぜなら、どちらも３番目のpを含む指定になってしまっているからだ。

それではすべての文字が赤色に変わってしまう。

そこでid/class属性を使おう。今回はスタイルを適用させたいp要素にだけclass=“red"とつけてみよう。

htmlテンプレートコード

<div>
 <p class="red">赤色にしたい</p>
 <p class="red">赤色にしたい</p>
 <p>黒色のまま</p>
</div>
    

cssテンプレートコード

.red{
  color : red;
}
    

cssのコードに注目してほしい。セレクタの部分に「.red」と書かれているのがわかるだろうか。

というようにそれぞれ書く。

ブラウザの表示結果も無事class名を指定した要素だけ文字色が赤に変わった。

プロパティ（意味：性質）には要素のどの部分を変更するかを指定する。例えば

• 文字の色なら：color
• 文字の大きさなら：font-size
• 背景画像なら：background-image
• 枠線なら：border
• 配置なら：position

と、どの部分を変えたいならどのプロパティを使うのかが、あらかじめ決まっている。

cssの書き方では「プロパティ：値」というように一行のセットになっている。

これはなぜかというと、値はプロパティによって何を書くことができるか決まっているからだ。

例を使って具体的に解説していこう。

左のコードは「p要素の文字揃え（text-align）をどうするかを指定するcssだ。

text-alignプロパティでは指定できる値が

1. left（左揃え）
2. center（真ん中揃え）
3. right（右揃え）
　

の、どれかと決まっている。

例が１つだけではわかりにくい方もいるかもしれないので、もう１つ例を出してみよう。

background-colorの値

背景色を変更する「background-color」で指定することのできる値は

1. Crimson/skyblueなどのカラーネーム
2. #efd760/#2e8b57などのカラーコード

のどちらかだ。