【シーエスエスフーディーニ】

CSS Houdini とは？

最終更新: 2026年10月4日

💡 CSSの描画やプロパティを、公開されたAPIで拡張

CSSの処理の一部を拡張するための低レベルAPI群。独自の画像を描くPaint APIや、カスタムプロパティの型・初期値などを定義するProperties and Values APIがある。利用できる範囲はAPIとブラウザによって異なる。

📌 このページのポイント

Paint APIを使う例。矢印は登録・読み込み済みの描画処理がCSSの画像として使われる関係です。Houdiniの全APIが同じ対応状況や同じ処理経路という意味ではありません。

ひよこ

何ができる仕組みなの？

ペンギン先生

CSSの処理の一部を、公開されたAPIで拡張できるよ。例えばPaint APIならJavaScriptで画像を描き、CSSの背景などに使える。ブラウザの内部全体や、あらゆるCSSの制限を自由に変えられるわけではないんだ

ひよこ

canvasと同じ？

ペンギン先生

描画用のAPIは似ている部分があるけれど、使い方が違うよ。Paint APIは描画処理をworkletに登録し、そのモジュールを読み込んでから、background-image: paint(名前)などで画像として使う。対応ブラウザで利用する仕組みなんだ

ひよこ

文字の色や数値にも型をつけられる？

ペンギン先生

カスタムプロパティなら、Properties and Values APIで型・初期値・継承の有無を定義できるよ。CSSの@propertyでも登録できるので、Houdiniの全機能にJavaScriptが必要というわけではないんだ

ひよこ

独自のレイアウトもどこでも使える？

ペンギン先生

Layout APIのように実験的なものもあり、Houdini全体をひとまとめに対応済みとは言えない。@propertyは主要ブラウザに広がっているけれど、Paint APIは同じ対応状況ではないよ。使うAPIと対象ブラウザを個別に確認するんだ

ひよこ

使えば速くなる？

ペンギン先生

必ず速くなるとは限らないよ。実装や描く内容によって負担は変わる。通常の背景色や画像などで基本の表示を用意し、対応する環境では追加の表現を使う、と考えると導入しやすい。表示と性能は実際の対象環境で確かめよう

まとめ：ざっくりこれだけ覚えればOK！

「CSS Houdini」って出てきたら「CSSの描画やプロパティを拡張する低レベルAPI群」と思えばだいたいOK！

📖 おまけ：英語の意味

「CSS Houdini」＝ CSS フーディーニ

💬 CSSを拡張する複数のAPIをまとめたプロジェクト名だよ。Houdiniという単一のAPIを呼び出すわけではないんだ

参考資料