CSS入力

検証結果

CSS検証の例

有効なCSSは正しい構文を持ちます。無効なCSSにはエラーがあります。例:

有効なCSS

有効なCSS

無効なCSS – セミコロン欠落

最初のルールで1200pxの後にセミコロンが欠けています。

無効なCSS – セミコロン欠落

上のエディターにいずれかの例を貼り付けて検証結果を確認してください。サンプルでさらにデータを読み込めます。

CSSバリデーターとは?

CSS(Cascading Style Sheets)には構文ルールがあります。セミコロン欠落、閉じていない括弧、無効なプロパティ名、不正なセレクターはパースエラーを引き起こします。CSSバリデーターはスタイルシートが整形式かチェックし、行と位置付きでエラーを報告します。W3C CSS仕様が言語を定義しています。

このツールはCSSをパースして構文エラーを報告します。完全にブラウザ内で動作します。サーバーには何も送信されません。有効なCSSのフォーマットにはCSSフォーマッターを、ミニファイにはCSSミニファイアーを使用してください。

このツールの使い方

1

CSSを貼り付けまたはアップロード

CSSをコピーして左のエディターに貼り付けます。アップロードをクリックして.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。

2

検証結果を確認

右のパネルに有効または無効が表示されます。無効な場合は行と位置付きでエラーがリストされます。よくある問題:閉じていない括弧、セミコロン欠落、無効なプロパティ値、不正なメディアクエリ。

3

修正して再検証

入力のエラーを修正して再検証してください。フォーマットにはCSSフォーマッターを。SCSSやLessの場合は、まずSCSSをCSSにまたはLessをCSSにでコンパイルしてください。

よくあるCSSエラー

閉じていない括弧}や角括弧]がよくあります。プロパティ間のセミコロン欠落は連鎖的なパースエラーを引き起こすことがあります。無効なプロパティ名や値(例:displayの代わりにdispalyのタイポ)はルールを壊します。不正な@media@keyframesブロックも失敗の原因になります。W3C CSS仕様が有効な構文を定義しています。W3C CSSバリデーターはサーバー側の包括的な検証を提供します。

CSS検証が役立つ場面

多くの開発者は、適用されないスタイルのデバッグ、サードパーティCSSの統合、本番デプロイ前に検証が必要です。1つの構文エラーでスタイルシート全体が壊れることがあります。ここでCSSを通すと、レイアウトやレンダリングの問題を引き起こす前に問題を検出できます。ViteWebpackなどのビルドツールはCSSエラーを明確に報告しないことがあります—ここで検証すると正確な行番号が得られます。

チームとスタイルを共有する前やプルリクエストを送る前にも便利です。検証後のブラウザ互換性にはCSSプレフィクサーを。有効なCSSのフォーマットにはCSSフォーマッターを。SCSSやLessの場合は、まずSCSSをCSSにまたはLessをCSSにでコンパイルしてください。

よくある質問

CSSが無効になる理由は?

閉じていない括弧や角括弧、セミコロン欠落、無効なプロパティ名や値、不正なセレクター、@media@keyframesの構文エラー。バリデーターが問題箇所を示します。

ブラウザサポートをチェックしますか?

このツールは構文のみを検証します—CSSが整形式かどうか。ブラウザ互換性はチェックしません。Can I Useをご利用ください。

データはプライベートですか?

はい。検証は完全にブラウザ内で行われます。データはサーバーに送信されません。

SCSSやLessに対応していますか?

このツールはプレーンCSSを検証します。SCSSやLessの場合は、まずSCSSをCSSにまたはLessをCSSにでコンパイルしてから検証してください。

ベンダープレフィックスは?

ベンダープレフィックス付きプロパティ(例:-webkit--moz-)は有効です。バリデーターは受け付けます。自動でプレフィックスを追加するにはCSSプレフィクサーを使用してください。

関連ツール

CSS仕様:W3C CSSMDN CSSがリファレンス。W3C CSSバリデーターはサーバー側検証を提供。Can I Useでブラウザサポートを確認。