CSS 構文の詳細解説：ルール、宣言、コメント、そしてさらなる例

CSS（カスケーディングスタイルシート）は、HTML ドキュメントの外観や形式を記述するための言語です。CSS ルールは、2 つの主要な部分で構成されています：セレクタと宣言。セレクタはスタイルを適用する HTML 要素を指定し、宣言はスタイルの具体的なプロパティと値を定義します。

CSS ルール

CSS ルールは、2 つの主要な部分で構成されています：セレクタと、1 つ以上の宣言。セレクタは、スタイルを変更したい HTML 要素を指定します。各宣言は、プロパティと値から成り立っており、プロパティ（property）は設定したいスタイルの属性（style attribute）で、各プロパティには値があります。プロパティと値はコロン（:）で区切られ、CSS 宣言は常にセミコロン（;）で終わり、宣言は大括弧（{}）で囲まれます。

ルールの例

selector {
    property: value;
}

CSS 仕様の例

例 1

以下の例は、CSS スタイルを使用して HTML 要素の外観を変更する方法を示しています：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
</body>
</html>

CSS 语法

この例では、すべての <p> 要素が青色で表示され、フォントサイズは 16 ピクセルになります。

例 2

別の例：

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            background-color: yellow;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
</body>
</html>

この例では、すべての <h1> 要素が黄色の背景色を持ち、テキストが中央に配置されます。

CSS コメント

コメントは、CSS コードを説明するために使用され、ブラウザはこれらのコメントを無視します。CSS コメントは /* で始まり、*/ で終わります。

コメントの例

/* これは CSS コメントです */
p {
    color: blue; /* これによりテキストの色が青に設定されます */
}

CSS 宣言 (CSS Declarations)

CSS 宣言は、プロパティと値のキー・バリュー対で構成されています。プロパティ名とプロパティ値は大文字と小文字を区別しません。プロパティと値の間はコロンで区切られ、空白は無視されます。CSS プロパティと値の有効性に関して、無効な宣言は無視されます。

宣言の例

p {
    color: red; /* プロパティ: 値 */
    margin: 10px;
}

CSS 宣言ブロック (CSS Declaration Blocks)

CSS 宣言ブロックは { で始まり、} で終わります。宣言ブロックはネストすることができます。宣言間はセミコロン（;）で区切り、最後の宣言のセミコロンは省略可能ですが、保留することが推奨されます。宣言ブロックは空でも構わず、空白は無視されます。宣言ブロックの内容は、HTML の style 属性にも記述できます。

宣言ブロックの例

p {
    color: green;
    font-size: 14px;
}
<p style="color: green; font-size: 14px;">This is a paragraph.</p>

CSS ルール (CSS Rules)

CSS ルールは、セレクタと宣言ブロックの組み合わせで構成されています。セレクタはページ要素を選択し、1 つの要素が複数のセレクタによって選択されることがあります。複数のルールが同じ要素に適用される場合、カスケーディングアルゴリズムが最終的に適用されるスタイルを決定します。ルールセット内のいずれかのセレクタが無効であると、ルールセット全体が無効になります。

ルールの例

h1, h2 {
    font-family: Arial, sans-serif;
}

CSS ステートメント (CSS Statements)

CSS ステートメントは、ルール以外のスタイルシート内の情報を含みます。ステートメントは空白以外の文字で始まり、} または ; で終わります。ステートメントの種類は以下の通りです：

ルール（Rules）：前述の通り。
at ルール（At-rules）：@ で始まるルール、例えば @charset、@import、@media など。
無効なステートメントは無視されます。

`at` ルールの例

@import url("styles.css");
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

条件付きルールグループ（conditional group rules）は特殊な at ルールで、特定の条件下でのみ適用されるステートメントを含みます。

CSS 構文の詳細解説：ルール、宣言、コメント、そしてさらなる例

CSS ルール

ルールの例

CSS 仕様の例

例 1

例 2

CSS コメント

コメントの例

CSS 宣言 (CSS Declarations)

宣言の例

CSS 宣言ブロック (CSS Declaration Blocks)

宣言ブロックの例

CSS ルール (CSS Rules)

ルールの例

CSS ステートメント (CSS Statements)

at ルールの例

関連 Q&A

`at` ルールの例