CSSタグにクラス名で名前をつける方法｜初心者でも簡単に出来ます。

リスト<li>タグを使用した時に<li>要素にCSS要素を追加すると全ての<li>要素が赤くなってしまう。特定の要素にのみcssを適用するにはどうすればいいのかわからないといったお悩みを最近はいただいております。

本記事を読めば特定の要素やタグにCSSを反映させる方法がわかります。
初心者でもわかるように解説していきますので本気で学びたい方は私に5分ください＾＾

特定の要素（タグ）にCSSを適用するには？

特定の要素（タグ）に名前をつけるにはclassを使って名前をつけます。
またhtmlのシートでclass名をつけたものをcssのシートで使用する時には先頭にドットが必要になります。

class名は、同じシートに何度使用しても大丈夫です。
html要素に同じclass名を使用すれば同じcssが適用されます。

classにCSSを指定する際の注意点

classにcssを使用するときの注意点は最初にドットをつけることを忘れないことです。
タグの場合は必要ありません。

タグに名前を実際につけてみよう

では実際にタグに名前をつけてみましょう。

今回は私の好きな料理の色を変えていきます。
ハンバーグを赤に卵焼きを青に変えます。

まずはhtml画面はこうです。

次にcss画面です。

出力結果をみてみましょう。

いかがでしたか？
わからない部分があったら繰り返し練習してみましょう＾＾