1. 開発者向けのウェブ技術
  2. Web API
  3. CSS オブジェクトモデル (CSSOM)
  4. CSS 宣言ブロック

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS 宣言ブロック

CSS 宣言ブロックは、 CSS のプロパティと値を順番に集めたものです。 DOM では CSSStyleDeclaration として表現されます。

それぞれのプロパティと値の組は、CSS 宣言 として知られています。 CSS 宣言ブロックには、以下の関連するプロパティがあります。

computed フラグ

CSSStyleDeclaration オブジェクトが指定されたスタイルではなく、計算されたスタイルである場合に設定されます。既定では未設定です。

宣言

このオブジェクトに関連付けられた CSS 宣言です。

親 CSS ルール

CSS 宣言ブロックが関連付けられている CSSRule です。

オーナーノード

この CSS 宣言ブロックが関連付けられている要素。それ以外は null。

更新フラグ

この CSS 宣言ブロックがオーナーノードの style 属性を更新している場合に設定されます。

CSSStyleDeclaration が CSS Object Model (CSSOM) インターフェイスによって返されると、これらのプロパティは、仕様によって定義された適切な値に設定されます。

基本的な例

以下の例は、 <h1> 要素に対する宣言ブロックを持つ CSS ルールを示しています。 CSS の宣言ブロックは、中括弧で囲まれた行です。

css
h1 {
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  color: rebeccapurple;
}

この CSS 宣言ブロックを表す CSSStyleDeclaration を CSSStyleRule.style で使用することで返すことができます。

js
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0]; // a CSSStyleRule
console.log(rule.style); // a CSSStyleDeclaration object

仕様書

Specification
CSS Object Model (CSSOM)
# css-declaration-blocks

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content