CSSの基本書式

CSSの基本書式イメージ

図は、スタイルシートの基本的な書式です。

書式は、セレクタ「h1」および宣言「color:pink」という2つの主要部分から構成されています。宣言は、プロパティ名「color」：プロパティ値「pink」のセットになります。

「{ }」は、宣言ブロックの始まりと終わり、「:」は、プロパティ名と値の区切り、「;」は、宣言の区切りです。

「h1 { color: pink; }」は、「h1要素の文字色はピンクにしてね。」という意味になります。

初期値

CSSでは、各プロパティに初期値が定められています。たとえば、font-size プロパティの初期値は medium ですが、値を指定しない場合は、この初期値が適用されます。しかし、 親要素から継承される値がある場合（※１）や、値に inherit というキーワードを指定している場合（※２）、カスケード処理で値が得られる場合（※３）はそれを適用します。

（※１） たとえば、親要素で font-size に値が指定されていた場合、それを受け継ぐことができます。
（※２） inherit は、強制的に継承させることができる値です。全てのCSSプロパティに指定できます。
（※３） カスケード処理とは、複数のスタイルシート間での優先順位を決めることです。

コメントの書き方

 /*～*/

「/*」と「*/」に囲まれた ～ の部分にコメントを書きます。「/」はスラッシュ、「*」はアスタリスクです。入れ子にはできません。

 h1 {
   color: pink;   /* 文字の色を指定 */
   font-size: 18pt;   /* 文字の大きさを指定 */
 }

/*
複数行にも
できます
*/

ベンダープレフィックス

ベンダープレフィックス（vendor prefix）とは、各ブラウザメーカーが勧告前のCSS3の仕様を先行実装する場合や独自に拡張したプロパティや値を記述するための特殊な接頭辞のことです。 プロパティや値の先頭に、ブラウザの種類を示す特殊な文字や記号を付け足します。（ベンダープレフィックスは、勧告候補になったら外すことが推奨されています。）

※ CSSの各プロパティのブラウザ対応状況を確認できるサイト： Can I use... Support tables for HTML5, CSS3, etc

文字とケース (Characters and case)

文字とケースにおいて、以下の規則が常に成り立ちます。

全ての CSS 構文は、ASCII 範囲内で大文字と小文字を区別しません。[a～z] と[A～Z] は同等となります。CSS の管理下にない部分は除きます。 例えば、HTML属性　" id " と " class " の値や、フォント名、URI の大文字と小文字の区別は、この仕様の範囲外にあります。 HTML での要素名は大文字と小文字を区別しませんが、XML では大文字と小文字を区別することに注意が必要です。

CSS で、識別子（クラス名やID名など）に使える文字は、アルファベット（a～z、A～Z）、数字（0～9）、ハイフン（-）、アンダースコア（_）、 ISO 10646 の文字（ U+00A0 以降）のみになります。

識別子は数字、2ハイフン、数字が続くハイフンで始めることはできません。

識別子は、エスケープ文字（¥）と数字コードなどの任意の ISO 10646 文字を含めることもできます。 例えば、識別子 " B&W? " は、" B¥&W¥? " や " B¥26 W¥3F " のように記述することもできます。

バックスラッシュ（¥）でエスケープ （内容を表示）

※ 翻訳が間違ってるかもしれません。

CSS2.1 では、バックスラッシュ（¥）文字は、以下のエスケープ文字３種類の内いずれかを示します。（日本語のフォントでは円記号）

１．CSSのコメント内では、バックスラッシュそのものを表し、 バックスラッシュがスタイルシートの最後の直後に来る場合も、バックスラッシュそのものを表します。（ DELIM token ）

文字列内で、直後に改行が続くバックスラッシュは無視されます。（文字列はバックスラッシュや改行のいずれかを含んでいないとみなされる）

文字列外で、直後に改行が続くバックスラッシュは、それ自身を表します。（改行が続く DELIM / DELIM followed by a newline ）

２．特別な CSS の文字の意味をキャンセルする。 任意の文字（16進数の数字、改行、キャリッジリターン、またはフォームフィードを除く）は、 その特別な意味を除去するためにバックスラッシュでエスケープすることができます。たとえば、"¥"" は、一つの二重引用符で構成される文字列です。 スタイルシートの意味が変わってしまうので、スタイルシートのプリプロセッサは、 スタイルシートからこれらのバックスラッシュを削除してはいけないと CSS2.1 には記載されています。

３．バックスラッシュエスケープは、作成者がそれらを簡単に文書に置くことができない文字を参照することができます。 この場合、バックスラッシュの後には、0 ではない ISO 10646 文字コードを表す、最大で 6桁の 16進数（ 0..9A..F ）が続きます。 （ Unicode のコードポイントで 0 の文字が含まれている場合に何が起こるか、 CSS2.1 で定義されていません。） 16進数の直後に、範囲内の文字（0～9、a～f、A～F）がある場合、コードの末尾を明確にする必要があります。

これを行うには、次のような二つの方法があります。

  1. " ¥26 B " (" &B ")のように、スペース（または他の空白文字）で示す。
    この場合、UA は、" CR/LF (U+000D/U+000A) " のペアを、単一の空白文字として扱う必要があります。
  2. "¥000026B" ("&B") のように、正確に 6桁の 16進数で表す。
    これらの2つの方法の組み合わせも可能です。16進数エスケープ後は、一つだけの空白文字は無視されますので、 "本当の"スペースを挿入したい場合は、スペースを２倍にしなければならないということに注意してください。

数値が Unicode の許容範囲外（たとえば、" ¥110000 " は現在の Unicode で許可された最大 10FFFF を超えています。）である場合、 UA は「置換文字（U + FFFD）」でエスケープに置き換えることができます。 文字が表示される場合、UA は、" 不足している文字 " のグリフとして、目に見える記号を示す必要があります。

注：バックスラッシュエスケープは常に識別子または文字列の一部であると見なされます。 （ " { " は句読点ですが、" ¥7B " は句読点ではありません。同じく、" ¥32 " は、クラス名の先頭に許可されますが、" 2 " は許可されません。）

識別子 " te¥st " は、正確に " test " と同じ識別子です。

上に戻る