ForHosting KIT · 開発者向けツール

CSS整形ツール

CSS整形ツールは、圧縮されている、または空白が不揃いなスタイルシートを、読みやすく確認しやすいコードへ変換します。本番用ファイル、インラインのスタイルブロック、古いプロジェクトなどからCSSを貼り付けると、一貫したインデントと分離された宣言を持つ結果を取得できます。解析時には、引用符で囲まれた文字列、コメント、角括弧、丸括弧を保護します。さらにブロック構造を確認し、開始と終了の波括弧が対応していない場合は入力エラーを返します。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

圧縮されたスタイルシートを読みやすくします

本番環境のCSSは、転送量を減らすために圧縮されることがよくあります。ブラウザーには効率的ですが、人が内容を確認するには不便です。セレクター、宣言、メディアクエリ、入れ子のブロックが1行に連結されると、小さな変更でも見つけにくくなります。このツールは予測しやすい構造を復元します。開始波括弧ごとにインデントを深くし、宣言を終えるセミコロンごとに改行し、終了波括弧で前の階層へ戻します。通常の空白は統一しますが、文字列やコメント内の文章は変更しません。ブラウザーの開発者ツール、ビルドフォルダー、メールテンプレート、外部テーマしか入手できない場合にも便利です。手作業で改行を挿入して階層を数える必要がなく、エディターへコピーできる安定した表示を得られます。CSS全体の文法検証や宣言の並べ替えは行わず、送信された構造を明確に表示することに重点を置いています。

CSSの値を壊さずに整形する仕組み

安全な整形には、記号が常にスタイルシートの構造を示すわけではないという理解が必要です。引用符内のセミコロンは内容の一部であり、宣言の終端ではありません。文字列内の波括弧も単なる文字です。また、データURLなどの関数内にある記号をプロパティの区切りとして扱うこともできません。そのため、このツールはソースを1文字ずつ読み、文字列、エスケープ、コメント、丸括弧、角括弧の状態を追跡します。構造上の改行は、保護された範囲の外にある記号にだけ適用されます。埋め込みURL、属性セレクター、ラベル、複雑な関数を維持しながら、通常のルールブロックを読みやすくできます。コメントも削除せず元のコードに残します。処理は決定的で、同じ入力からは常に同じ出力が得られます。ネットワーク、現在時刻、乱数、実行環境には依存しません。

次の工程へ進む前に不完全なブロックを検出します

整形処理は、部分的な応答、ブラウザーのパネル、生成ファイルからCSSをコピーした場合の構造確認にも役立ちます。解析器は構造を表す開始波括弧と終了波括弧を数えますが、文字列、コメント、丸括弧、角括弧の内部にある波括弧は無視します。対応する開始波括弧がないまま終了波括弧が現れた場合、処理を中止して文字位置を示します。末尾まで読んでもブロックが開いたままなら、閉じていないブロック数を通知します。この検査は限定的です。波括弧が対応していても、すべてのプロパティ、値、セレクター、規則が各ブラウザーで有効とは限りません。ただし、明らかに途中で切れたブロックを正常な結果として返すことは防げます。結果はレビュー、バージョン比較、文書化、追加検証にご利用ください。ブラウザー内では無料で実行でき、APIによる自動整形は1リクエストにつき公開基本料金$0.002です。

活用例

圧縮済みファイルを調査

1行のスタイルシートを展開し、セレクターの追跡や想定外の宣言の確認をしやすくします。

レビュー用のCSSを準備

安定したインデントと宣言ごとの改行を適用し、動作の確認に集中できる状態にします。

コピーした断片を確認

開発者ツール、テンプレート、生成結果からコピーした後の波括弧の不足や過剰を検出します。

よくある質問

CSS整形ツールは何を変更しますか？

構造上の空白を統一し、2個の空白でブロックをインデントして、セミコロンで終わる宣言を別々の行に配置します。

文字列やコメント内の文章は変わりますか？

いいえ。引用符で囲まれた文字列、エスケープされた文字、コメントの内容は解析中も維持されます。

CSS構文をすべて検証できますか？

いいえ。構造上の波括弧と整形境界は確認しますが、すべてのセレクター、プロパティ、値、ブラウザー固有規則は検証しません。

波括弧が対応していない場合はどうなりますか？

一部だけ整形したCSSを返さず、無効な入力としてエラーを返します。

APIリクエストの料金はいくらですか？

各APIリクエストには公開基本料金$0.002が適用されます。ブラウザー版はAPIを呼び出さずローカルで実行できます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/dev2/beautify-css

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/dev2/beautify-css \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}'

const res = await fetch("https://api.kit.forhosting.com/dev2/beautify-css", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/dev2/beautify-css",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/beautify-css", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"css":"body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/beautify-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "css": "body{margin:0;color:#222}@media (max-width:600px){body{margin:1rem}}"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "dev2.beautify_css",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →