IT戦記

CSS の名前の整理

CSS

CSS の話をする時に

名前をはっきりさせてないと混乱するので、整理しておこう。自分用です。けっこう適当です。

仕様

ここの仕様を見て書いています。

CSS3 module: Syntax

CSS

日本語では「スィーエスエス」と言いますね。

CSS とはHTML, XML の要素をどのように表示するかを示すための仕様のことです。

style sheet

日本語では「スタイルシート」と言いますね。

これはすごくやっかいな言葉です。以下の二つ意味があるからです。

• HTML, XML の表示形式を制御する概念のこと。 CSS は、このスタイルシートという概念を実現するための一つの仕様。
• CSS の仕様に従って書かれたファイルや style 要素の内容。簡単にいうと css ファイルや style 要素の内容一個一個がスタイルシート。このエントリでは、こっちのほうは「CSS スタイルシート」と呼ぶことにします。JavaScript では、 CSSStyleSheet オブジェクト。

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 オブジェクトのプロパティ値のこと

こんなところです

間違えないようにしましょう（自戒

ツイートする

Permalink | コメント(1) | トラックバック(0) | 21:04