CSSOM（CSS Object Model）

概要

CSSOMは、JavaScriptを使用してCSSを操作するためのプログラミングインターフェースです。HTMLのDOMと同様に、CSSのスタイルルールをプログラムから動的に読み取り、変更することができます。

基本構造

CSSOMツリー

CSSOMは、CSSルールをツリー構造で表現します。

基本的な構造：

CSSStyleSheet
├── CSSRule
│  ├── セレクタ
│  └── スタイル宣言
└── CSSRule
    ├── セレクタ
    └── スタイル宣言

インターフェース階層

CSSOMの主要インターフェース
インターフェース	説明	主な用途
CSSStyleSheet	スタイルシート全体を表す	スタイルシートの操作
CSSRuleList	ルールの集合	ルールの列挙
CSSRule	個々のCSSルール	ルールの操作
CSSStyleDeclaration	スタイル宣言のセット	プロパティの操作

プログラミングインターフェース

スタイルの取得

要素のスタイル取得

コンピューテッドスタイルの取得：

const element = document.querySelector('.example');
const style = window.getComputedStyle(element);
console.log(style.backgroundColor);

インラインスタイルの操作

style属性の操作：

element.style.backgroundColor = 'red';
element.style.setProperty('background-color', 'red');

スタイルシートの操作

スタイルシートの追加

新規スタイルシートの作成：

const sheet = new CSSStyleSheet();
sheet.replaceSync('body { background: yellow; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

ルールの追加と削除

CSSルールの操作：

const stylesheet = document.styleSheets[0];
stylesheet.insertRule('body { background: blue; }', 0);
stylesheet.deleteRule(0);

パフォーマンスと最適化

レイアウトスラッシング

問題のある実装：

// レイアウトスラッシングを引き起こす
elements.forEach(el => {
  const height = el.offsetHeight;
  el.style.height = height * 2 + 'px';
});

最適化された実装：

// バッチ処理による最適化
const heights = elements.map(el => el.offsetHeight);
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2 + 'px';
});

アニメーションの最適化

requestAnimationFrameの使用

スムーズなアニメーション：

function animate() {
  element.style.transform = `translateX(${position}px)`;
  position += 1;
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

アニメーションとトランジション

CSSアニメーションの制御

アニメーションイベントの処理：

element.addEventListener('animationstart', (e) => {
  console.log('アニメーション開始:', e.animationName);
});

element.addEventListener('animationend', (e) => {
  console.log('アニメーション終了:', e.animationName);
});

トランジションの制御

トランジションイベントの処理：

element.addEventListener('transitionend', (e) => {
  console.log('プロパティ:', e.propertyName);
  console.log('所要時間:', e.elapsedTime);
});

メディアクエリ

メディアクエリの監視

matchMediaの使用：

const mql = window.matchMedia('(max-width: 600px)');

mql.addEventListener('change', (e) => {
  if (e.matches) {
    console.log('モバイルビュー');
  } else {
    console.log('デスクトップビュー');
  }
});

ブラウザ互換性

主要ブラウザのサポート状況

CSSOM機能のサポート状況
機能	Chrome	Firefox	Safari	Edge
getComputedStyle	○	○	○	○
CSSStyleSheet	○	○	○	○
adoptedStyleSheets	○	○	△	○

演習問題

要素のスタイルを動的に変更するプログラムを作成してください。
メディアクエリを使用して、画面サイズに応じてスタイルを変更するプログラムを実装してください。
アニメーションの進行状況を監視し、特定のタイミングで処理を実行するプログラムを作成してください。

参考文献