css用コードの利用

htmlとcssを使って文字の色を変えてみた。

赤

青

黄

コードはこんな感じ

html

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

css

:root{
–red : #f44336;
–blue : #0d47a1;
–yellow : #ffed3b;
}
p.red{
color: var(–red);
}
p.blue{
color: var(–blue);
}
p.yellow{
color: var(–yellow);
}

• htmlでは<p>タグにclass属性を使って名前を付けた。
  • class属性ではわかりやすい様に何色にするかの色を名前に付けた。

• cssで「:root」と「var()」を使った。
  • 「:root」は文字と値を定義することが出来て、「var()」は「:root」で設定した値を読み込む時に使う呪文。
  • 「:root」で使っている名前は解りやすいように色とカラーコード。
  • 「:root」と「var()」を使わずに直接値を入力してもいいんですが、個人的に名前を付けた方が分かりやすいので使ってみた。