7.装飾をするためにCSSを使う

HTMLができたら次は装飾を施すためにCSSを学んでいきましょう。

CSSとは？

CSSとはカスケーディング・スタイル・シート（Cascading Style Sheet）の略で、HTMLで作成したデータに対しスタイルを指定して色や形を変更するための言語です。
HTMLに対しての言語なのでCSS単体では意味を持ちません。

なぜ別にする必要があるのか？

HTMLに全部スタイルも書いてしまえばラクじゃないか？なぜわざわざスタイルを分ける必要があるのか？
実はまだHTMLの歴史が浅い頃はHTMLファイルにスタイルを定義するタグがありました。<center>、<i>、<big>などがそうでした。これが次第に「HTMLはコンテンツの中身として、見栄えやスタイルは新しくCSSにまとめよう」という動きになりました。
こうすればコンテンツをいじらずデザインを変えることができます。膨大に増え続けるウェブページを効率よく検索ロボットがクロールするためというのもあります。

CSSの書き方

今までのHTMLとはちょっと書き方が変わります。まずは基本の書き方です。

図で説明するとこんな感じです。

セレクタ：HTMLタグやid名、クラス名等どこにCSSを定義するか
プロパティ：セレクターに対してどのような処理を行うか
値（あたい）：選択したプロパティの細かい数値や種類の決定

先ほどの例を説明すると「h1というHTMLタグに対してフォントの大きさを20pxにしてください」という命令になります。
基本のCSSは以下のような型になります。

では同じH1に対して色を赤くしたいという命令をするときはどうすればいいでしょうか？プロパティはcolor、値はredとして考えると

これでも間違いではないですが、h1が2回表示されているので効率悪いですよね。そこで同じセレクタはまとめてしまいましょう。

これで1つのセレクタに2つのプロパティと値のセットが書け、無事h1はフォントが大きくなり色も赤くなりました。こんな感じで一つのセレクタに複数のプロパティを書いていくので例えば10個とかプロパティを書くと「どれがプロパティでどれが値か」わかりづらい。こういう感じに見難いCSSになってしまいます。

そこでこれをもう少し見やすくしてみましょう。

こうするとかなり見やすくなりました。基本的にはこのようにプロパティの前に「改行と隙間」をあけてあげ、セレクタに対し入れ子構造で書いてあげると視認性も上がり書きやすく読みやすいCSSファイルが出来上がります。
ちなみにこの隙間は「スペース」であけてもいいですが、「タブキー」を使って開けてあげるのが一般的です。

まとめ

CSSには「セレクタ、プロパティ、値」の3種類があって、セレクタはHTMLやid名、Class名など、プロパティはそのターゲットをどうするか、値はプロパティの数値やジャンルなどを決めることでCSSが定義されるというのを学びました。
「HTMLの次にCSSも学ばないとなのか…」と思うかもしれませんが、HTMLをここまで学んできているのでそこまで難しくは無いはずです。CSSの楽しみを覚えると感覚で組み立てていけるのでかなり楽しく感じれるようになります。
プロパティと値はたくさん種類があって覚えようとなるとかなりキツイ作業なのでやりながら覚えていきましょう。全部暗記する必要はないです。
次回以降メインで使うプロパティをピックアップして解説します。