CSS講座 / CSSの基本文法：セレクター・宣言・コメント・エラー

CSS講座

CSSの規則は、対象を選ぶセレクターと、波括弧内の「プロパティ: 値;」という宣言で構成します。誤った宣言があってもほかの有効な部分は動くことがあるため、どこまで無効になるかを切り分けて調べます。

規則を構成する部分を読む

.notice {
  color: #087f5b;
  padding: 16px;
}

.noticeがセレクター、{ ... }が宣言ブロックです。colorやpaddingがプロパティ、#087f5bや16pxが値です。padding: 16px;の一組が宣言になります。

使える値はプロパティごとに違います。padding: blue;は余白の長さとして無効です。また16pxの数値と単位の間に空白を入れた16 pxは、一つの長さとして読まれません。

記号・改行・空白の意味

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

上の二つの規則は改行や字下げが異なるだけで、同じ宣言を適用します。学習中は一宣言ずつ改行すると記号の欠落を見つけやすくなります。最後のセミコロンは省略できる場合もありますが、宣言を追加するときの事故を避けるため付ける習慣が役立ちます。

一方、セレクターの空白は意味を変えます。.notice.urgentは両方のクラスを持つ同じ要素、.notice .urgentはnoticeの内側にあるurgent要素です。選び方は基本セレクターの比較と対応させます。MDNのCSSの基本説明にも規則の構造が示されています。

セレクターをまとめ、コメントを書く

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

カンマで区切ったh1, h2は両方に同じ宣言を適用します。空白でつないだh1 h2はh1の内側のh2を探す別の条件です。

CSSのコメントは/*から*/までです。説明を残したり規則を一時的に外したりできますが、閉じ忘れると後のコードまでコメントになることがあります。通常のCSSでJavaScriptのような//は一行コメントの記法ではありません。

宣言のエラーとセレクターのエラー

ブラウザーは無効な部分を読み飛ばし、処理できる規則を続けて解釈します。ただし、いつも「間違った一行だけ」を無視するわけではありません。

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

この例ではpadding: blueだけが無効です。ほかの規則がなければ文字色と背景色は適用され、余白はこの宣言では変化しません。colroのような存在しないプロパティ名も認識されません。

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

セミコロンがないため、ブラウザーはblue background-color: #e9f7efをcolorの値として読みます。値が無効なので意図した文字色と背景色はどちらも適用されませんが、後のpadding: 16px;は有効です。blueの直後にセミコロンを加えます。

h1, .notice:made-up-state {
  color: blue;
}

通常のカンマ区切りリストに未知の擬似クラスがあると、この規則はh1にも適用されません。一部の特別なセレクターリストには無効な項目を許容する構文があるため、すべての文脈が同じではありません。MDNのCSSエラー処理で適用範囲を確認できます。

完全な例を実行する

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

全体をUTF-8のindex.htmlに保存して開きます。h1とh2は同じ緑色、案内文には薄い背景、16pxの余白、1pxの枠が付きます。説明文は18pxで表示されます。font-sizeは文字サイズ、line-heightは行の高さ、borderは枠線を指定しています。

二つの誤りを修正して確かめる

元のファイルを別名でコピーしてから、完全な例の.notice部分を次で置き換えます。青い文字、薄緑の背景、16pxの余白に戻すのが目標です。

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

colroをcolorに直し、background-colorの後にコロンを入れます。余白の宣言はもともと有効なので、修正前も余白だけは残る場合があります。

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

保存して再読み込みし、文字色と背景の両方を確認します。変わらなければ開いているファイルのパスを見直し、開発者ツールで適用値を調べます。構文の誤り、選択対象の誤り、ほかの規則との競合を区別してから次の変更を行います。

CSS講座