CSSの構文

CSSの構文

CSSは【ルールセット】という単位で、ページの要素に対して、色、位置、装飾などを指定していきます。
このルールセットの中で、【セレクタ】によって、対象となる要素を特定し、【プロパティ】と【プロパティ値】を組み合わせた【宣言】を記述することで、具体的な指定をしていきます。
【宣言】は必要に応じて複数記述することができ、その【宣言】のまとまりのことを【宣言ブロック】と呼びます。

CSSのルールセット

CSSのルールセットは、下図のようなひとまとまりの単位で、【どの要素】にたいして、【どんな装飾を行うか】を指定していきます。
CSSは、このルールセットを必要なだけ記述していく、という流れで作成していきます。
この例の場合は、【 <p> 要素に対して】、以下のような装飾を行っています。

• 文字色：赤
• 幅：500px
• 枠線：1px幅・黒色・実線

セレクタ

CSSで【どの要素】を指定するキーワードを【セレクタ】と呼びます。
セレクタは必ず「ルールセットの先頭」に記述し、複数の要素を指定する場合は、半角カンマで区切ります。
セレクタの種類には下記のものがあります。

• 要素セレクタ
• 全称セレクタ
• IDセレクタ
• クラスセレクタ
• 属性セレクタ
• 擬似クラスセレクタ
• 疑似要素セレクタ
• 子孫結合子
• 子結合子
• 隣接兄弟結合子
• 一般兄弟結合子

CSSの宣言と宣言ブロック

CSSの宣言は、下図のように【プロパティ】と【値】を組み合わせて行います。

• 【プロパティ】と【値】の間は半角コロン（：）で区切ります。
• 【宣言】の末尾には半角セミコロン（；）を置きます。
• プロパティと値の間、前、後ろにある半角スペースは無視されます。
• 宣言ブロックは必ず、左中括弧（｛ ）と右中括弧（ ｝）で囲みます。

ルールセット以外の文

CSSの基本は【ルールセット】の列挙ですが、それ以外の文も存在します。

@-規則

半角アットマーク（＠）に始まり、その後に【識別子】、【定義内容】を続けます。
識別子によって、微妙に書式が異なります。

一般的な構造のもの

@charset “utf-8”; のように、@[識別子] “定義内容”; というパターンで記載するもの。

• @charset
  • スタイルシートで使用される文字セットを定義します。
• @import
  • 外部のスタイルシートを読み込むように指示します。
• @namespace
  • 内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。

入れ子構造になるもの

下記の例のように、定義内容の部分がCSSのルールセットのような書式になるもの。

@media screen and (max-width: 768px) {
  /* 画面幅が768px以下のディスプレイの場合に適用されるルールセットを記述*/
  article {
    padding: 1rem 3rem;
  }
}

• @media
  • メディアクエリの条件を満たすデバイスで読み込まれた場合にこれの中身が適用される、条件付きグループ規則です。
• @supports
  • ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループ規則です。
• @page
  • 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。
• @font-face
  • ダウンロードすべき外部フォントに関する指定を記述します。
• @keyframes
  • CSS アニメーションシーケンスの中間ステップに関する指定を記述します。
• @counter-style
  • 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。

コメント

CSSファイル内に、必要な注釈コメントなどを付ける場合の書式も用意されています。
CSSのコメントは /* ではじまり */ でおわります。