壊れたCSSをここに貼り付けて、「CSSを修正する!!」をクリックして修復してください無効なCSSを入力

CSS修正ツールとは？

CSSは構文エラーが入っても黙って一部のルールを無視するだけで、ブラウザは何もエラーを出してくれません。color: #222のあとのセミコロンを忘れた、txt-alignのようにtext-alignのタイポをした、{を多く書いた、content: "Totalのように引用符を閉じ忘れた — そういう小さな崩れを自動で直します。.order-rowや#cart-summaryのような実プロジェクトのセレクタでも問題なく動きます。

CSSの仕様はW3C CSSとCSS Working Groupドラフトで管理されており、MDN CSSに実用的なドキュメントがまとまっています。修正後のスタイルが本当に有効かどうかはW3C CSS Validatorで確認でき、ブラウザサポートはCan I useで見られます。

すべてサーバー側で安全に処理し、CSSを保存することはありません。修正された出力はそのままスタイルシートに戻せます。

CSS修正ツールの使い方

壊れたCSSを修復する手順です。各ステップはこのページの実際のボタンとパネルを使用します。

壊れたCSSを貼り付けるかサンプルを読み込む

左のエディタに壊れたCSSを貼り付けます。サンプルCSSをクリックすると、よくあるエラーを含む例が読み込まれます。修正対象の壊れたCSSの例：

.order-row {
  color: #222
  padding 12px;
}

セミコロン抜け、括弧（{と}）の不一致、プロパティ名と値の間のコロン抜け、文字列の引用符閉じ忘れ、txt-alignのような無効なプロパティ名などを修復します。

「CSSを修正する!!」をクリック

ツールバーの緑色のCSSを修正する!!ボタンをクリックします。修正ツールがCSSを解析し、構文エラーを自動的に修復します。処理中はローディングインジケーターが表示されます。

修正された出力を確認する

右側のパネルに修復されたCSSが表示されます。プロパティ名と値はそのままで、構文のみが修正されます。出力をコピーしてスタイルシートに戻すことができます。

このツールの活用シーン

レガシーCSSのクリーンアップ

長年メンテされてきたスタイルシートには、エディタが警告しなかった小さな構文エラーが紛れ込んでいることがあります。修正ツールで一気に直せます。

CMSやWYSIWYGエディタからのCSS

CMSのテーマエディタやWYSIWYG出力のCSSは、しばしば閉じ括弧を1つ余分に出力します。それを自動で正規化します。

ビルド前の検証

ビルドパイプラインに通す前に、壊れたCSSを直しておくと、PostCSSやSassのトランスパイラが意味不明なエラーを返さなくなります。

AI生成コードの修復

LLMに生成させたCSSスニペットには、セミコロン抜けやコロン抜けが混じることがあります。出力後にこのツールを通すだけで、実際にブラウザで動くCSSになります。

よくある質問

CSSデータは保存されますか？

いいえ。サーバー側で修正処理を行いますが、CSSの内容を保存することはありません。

どのようなエラーを修正できますか？

セミコロン抜け、括弧の不一致、プロパティ名と値の間のコロン抜け、文字列の引用符閉じ忘れ、無効なプロパティ名のタイポなど、よくあるCSS構文エラーを修正します。レイアウトの意味そのものを書き換えるような大規模な変更は行いません。

プロパティ名や値は変更されますか？

構文を直すために必要な場合（例：明らかなタイポ）に限り修正します。値そのものは変更しません。

@mediaや@keyframesにも対応していますか？

はい。@media、@keyframes、@supportsなどのアットルール内のブロックも、通常のセレクタブロックと同じように修復します。

修正したCSSが本当に有効か確認するには？

修正後はW3C CSS Validatorで再検証することをお勧めします。CSSフォーマッターやリンターと組み合わせて使ってください。

SCSSやLESSにも使えますか？

このツールはプレーンなCSSを対象としています。SCSS/LESSのような前処理言語の独自構文（変数、ネスト、ミックスインなど）は通さず、まずSCSS→CSSで変換してから修正してください。

CSS修正ツール