CSS の話をする時に
名前をはっきりさせてないと混乱するので、整理しておこう。自分用です。けっこう適当です。
仕様
ここの仕様を見て書いています。
CSS Syntax Module Level 3
rule
日本語では「ルール」とか「規則」とか言いますね。
CSS スタイルシート内に書かれている @import url("hoge.css"); や @media print { ... } や div { width: 100px; height: 100px } のことです。
JavaScript では CSSRule オブジェクト。
rule set
日本語では「ルールセット」とか「規則集合」とか言いますね。
ルールの中でも div { ... } とかのようなものです。 @ が付かないルールと覚えておけばいいと思います。
JavaScript では CSSStyleRule オブジェクト
at-rule
日本語では「アットマークルール」と言いますね。
ルールの中でもルールセット以外のものです。 @import ... とか @media ... とか先頭に @ が付くルールですね。
JavaScript では、以下のようにそれぞれのアットマークルールごとにオブジェクトが定義されています。
- CSSCharsetRule
- CSSFontFaceRule
- CSSImportRule
- CSSMediaRule
- CSSPageRule
selector
日本語では「セレクタ」と言いますね。
ルールセットの中括弧の前に書かれてるやつです。 body, div { ... } とかだったら body, div がセレクタですね。
JavaScript だと CSSStyleRule オブジェクトの selectorText プロパティの値のこと。
declaration
日本語では「宣言」と言いますね。
ルールセットの中括弧の中にセミコロン区切りで書かれているやつです。 body, div { width: 100px; height: 100px } だと width: 100px と height: 100px が宣言ですね。
JavaScript だと CSSStyleDeclaration オブジェクトのそれぞれのプロパティ名とプロパティ値のこと
property
日本語では「プロパティ」と言いますね。
宣言のコロンで区切られた左側のやつです。 width とか font-size とかですね。
JavaScript だと CSSStyleDeclaration オブジェクトのプロパティ名のこと
value
日本語では「値」と言いますね。
宣言のコロンで区切られた右側のやつです。 100px とか 2em とか #ff0000 とかですね。
JavaScript だと CSSStyleDeclaration オブジェクトのプロパティ値のこと
こんなところです
間違えないようにしましょう(自戒