超ざっくりCSSが読めるようになる記事

手っ取り早く、構造だけ知りましょう。
HTMLがわからない方はこちらからどうぞ。
tsukisuke.hateblo.jp

CSSとは

ウェブページに飾りを与えるもの。
HTML内に直接書いたり、別のファイルとして用意してHTML内で呼び出したりして使う。

タグとクラスとID

HTMLには、タグ、クラス、IDの概念がある。
これが理解できていない場合はHTMLの勉強に戻ろう。

飾る対象を、タグがクラスかIDで指定する。
例えば、以下のようなHTMLがあったとする。

<div class="exclass" id="exid">個々の文字の色を変える</div>

この時、CSSはこんな風に書ける。

div { 
  color: red;
 }
.exclass {
  color: red;
}
#exid {
  color: red;
}

上記からわかるように、タグの場合はそのまま、クラスの場合は ' . ' をつけて、IDの場合は ' # ' を付けて記述する。

複数個同時

タグやクラスは複数同じものが存在する。
適切に使えば、同時に複数の箇所の装飾が変えられる。

種類

たくさんありすぎるので、逐次調べるしかない。

細かい話

HTMLにブロック要素とインライン要素があるという話を前回書いた。
これをCSSからいじることができる。
そして、実はそれ以外の概念が存在し、CSS上でいじることができる。

が、複雑すぎるのでこれは自ら書く側に周るときに知れば良いだろう。
Flex とか Grid とか。。。