4回目の投稿です。

本日のお題はCSS!
Progateの内容はレッスン9まで！
昨日の少しと合わせて所要時は30分ほど。
けど、単純にProgateするだけなら10分くらいかな。
いろいろ試してみたり、興味から別のこと調べたりするからこれくらいかかってます。
いったんこれで45分ほど勉強しましたが、概要はわかったのではないでしょうか。

ということで本日の内容！

CSSとは

昨日も少しだけ調べてみたのだけれど、基本的にはHTMLで表示したものをおしゃれにするものである。と理解しています。
昨日まではタグ単位で色を変えてたりしましたが、classというものがあって、タグを自分で好きなようにグループ分けできるのです。

例えば、<li></li>タグで3つのことをリスト表示するときに、色分けしたい！ってなっても、

ここはHTML
<li>リンゴ</li>
<li>バナナ</li>
<li>モモ</li>



"ここはCSS"
li{
 color:red;
}

こんな感じにすると、3つ全部赤色になっちゃう。
これをグループ分けして、それぞれ違う色にできるのがclassということですね。
で、どうすればいいかというと、これ。

ここはHTML
<li class="red_fruits">リンゴ</li>
<li class="yellow_fruits">バナナ</li>
<li class="pink_fruits">モモ</li>



"ここはCSS"
.red_fruits{
 color:red;
}

.yellow_fruits{
 color:yellow;
}

.pink_fruits{
 color:pink;
}

書くことは増えたけど、これで色分けできますね。
.（ドット）＋class名でしていできると用です。

HTMLとCSSが分かれているメリット

と、ここまでやってきて、気づいたことがありました。
CSSとHTMLを分けるメリットですね。
最初は分かれてると見やすいよねと思ったくらいでしたが、
分かれているっってそれ以上のメリットがありそうです。

ここはHTML
<li class="red_fruits">リンゴ</li>
<li class="yellow_fruits">バナナ</li>
<li class="pink_fruits">モモ</li>

これ追加
<li class="yellow_fruits">レモン</li>




"ここはCSS"
.red_fruits{
 color:red;
}

.yellow_fruits{
 color:yellow;
}

.pink_fruits{
 color:pink;
}

例えば上のように、やっぱレモンも追加！ってなった場合に、
yellow_fruitsのclassはもうあるので、それを書いとけばCSSはもう書かなくていいんです！

これがもしHTMLで色の管理しなくちゃいけなかったら、
例えば、こんな感じになってたかもしれない。

ここはHTML
<li color="red">リンゴ</li>
<li color="yellow">バナナ</li>
<li color="pink">モモ</li>

これ追加
<li color="yellow">レモン</li>
　

※color=とかないと思いますが、例えばです。

めっちゃすっきりするやん！と思った初心者がいたら甘いですね。
これは色の指定だけだったらこれのほうがいいんですが、もっといろんな要素があるんですよね。
文字のサイズとか背景色とかフォントとか、CSSに書くことを全部それぞれのタグに書いてると死ぬほど大変そうですよね。

それが先にひとまとまりになっていて、classを書けばいいだけって素晴らしいですね。
この気づきは何かプログラムの重要な事なきがしています。（大げさでしょうが。）

classのつけ方

と、ここまでで、個人的に重要になるかなと感じたのがclassのつけ方です。

つまり、どんなグループに分けるかということです。
例えば、こんな感じで分けちゃうと。。。

ここはHTML
<li class="apple">リンゴ</li>
<li class="banana">バナナ</li>
<li class="peach">モモ</li>

これ追加
<li class="lemon">レモン</li>




"ここはCSS"
.apple{
 color:red;
}

.banana{
 color:yellow;
}

.peach{
 color:pink;
}

ここ追加
.lemon{
 color:yellow;
}

同じ内容なのに、バナナとレモンで別々のCSS書かなきゃいけないんです。

これってとても無駄な気がするので、こんな感じにならないように、
最適なグルーピングを心掛ける必要がありそうです。

というのがなんとなくわかりましたが、どんなのが最適なのかはまだわからないです。。。

おそらくこれがうまい人が"きれいなプログラム"というのを書くのかなと思います。
そこは今から練習していく！

～まとめ～

・CSSはHTMLをおしゃれにするもの
・classを上手に使ってまとめると省エネできれいなコードがかけそう！