【6】CSSって具体的に何ができる？（プロパティについてざっくりと）

CSSは、セレクタ { プロパティ : 値 } というカタチが基本です。
（【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について）で詳細を）

セレクタは、HTML要素をセレクトするもの。
セレクトされた要素に、スタイルを与えるのが プロパティと その値です。

CSSでは きめ細かいレイアウトができるように、プロパティが数多く用意されています。
それぞれのプロパティによって、値の指定の仕方も違います。
すごい数なので、全部覚えるのは無理。
ですが、よく使う基本的なプロパティは、わりと限られているし、繰り返し使ううちに、スタンダードなモノはすぐ覚えられます。

今回は、どんな種類のプロパティがあって、何ができるかだけを、ざっくりと整理してみました。

こんなプロパティがあります

プロパティは、まず大きく分けて
●ディスプレイ用（見た目のスタイル）
●音声用（音声ブラウザ用のスタイル）
●印刷用（印刷時のスタイル）
があります。

このうちディスプレイ用のプロパティは、ざっとわけてこの2タイプあり。
●ほぼどんな要素にも使えるもの（メタデータ・コンテンツ以外の要素に使います）
●特定の要素専用のもの（Table, List, Ruby関連の要素専用のスタイル）

プロパティの分類を、図にしたらこんなかんじ。ものっすごく大雑把だけど。

CSS1、CSS2、CSS3 とレベルが上がるたびに、プロパティもセレクタもどんどん増えていきました。

ちなみに、実際は「CSS3」というものはありません。
CSS2より後は、CSSを各モジュールにわけ、それぞれの「level 3 」とされるものが総称で「CSS3」と呼ばれているだけ。

こうしてセレクタやプロパティの数が増えるほど、より細かなレイアウトができるようになります。ありがたいことですw。
しかし、新しいものを追いかける前に、基本的な知識を蓄えておかないと。
また、Scss（Sass）を使うにしても、CSSの基本をわかっていて、正しいコードを書けなければ、使えませんもんね。

Sass（Syntactically Awesome StyleSheet）とは、CSSを生成する言語。
ネスト（入れ子）、変数、条件分岐などの機能が使えます。CSSでは何度も同じコトを書かなきゃイケナイ場合もありますが、そのコードをコンパクトにまとめることができます。よりCSSに近いコードで書けるScss（Sassy CSS）のほうが普及しています。

というわけで、CSSの基本をとにかく勉強していきましょう。
この「ほんっとに...」では「ディスプレイ用」のスタイルを中心に話を進めていく予定です。

次回予告

CSSで指定するスタイルで、よく使うのは「サイズと色」。
文字やボックスのサイズを決めて、色を指定します。紙媒体でのレイアウトでも同じですね。
そこで次回は、サイズ指定の「単位」について。相対単位と絶対単位があります。