2022-08-27

CSS: 基本書式

CSSの基本書式について説明します。 CCSの記述は通常次のようにセレクタ、プロパティ、値の3つを使って記述します。具体的な書式については次の章で説明します。

セレクタ（selector）、プロパティ（property）、値（value）

まずは３つの用語を押えてください。 セレクタ（selector）、プロパティ（property）、値（value）の３つです。各用語の意味は次のようになります。

具体的に見てみましょう。

次の場合は、「div 要素の文字色（color）を "red" にする」という意味になります。

div {color: red;}

次の場合は、「h1 要素の文字サイズ（font-size）を"18px"にする」という意味になります。

h1 {font-size: 18px;}

このように、CSSの指定は「セレクタのプロパティを値にする」という形で指定します。

セレクタ {プロパティ: 値;}

プロパティと値は「コロン（:）」で区切り、値の後に「セミコロン（;」）をつけます。そしてプロパティと値のセットを「波括弧 {}」で囲みます。

プロパティの指定が１つの場合はセミコロン（;）は無くても構いません。

プロパティと値の間には空白スペースを入れることができます。「color:red」よりも間に空白を１つ入れて「color: red」とした方が見やすくなります。但し、プロパティと値の途中に空白を入れることはできません。（例「c o l o r: r e d」はダメ）

プロパティを複数指定する場合は、次のように記述します。


p {color: red; font-size: 15px;}

上記を複数行に分けて記述すると次のようにも記述できます。


p {
    color: red;
    font-size: 15px;
}

上の記述よりも、下の記述の方が見やすいと思います。通常は下のように複数行に分けて見やすいように記述します。