たったのこれだけ!CSSの基本書式

どこを飾る?セレクタ

CSSを書くために、基本となる書式を覚えましょう。まず、一つ目は「セレクタ」。ウェブページのなかにある、「どの要素」をCSSで装飾するかを指定するための記述です。セレクタの使い方として、たとえば、p(段落)、h1(見出し)、table(表)といった要素を指定することも出来ます。また、class指定やID指定を利用して.kazariや#pointなど、任意の場所を指定することもできます。classやIDは、HTML内に記述することで、場所を指定します。たとえば、<p class="kazari">クラス指定で飾りたい内容</p>といったようにです。
記述方法は「セレクタ{装飾内容}」です。たとえば、見出しの色を赤にしたければ、「h1{文字の色を赤に}」となります。

どのスタイルを変える?プロパティ・値

CSSの次の基本は「プロパティ」と「値」です。プロパティは、セレクタの中のどのスタイルを変えるかを記述します。たとえば、文字の色(color)・大きさ(font-size)・フォントの種類(font-family)を変えたい、背景に色を付けたり画像を配置したい(background)、余白をとって少し離れた場所に配置したい(margin、padding)など、様々な種類があります。値は、指定したプロパティをどのように変更するかを記述します。redやblueといった色の指定、10pxといったサイズ指定があります。
記述方法は「セレクタ{プロパティ:値}」です。たとえば、見出しの色を赤にして、周囲に10pxの余白をとりたい場合は「h1{color:red;margin:10px}」となります。一つのセレクタに複数のプロパティを指定したい場合は、「;」で区切りましょう。