8.CSSとHTMLタグの関係 ～切っても切れない関係～
何の為に書くのか
HTMLやCSSを何のために書くのか？
考えたことはありますか。
私は現在デイトラで学んでいますが、
大半の時間が「見え方」を変更する為に書いています。
ということは、殆どのコードが「デザイン目的の内容」ということです。
そして、今回はそのデザインの指示書でもある、
CSSについて整理していきます。
CSSってなんだっけ？
CSSはデザインに関する情報を記述するテキストファイルです。
例えば、
- 文字の大きさ
- 背景の色
- フォント
etc...
こうした内容をつらつらと記述していくわけです。
でも、どこにどうやってそのデザインを反映させるの？
と思ったそこのあなた！
そうなんですよ、今回は特に「どうやってデザインを反映させる」のか
の部分について整理していきます。
まずはCSSの書き方について
- セレクタ
- プロパティ
- 値
の３つを使って、
セレクタ{ プロパティ : 値 }
のように書きます。
そして、これらの役割はそれぞれ
- どこの
- 何を
- どんな風に
を指定する為にあります。
セレクタ{ プロパティ : 値 } を
どこの{ 何を：どんな風に }
と言い換えるとわかりやすくなると思います。
それでは各々詳細に見ていきましょう。
「何を」を指定する「プロパティ」
プロパティは
文字の大きさや色、余白など
デザインにおける「何を」を指定する為に使います。
例をあげると、
文字色ならcolor
文字の大きさならfont-size
背景の色ならbackground-color
等です。
また、プロパティは値とセットで使います。
「どんな風に」を指定する「値」
値はプロパティが「文字色」なら値には「色」を指定しますし、
プロパティが「文字の大きさ」なら値にはpxなど「大きさ」を指定します。
例えば、
文字色を赤にする場合、プロパティは「文字色」で、値は「赤色」です。
どこの{ 文字色を ： 赤色に }
という具合にかけるわけです。
「どこの」を指定する「セレクタ」
今回の山場です。
「どこの」を指定することで、デザインを反映する対象を決めます。
「ここだけ～したい」とか、「この２は～にする」など
デザインを反映させる対象を柔軟に指定できます。
また、「どこの」は
- 要素名(タグ名)
- クラス名
- Id名
を指定します。
要素名を指定すれば、その要素全てに対して
クラス名を指定すれば、クラスに所属している要素すべてに対して
Id名を指定すれば、その固有要素に対して
それぞれデザインを反映することができます。
この「セレクタ」の指定をうまく活用することで、
デザインを効率良く行うことができます。
今日のまとめ
ということで、今回はCSSについて整理してきました。
今後は、もう少し掘り下げたいと思います。
