HTMLとCSSの基本：クラスの使い方と親子関係でスタイルを正しく適用する方法

はじめに

私はWebデザインの超初学者です。過去に一度HTMLとCSSを挫折してます。
これからも挫折する可能性はありますが、将来のために少しでも毎日コツコツ頑張っています。
誤りがある箇所についてはご指摘いただけますと幸いです。

△ 私が実際にハマったのは、、、

classもCSSもあっているのに反映されない！？
なんで！？
(下記codeあり)

【結論】

・親要素のclassにstyleを当てないと反映されない。
・色々装飾したい時は、しっかり<div></div>を活用してclassを与える。

? そもそも classってなに

・「同じように見せたい箇所全部」 or 「一部分だけ」 styleを当てる時に使う。
・classはHTMLに書いて設定する。
・class名に絶対的な決まりはなく、その人のセンスによるところもある。

◎ class を使うメリット

1 . スタイルを再利用できて効率的！
クラスを使うことで、同じスタイルを複数の要素に簡単に適用できる。
→ スタイルを再利用することができ、コードが効率的になる。

2 . セレクタの特異性を制御！
クラスセレクタはタグセレクタや属性セレクタよりも特異性が高い。
→ スタイルの適用優先順位を簡単に制御できる。
（上記抜粋）

実際に書いていたコード⬇️

× NG

【code】

index.html

<span class="btn-message">さっそく開発する</span>

style.css

.btn-message span {
  color: #fff;
  background-color: #5dca88;
  display: inline-block;
  padding: 15px 40px;
}

【見た目】

→　class="btn-message" と同じ階層(横並びに記載している)に <span></<span> があるため、CSSをあてても効かない。

◎OK

【code】

index.html

<div class="btn-message">
　　<span >さっそく開発する</span>
</div>

style.css

.btn-message span {
  color: #fff;
  background-color: #5dca88;
  display: inline-block;
  padding: 15px 40px;
}

【見た目】

→　classのしている一つ下の階層（インデント下げしてるところ）にstyleがあたる。

おわりに

大事なのは要素の親子関係。
行数が少し増えてでもclassを与えないと完成しないということを学びました。
記憶力は求められないけど、丁寧さは必要だと感じました。
雑にclassつけると後々ぐちゃぐちゃになって後悔するので、整理しながらかけるようになりたいと思いました。
最初から綺麗にかけるに越したことなし〜！だが、最初からはむずかしい。
毎日こつこつ頑張ります。