css用コードの利用②

前回はcssでカラーコード（#f44336など）を利用しましたが、今回はカラー名を利用してみようと思います。

また、class属性ではなく、id属性を利用してみます。class属性とid属性の違いはclass属性では同じ名前定義が可能ですが、id属性では同じ名前定義が不可となっています。id属性の方が１つに定まるのでそれを利用したいと思います。

id属性にともなってcssに記入するコードの変わります。

赤

青

黄

html

<p id=”red”>赤</p><p id=”blue”>青</p><p id=”yellow”>黄</p>

id属性以外は前回と同じです。

css

#red{
color:red;
}
#blue{
color:blue;
}
#yellow{
color:yellow;
}

cssの書き方が大きく変わりました。#を使ってid属性でつけた名前を指定します。

id属性は性質上複数に指定できないのでCSSの書き方も変わるんですね。

カラー名を使うとすっきりして、かつ何色かわかりやすくなりました。

カラー名は１４７種類用意されているので、意外と使えるのかもしれません。