CSSには何が書かれているか？

HTMLのタグで囲んだ情報に装飾を施すのがCSSの役割ですが、具体的にCSSには何が書かれているのでしょう。CSSに記述されていることの基本は意外にシンプルで「どこ」の「なに」を「どのように」するということが書かれているだけです。

「h1要素」の「文字色」を「赤色に」するという、「どこの・なにを・どのように」という形を書式化したものがCSSの基本的な書き方になります。

1. 「h1要素（どこの）」にあたるものが「セレクタ」
2. 「文字色（なにを）」にあたるものが「プロパティ」
3. 「赤色に（どのように）」あたるものが「値」

といわれるもので、これを書式化したものがCSSのコードになります。

CSSの基本的な書き方

CSSの書き方は次のようになります。

まず、セレクタは何にも囲まず先頭に書きます。それに続けてプロパティと値は「{}（波括弧）」で囲います。波括弧の中のプロパティと値は「:（コロン）」でつなぎ、この2つは常にセット使用します。このような書式で「セレクタ・プロパティ・値」を設定することにより「どこの・なにを・どのように」見た目に変えるのかを指定することができます。

セレクタ

セレクタにはデザインを適用したい対象、つまり「どの部分のデザインを変えるのか」を指定する部分です。要素名や、HTMLの要素に付加されたid属性やclass属性で指定した値であるid名やclass名などを使って指定することができます。より効率の良い指定をするために多くのセレクタの指定方法があります。

セレクタについてもっと詳しく見る

Note

HTMLのグローバル属性（どんなタグにでも設定できる属性）に「id属性」と「class属性」があります。id属性とclass属性の値には任意の名前を設定することができます。この名前によって要素を区別するのに（この場合CSSのセレクタに）利用することができます。

プロパティ

プロパティは「セレクタで指定された部分の何（どの性質）を変えるのか」を指定する部分です。色を変えるのか、線を引くのか、あるいは余白を調整するのかなどということを指定します。CSSには装飾やレイアウトのための様々なプロパティがたくさん用意されています。
例えば次のようなプロパティがあります。

• color：文字の色を指定するプロパティ
• font-size：文字の大きさを指定するプロパティ
• background-color：背景色を指定するプロパティ
• border：枠線を指定するプロパティ

どのような性質を指定するためのプロパティかが一目でわかるように、プロパティには非常にわかりやすい名前が付けられています。

値

値は「見た目をどのように変えるのか」を指定する部分です。たとえばセレクタとプロパティで「pタグの文字色を変える」ということが指定されているなら、値では「何色に変えるのか」を決める部分になります。

CSSの具体的なコード

では、実際のコードに置き換えたものをみてみましょう。
「セレクタ（どの部分のデザインを変えるのか」）に「h1」要素、「プロパティ（何を変えるのか）」に「color（文字色を指定するプロパティ）」、その「値（どのように変えるのか）」に「red（ R:255、G:0、B:0の赤色を指定するキーワード ）」を設定します。

CSSは基本的には半角英数文字で記述しなければなりませんので注意しましょう。（例外として「値」に「'（クォーテーション）」を使って全角文字を指定することができます。）

複数のプロパティを指定する

「セレクタ・プロパティ・値」までの一式を「ルールセット」と呼びます。波括弧のプロパティと値がまとまった部分を「宣言」と呼びます。

宣言はいくつでも書くことができます。複数のプロパティをまとめて指定したいときはひとつの宣言の最後に「;（セミコロン）」を付けます。これは一つの宣言の終了をあらわします。

いくつも宣言を書くとコードが見にくくなることがあります。宣言が一つ終わるたびに改行とインデントを入れて見やすいコードにするとよいでしょう。見やすいコードはミスを発見しやすくなります。

宣言をいくつも記述するときに、「;」を書き忘れるとそこが宣言の終了とみなされなずそれ以降に書いた宣言は全部無効になってしまいます。「;」を書き忘れてしまうことがないように、宣言が一つであっても常に「;」を書くように習慣づけたほうが不用意なミスを減らすことができるでしょう。

次のコードは、複数の宣言部分が並んだ時に改行とインデントで成形し、見やすいようにしています。

h1 {
    color: red;
    font-size: 16px;
    line-height: 1.6;
}