Toolbox/データ
ブラウザ内で処理

29 / DATA

CSS整形

セレクタと宣言を読みやすく。メディアクエリにも対応。

使い方・入力例・よくある質問

CSSをPrettierで整形し、セレクタや宣言の改行・インデントを揃えられます。コメント、カスタムプロパティ、メディアクエリに対応します。入力したCSSはページに適用しません。

CSS整形の使い方

  1. CSSを貼り付けます。
  2. スペース2・4・タブと、折り返し幅の目安を選びます。
  3. 「整形する」を押して確認し、コピーまたは.cssファイルとして保存します。

入力と出力の例

CSSの宣言を読みやすくする

設定：スペース2

入力
.card{display:grid;gap:16px}
出力
.card {
  display: grid;
  gap: 16px;
}

よくある質問

SCSSやLessも整形できますか？

このツールは通常のCSS用です。SCSS・Less・CSSを含むHTML文書は対象外です。

整形すると見た目は変わりますか？

CSSを実際のページに適用しないため、この画面で見た目は確認できません。整形後のコードは利用先でも確認してください。入力は100,000文字まで、処理は10秒で中断します。

仕様と制限

PrettierでCSSを整形します。最大100,000文字。SCSS・Lessは対象外です。

ON THE DESK

コードのそばに、もうひと道具。

広告 · Amazon
BOOK

リーダブルコード

名前・コメント・構造を見直す一冊。

Amazonで見る
BOOK

達人プログラマー 第2版

日々の開発と、その先の考え方に。

Amazonで見る
KEYBOARD

HHKB HYBRID Type-S

英語配列・墨。毎日の入力を整える。

Amazonで見る

Amazonのアソシエイトとして、After 6 Laboは適格販売により収入を得ています。

アクセス解析・プライバシー

変換ツールの入力内容・結果はブラウザ内で処理します。画像URL・OGPのURL読み込みは、ボタンを押したときだけ指定した接続先へ直接通信します。画像・動画・Markdown・HTML・CSV・TSVファイルはサーバーへアップロードしません。自己署名証明書の生成と署名もブラウザ内で行い、秘密鍵をサーバーやアクセス解析へ送信しません。Markdownの外部画像とHTMLのスクリプトは読み込みません。APIクライアントは「送信」を押したときにURL・ヘッダー・本文を指定した接続先へ直接送信します。スピードテストは「測定を開始」を押したときに生成した測定用データをCloudflareへ送受信します。接続先にはIPアドレスが伝わります。これらの通信は当サイトのサーバーで中継しません。入力内容と測定結果をアクセス解析へ送信せず、ブラウザにも永続保存しません。ページを閉じると消去されます。

アクセス解析を有効にした場合、Google Analytics 4を利用して、閲覧したページ、ツール名・利用回数、コピー・画像保存などの操作、スピードテストの開始・完了・中断・エラー、商品リンクのクリックを計測します。GoogleがCookieを使い、端末・ブラウザ情報などを収集します。広告向けのGoogleシグナル・広告パーソナライズは無効にしています。

解析を無効にすると、その選択だけをこの端末のブラウザに保存します。入力内容は保存しません。Googleのプライバシーポリシー

現在、このサイトのアクセス解析は無効です。