CSSコードを圧縮してサイズ削減率を測定
読みやすいスタイルシートには、ブラウザーには不要なインデント、改行、説明コメント、末尾のセミコロンが含まれることがあります。この圧縮ツールは、引用符内の文字列、セレクターの順序、宣言、ルール構造を保ちながら、配信用の余分なデータを取り除きます。圧縮済みCSS、圧縮前後のUTF-8バイト数、削減率を返します。処理は決定的でネットワークを使わず、中括弧が対応していない入力はエラーになります。
無料で実行
圧縮時に削除される内容
このツールは、ブラウザーがスタイルシートを受け取る際に不要な書式だけを対象にします。ブロックコメントを削除し、連続する空白や改行をまとめ、構造を表す記号の周囲にある空白を除き、閉じ中括弧の直前にある最後のセミコロンを削除します。ルールの並べ替え、セレクターの結合、カスタムプロパティ名の変更、色表現の短縮、計算式の書き換えは行いません。CSSの動作はソース順、詳細度、一部の値の正確な内容に左右されるため、この保守的な範囲が重要です。引用符内の文字列は別に解析されるので、URLや生成コンテンツ内の空白、中括弧、記号、コメントに見える文字列はそのまま残ります。エスケープされた引用符も維持されます。削除すると単語や値が連結される可能性がある場合は、トークン間の空白を残します。結果は生成済みアセットとして使用し、読みやすい原本は保守のためバージョン管理に保存してください。
検証と測定の仕組み
結果を返す前に、スキャナーはコメントと引用符内の文字列を除き、すべての開き中括弧と閉じ中括弧を追跡します。対応する開き中括弧がない閉じ中括弧や、最後まで閉じられていない中括弧がある場合、不完全なCSSを返さず無効入力エラーにします。この検査により、コピー時のミスや途中で切れたスタイルシートを早期に検出できます。予測可能な圧縮ができないため、CSSが未指定または空の場合、コメントが終了していない場合、文字列が閉じていない場合も拒否します。サイズはJavaScriptの文字数ではなくUTF-8バイトで測定します。非ASCIIのフォント名、ローカライズされた生成コンテンツ、Unicodeセレクターでは、見た目が1文字でも転送時に複数バイトになるため重要です。削減率は2つのバイト数から計算し、小数第2位に丸めます。ネットワーク、乱数、時刻、外部状態を使わない同じ決定的スキャナーで処理するため、同じ入力からは常に同じCSSと測定値が得られます。
配信工程での結果の使い方
一般的な工程では、整形済みCSSを編集用ソースとして保管し、Webサイト、アプリケーションバンドル、メールテンプレート、静的アセットホストへ送るコピーだけを圧縮します。スタイルシート全体を送信し、cssフィールドの圧縮値をデプロイ成果物へ書き込んでください。original_bytesとminified_bytesはビルドログに記録でき、reduction_percentでは削減効果をすぐに確認できます。継続的インテグレーションでリリース間の値を比較すれば、意図しない肥大化も検出できます。ただし、容量制限には丸めた比率ではなく正確なバイト値を使用してください。このツールはCSSコンパイラーではなく圧縮ツールです。インポートの解決、ベンダープレフィックスの追加、全プロパティの検証、新構文の変換、複数ファイルの結合は行いません。必要な変換を先に実施し、最終CSSを圧縮してください。中括弧の検証に失敗した場合はソースを修正または再生成してください。API自動処理は1回$0.002です。
活用例
本番用スタイルシートの準備
読みやすくコメント付きのスタイルシートを圧縮済み配信アセットへ変換し、保守用の原本は残せます。
CSS最適化の効果測定
正確なUTF-8バイト数と削減率をビルドレポートや性能レポートへ記録できます。
生成CSSの構造検証
ルールの中括弧が対応していない生成結果を、デプロイ前に不完全な出力として拒否できます。
よくある質問
CSS圧縮ツールは何を削除しますか?
ブロックコメント、CSS構造の周囲にある不要な空白、各閉じ中括弧の直前にあるセミコロンを削除します。
APIリクエストの料金はいくらですか?
APIリクエスト1回の料金は$0.002です。
削減率はどのように計算されますか?
圧縮前後のUTF-8バイト数を比較し、削減率を小数第2位に丸めます。
中括弧が対応していない場合はどうなりますか?
不完全または誤解を招くCSSを返さず、無効入力エラーとして処理します。
文字列内のコメントや中括弧は削除または計数されますか?
いいえ。引用符内の内容は保持され、その中括弧は構造検証に影響しません。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/dev2/minify-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"css":"/* Theme */\n.card {\n color: red;\n padding: 1rem;\n}\n"}'const res = await fetch("https://api.kit.forhosting.com/dev2/minify-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"css": "/* Theme */\n.card {\n color: red;\n padding: 1rem;\n}\n"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/dev2/minify-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"css": "/* Theme */\n.card {\n color: red;\n padding: 1rem;\n}\n"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/minify-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"css":"/* Theme */\\n.card {\\n color: red;\\n padding: 1rem;\\n}\\n"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"css":"/* Theme */\n.card {\n color: red;\n padding: 1rem;\n}\n"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/minify-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"css": "/* Theme */\n.card {\n color: red;\n padding: 1rem;\n}\n"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "dev2.minify_css",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |