Files
everything-claude-code/docs/ja-JP/skills/remotion-video-creation/rules/measuring-dom-nodes.md
T
Claude 174e31b3fc feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)
Translated 85 skill sub-reference files to achieve full parity with
the English source:

- skills/angular-developer/references/ — 35 files (all references)
- skills/remotion-video-creation/rules/ — 28 files (all rules)
- skills/tinystruct-patterns/references/ — 5 files
- skills/openclaw-persona-forge/references/ — 6 files
- skills/skill-comply/prompts/ — 3 files
- skills/lead-intelligence/agents/ — 4 files
- skills/brand-voice/references/ — 1 file
- skills/frontend-slides/ — 2 files
- hooks/memory-persistence/README.md — 1 file

English source parity: 0 missing files (excluding rules/zh/, internal
docs, and experimental examples absent from zh-CN)
2026-05-18 06:15:26 +09:00

1.0 KiB

name, description, metadata
name description metadata
measuring-dom-nodes RemotionでDOM要素のサイズを測定する
tags
measure, layout, dimensions, getBoundingClientRect, scale

RemotionでDOMノードを測定する

Remotionはビデオコンテナに scale() トランスフォームを適用するため、getBoundingClientRect() から得られる値に影響します。正確な測定値を得るには useCurrentScale() を使用してください。

要素のサイズを測定する

import { useCurrentScale } from "remotion";
import { useRef, useEffect, useState } from "react";

export const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const scale = useCurrentScale();
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setDimensions({
      width: rect.width / scale,
      height: rect.height / scale,
    });
  }, [scale]);

  return <div ref={ref}>測定するコンテンツ</div>;
};