入力
開発者向けユーティリティ
CSS整形
コードをアップロードせずにCSSを整形または圧縮できます。ルール、セレクター、宣言を確認し、基本的な構文ヒントと隔離プレビューで結果を試せます。
サイズ
ルール
セレクター
宣言
出力
整形または圧縮したCSS
構文ヒント
CSSの問題と警告
構造
セレクターと宣言の概要
| # | セレクター / at-rule | 宣言 | プロパティ |
|---|
隔離プレビュー
入力CSSでサンプルを表示
厳しいコンテンツセキュリティポリシーを持つサンドボックス内で表示するため、スタイルはこのページに影響せず、外部リソースも遮断されます。
例
よく使うCSSサンプル
CSS早見表
| 概念 | 例 | 説明 |
|---|---|---|
| ルール | .card { padding: 16px; } | セレクターとそれに続く宣言ブロック。 |
| 宣言 | color: #333; | コロンで区切られたプロパティと値。 |
| カスタムプロパティ | --accent: #16735f; | 名前が2つのハイフンで始まる再利用可能なCSS変数。 |
| メディアクエリ | @media (max-width: 640px) | 条件に一致したときに入れ子のルールを適用します。 |
| キーフレーム | @keyframes fade | CSSアニメーションの各段階を定義します。 |
整形と構文チェックの説明
文字列を認識する整形構造上の空白を変更する前に、引用符付き文字列、コメント、括弧内を識別します。
安全寄りの圧縮不要な空白を削除しつつ、calc()などの関数内に必要な間隔を保持します。
軽量な構文チェック区切り記号の対応、閉じていない文字列やコメント、コロンのない宣言を確認します。完全な規格検証には専用パーサーやlinterを使います。
ローカル処理CSSはブラウザー内に留まり、整形、統計、チェック、プレビューで入力をアップロードしません。
CSS整形のよくある質問
CSSコードはアップロードされますか？
いいえ。整形、圧縮、統計、構文ヒント、プレビューはすべてブラウザー内で実行されます。
完全なCSS linterの代わりになりますか？
なりません。一般的な構造上の問題は検出しますが、規格準拠、ブラウザー互換性、プロジェクト規則には専用パーサーやlinterが必要です。
CSSを圧縮すると動作が変わりますか？
文字列、指定したコメント、関数内の間隔を保持します。古いhackやビルド指令は公開前にテストしてください。
CSSプレビューはページから隔離されていますか？
はい。サンドボックスiframeと厳しいセキュリティポリシーで外部リソースを遮断します。