CSSプレイグラウンド

CSS Playground の仕組み

このツールでできること

CSS Playground にはHTMLとCSSの2つのエディタと、入力に合わせて更新されるサンドボックス化されたiframeプレビューがあります。コンポーネントの試作、セレクタのテスト、フォールバックスタイルの検証、バグ報告用の最小再現の作成に使えます。「Reset styles」トグルは小さなCSSリセット（box-sizing、妥当なbodyのデフォルト）を追加し、ブラウザ既定スタイルとCSSが競合しないようにします。

開発者によくある利用シーン

フロントエンド開発者は、プルリクエストやドキュメントで共有するために、分離されたコンポーネント例を作成します。デザイナーは、グラデーション、影、アニメーションのタイミング、grid、subgrid、container queries といった最新機能を試します。教育者は、CodePenアカウントを用意せずに学生へCSS概念をデモできます。QAエンジニアは、制御された環境でCSSのみのバグをきれいに再現できます。

データ形式、型、またはバリエーション

HTMLエディタは body 内の任意の内容を受け付けます。CSSエディタは、カスタムプロパティ、ネスト、@container、@layer など、最新のCSSを受け付けます。出力は、meta viewport タグ（任意）とインラインのstyleブロックを含む完全に独立したHTMLドキュメントで、ファイル全体としてそのままコピーできます。プレビューのiframeは sandbox='allow-same-origin' を使用し、相対URLを許可しつつ、スクリプトとフォーム送信をブロックします。

よくある落とし穴とエッジケース

外部の @font-face URL や @import 文は、iframeのサンドボックスによってブロックされる場合があります。外側のドキュメントから継承されるスタイルに依存するCSSを貼り付けても、iframeは分離されているため同じ挙動にはなりません。非常に長い継続時間のアニメーションは、エディタにフォーカスがないときでもプレビューiframe内で動き続けます。タイミングをデバッグする場合は animation-play-state で一時停止してください。

コードではなくこのツールを使うべき場面

一発の実験、分離された最小再現、または手早い教育デモにはブラウザツールを使ってください。実プロジェクトでは、開発サーバー、ホットモジュールリプレースメント、コンポーネント開発ツール（React Refresh、Vue devtools）により、はるかに豊かなフィードバックループが得られます。ツール設定をしたくないスケッチ用途に、このプレイグラウンドを使ってください。