前回に続いてのclassについての記事です。
初めてのジーズでの課題でこの点に非常に苦しめられたので、備忘録として記載します。

悪戦苦闘している自分の姿が、プログラミングを始めようとしている誰かの参考や励みになれば幸いです。
（今日の昼くらいにわからなくて泣きそうになりました…でも泣いてません。）

結論

最初にデザイン（CSS）を考えた際に、「インライン要素が良いか。ブロック要素が良いか。」を考えてclassの付け方を判断する。

3日前の自分とは結論が打って変わっています。
divだけで戦える限界は思ったより近かったです…笑
（というよりほとんど戦えていません。）

とはいえ自分もやっとマサラタウンでポケモンを選ぶことができ、今から物語を開始できるのかと思うと感無量です！

具体例

基本的には、初学者は量を書くために「迷ったらdiv」で進める方法で最初は問題ないかと考えております。
ただ勉強を進めていくとサイトを作る（デザイン）にあたって、インライン要素かブロック要素かを見極める必要があります。
これを見極めれないと、一生作りたいものは作れないです。

私はこれに2日かかりました…

例えば、画像の上にテキストを乗せる場合です。
この場合は、デザインによって①divでclassをつけないといけない場合、②＜p＞タグ等でないといけない場合があるので要注意です！

私はず〜っと、
「なんか画像の横にテキストがいくんだけど！」
「今度はテキストが消えた…！？（本当は画像の下にいっているだけ）」
「頼むから画像の上にいってくれ…」
「まじでだめだ…わからなすぎる」

など悩みまくり、神頼みまくりでした。

とはいえインライン要素かブロック要素かを上記を取り組むためには、見極める能力が必要です。
見極め方ではないですが、2つの要素について特徴を下記にて記載します。

・インライン要素…同世代なら誰とでも対等に話せる人（親には無理…）
→改行が入らない、高さや幅の指定ができない。

・ブロック要素…天皇の息子（どんな時も親と一緒、親が決めたルールを守りまくる。）
→改行が入る、高さや幅の指定ができる。

めっっちゃくちゃ厄介なことはどちらも「中央配置できる」ということです！
下記は私が散々、やられてきたcssですので皆様くれぐれもお気をつけください！

align-items: center;
margin:auto;
justyfy-contents:center

彼らについては私ももっと理解が深まったら、共有させていただきます！

classを＜div＞でつけるか、＜h＞や＜p＞などでつけるか迷ったときの考え方としては下記です。

①迷ったらdiv！（量を書くために、修正しやすい）
②デザインの構成からインライン要素、ブロック要素のどちらであるべきかを見極める。（←今ここ）

これ以降があるかわかりませんが、プログラミング初学者にとってステップの可視化になれば幸いです。