CSS バリデーター
CSS の構造的および構文エラーをチェック — バランスの取れていない括弧と丸括弧、終了していない文字列とコメント、空のルール ブロック、およびペアがないプロパティまたは値。CSS プロパティ値の文法は検証しません。
入力
出力
| 行 | タイプ | メッセージ |
|---|---|---|
| No data yet | ||
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-validator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": "body {\n color: #333;\n margin: 0;\n}\n"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-validator` tool (CSS Validator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-validator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS バリデーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このCSS バリデーターは何をチェックしますか?
CSS を貼り付けると、構造的および構文エラーの行ごとのレポートが表示されます — 解析を壊すエラーのクラスであり、間違った色を生成するクラスではありません。具体的には、以下をチェックしています：
- バランスの取れていない括弧 (
{/}) — 開かれたが閉じられたことのないルール ブロック、または対応する開き括弧がない不正な閉じ括弧。 - 値内のバランスの取れていない丸括弧、例えば閉じ括弧
)が不足しているcalc(100% - 10px。 - 終了していない文字列リテラル — 行末またはファイル末まで一致する閉じがない開き
'または"。CSS 文字列は、改行がバックスラッシュでエスケープされない限り、複数行にまたがることはできません。 - 終了していない
/* comment */ブロック — クローズ*/がないコメント オープナー。 - 空のルール ブロック (
selector {}) — 警告として報告されます。技術的には有効な CSS ですが、ほぼ常に残りまたはデッド コードです。 - 値なしのプロパティ (
color: ;) または プロパティなしの値 (: red;)。
各検出結果には、行番号、エラーか警告か、および平易言語のメッセージが表示されます。上記のいずれも見つからない場合は、単一の「有効な CSS — 構造的問題は見つかりません」という結果が表示されます。
これがチェックしないもの
これは軽量の構造スキャナーであり、完全な CSS パーサーではありません。CSS の実際の値文法は検証しません — color: notacolor; のような無効な単位、名前を間違えたプロパティ、または特定のプロパティに対してサポートされていない値をキャッチしません。これはすべてのプロパティに対して、完全で常に成長し続ける CSS3 仕様の知識が必要だからです。その程度の検証には、ブラウザの DevTools (Styles パネルはその認識できないプロパティ/値を薄灰色にしてフラグが立つ) または Stylelint などの専用リンターを使用してください。
これは誰のためのものですか?
- 開発者は、スタイルシートの残りを静かに破っている欠落している
}または)を探しています。 - 見知らぬソースから CSS を貼り付ける人 (スニペット、AI 生成、ドキュメントからのコピーペースト) で、使用する前に素早い正気チェックを望んでいます。
- コード レビューアーは、空で、おそらく意図しないルール ブロックをスキャンしています。
使い方
- CSS を入力ボックスに貼り付けます — 入力時に結果がリアルタイムで更新されます。
- Line/Type/Message テーブルを読みます：エラーは即座に修正する価値のある構造的な破損です；警告 (空のルール ブロックなど) は確認する価値がありますが、レンダリングを壊すことはありません。
- 結果を CSV としてコピーまたはダウンロードして、共有する必要がある場合。
よくあるご質問
bakground-color のようなタイプミスをキャッチしますか？
いいえ — 不明なプロパティ名はセマンティック チェックであり、構造的なチェックではありません。ブラウザは単に認識されないプロパティを無視します；このツールは CSS 自体を正しく解析できない場合についてのみ通知します。
空のルール ブロックをエラーではなく警告としてフラグを立てるのはなぜですか？
selector {} は有効な CSS です — ブラウザはそれを正しく解析します — しかしそれは何もしないので、ほぼ常に間違い (忘れられた宣言または編集後に残されたデッド コード) です。
ネストされた CSS または @media ブロックはサポートされていますか？
はい — 括弧/丸括弧/文字列/コメント追跡は任意のネストの深さで機能するため、@media、@supports、およびネストされたセレクター ブロックはすべて同じ方法でチェックされます。
プライバシー
検証はブラウザ内で完全に実行されます。CSS はアップロードされたり、どこかに送信されたりすることはありません。