IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

CSS の名前の整理

CSS の話をする時に

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

仕様

ここの仕様を見て書いています。
CSS Syntax Module Level 3

CSS

日本語では「スィーエスエス」と言いますね。
CSS とはHTML, XML の要素をどのように表示するかを示すための仕様のことです。

style sheet

日本語では「スタイルシート」と言いますね。
これはすごくやっかいな言葉です。以下の二つ意味があるからです。

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

こんなところです

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