CSS / SCSS フォーマッター
CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。
CSS はブラウザ内のローカルで整形され、サーバーにアップロードされることはありません。
JavaScript も整形したいですか? JS Formatter を試してください。
CSS / SCSS フォーマッター について
この css フォーマッターは、Prettier を使って CSS・SCSS・LESS を整形または圧縮し、宣言をアルファベット順に並べ替えたり重複プロパティを削除したりするオプションを備えています。乱雑なスタイルシートを整える css 整形ツールとして、またプリプロセッサをまたいで作業する scss フォーマッター・less フォーマッターとして使えます。圧縮モードに切り替えると、コメントと空白を除去してコンパクトな本番用 CSS を生成します。一貫した読みやすいスタイルが必要なフロントエンド開発者、デザイナー、QA エンジニアや、コミットやコードレビュー前に css をオンラインで素早く整形したい人向けに作られています。インデントはタブまたはスペースを選べ、ファイルに合った構文を選択でき、整形された prettier css 出力をどこでも再利用できます。すべてはブラウザ内のローカルで処理されるため、スタイルシートが端末から外に出ることも、サーバーにアップロードされることもありません。
機能
- Prettier で CSS・SCSS・LESS を整形または圧縮
- 正確な解析のため構文モード（CSS・SCSS・LESS）を選択
- 各ルール内でプロパティをアルファベット順に並べ替え（プレーン CSS）
- プレーン CSS から重複宣言を削除
- インデントにタブまたはスペースを選択
- 圧縮モードは本番向けにコメントと空白を除去
- ネストしたルールとメディアクエリを一貫して再整形
- すべてブラウザ内で動作
CSS / SCSS フォーマッター の使い方
- 入力欄に CSS・SCSS・LESS を貼り付けます。
- ファイルに合った構文モード（CSS・SCSS・LESS）を選びます。
- 整形には Beautify、コンパクト化には Minify を選びます。
- Sort props・Dedupe・Tabs を切り替えて結果を微調整します。
- 出力パネルから整形済み CSS をコピーまたはダウンロードします。
例
入力
.btn{color:#FFF;padding:8px;color:#fff;}
出力
.btn {
color: #fff;
padding: 8px;
}
重複宣言を削除した Beautify モード。
よくあるエラーとトラブルシューティング
- SCSS や LESS でプロパティの並べ替えや重複除去が効かない。 — 並べ替えと重複削除はプレーン CSS に適用されます。これらのオプションを実行したい場合は構文モードを CSS に切り替えてください。
- ツールバーに Sort props と Dedupe のトグルが表示されない。 — これらのトグルは CSS 構文を選んだ Beautify モードでのみ表示されます。Minify をオフにして CSS を選択すると表示されます。
- 圧縮した CSS が後で編集しづらい。 — 元のソースファイルを残しておいてください。圧縮出力はさらなる編集ではなく本番向けです。
- 誤った構文が選択されていて整形に失敗する。 — 構文モードをコードに合わせてください。例えばネストや変数には SCSS を選ぶと Prettier が正しく解析します。
- インデントがプロジェクトのスタイルに合わない。 — コピー前に Tabs オプションを切り替えて、タブとスペースを切り替えてください。
よくある質問
- ArrayKit の CSS フォーマッターとは何ですか?
- Prettier で CSS・SCSS・LESS を整形または圧縮し、プレーン CSS ではプロパティをアルファベット順に並べ替えて重複宣言を削除できる、ブラウザベースの css フォーマッターです。
- CSS フォーマッターで CSS を圧縮するには?
- スタイルシートを貼り付け、合った構文モードを選び、Minify を選択するとコメントと空白を除去し、コピーまたはダウンロードできるコンパクトな本番用 CSS を生成します。
- CSS フォーマッターは SCSS と LESS に対応していますか?
- はい。構文（CSS・SCSS・LESS）を選ぶとそれに応じて解析します。プロパティの並べ替えと重複除去はプレーン CSS に適用されます。
- CSS フォーマッターはプロパティをアルファベット順に並べ替えられますか?
- はい。CSS を選んだ Beautify モードで Sort props を切り替えると、各ルール内で宣言がアルファベット順に並べ替えられます。
- CSS を整形するエンジンは何ですか?
- 整形には Prettier を使うため、出力はエディターやビルドツールで Prettier が適用するものと同じ規約に一致します。
- CSS フォーマッターを使うと CSS はどこかにアップロードされますか?
- いいえ。css フォーマッターはすべてブラウザ内で動作するため、スタイルシートはローカルで処理され、端末から外に出ることはありません。
関連ツール
すべての ArrayKit ツール