CSS自動整理ツール
開発が進むにつれて数千行に膨れ上がった style.css を、手作業で分けるのは時間の無駄です。
このツールは、HTML（またはJinja2テンプレート）を解析し、「どのページでどのクラスが使われているか」を特定して、CSSをきれいに分割・整理・リファクタリングします。
📤 使い方の手順
-
整理したい「HTMLファイル一式」と「style.css」を1つのフォルダに入れます。
※重要：HTMLがないと、どのクラスを使っているか判断できず整理されません！ - そのフォルダ、またはファイルをまとめて ZIP形式で圧縮 します。
- 下のボックスにZIPをドラッグ＆ドロップします。
- 整理されたCSSファイルが入ったZIPが自動でダウンロードされます。
🔍 どんな風に整理されるの？
- _dark_mode.css : (オプション)
.dark-modeクラスやダークモード用のメディアクエリをここに隔離します。 - page_〇〇.css : 「このページでしか使われていない」クラスや、(オプション) そのページ固有のレスポンシブ記述(
@media)を切り出します。 - style_common.css : 複数のページで共通して使われているスタイルや、共通のレスポンシブ設定はここに残ります。
- organizer_report.txt : 「どのクラスがどこへ移動したか」の詳細なログファイルです。
なぜ「CSSの分割・整理」が必要なのか？
Webサイトの開発が進むと、CSSファイル（style.css）は肥大化しがちです。 「どのクラスがどのページで使われているか分からない」「怖くて削除できない」という状態は、ページの読み込み速度低下やメンテナンス性の悪化を招きます。
このツールの特徴と技術的な仕組み
SerchCode Proの「CSS自動整理ツール」は、単純なテキスト処理ではなく、プロジェクト全体の構造を解析することで、安全かつ効率的にCSSをリファクタリングします。
1. ダークモード記述の自動隔離（ON/OFF可能）
近年必須となったダークモード対応ですが、.dark-mode や @media (prefers-color-scheme: dark) の記述がファイル内に散らばっていると管理が大変です。
オプションでチェックを入れると、これらを全て検出し、_dark_mode.css という一つのファイルに集約・隔離します。
2. レスポンシブ(@media)記述の最適化
スマホ対応のためのメディアクエリ（@media）も解析対象です。
メディアクエリ内のスタイルが「特定のページでしか使われていない」と判明した場合、そのブロックごとページ専用CSSへ移動させることができます。これにより、トップページでしか使わないスマホ用スタイルを、他のページで読み込む無駄がなくなります。
3. ページ固有スタイルの抽出
アップロードされたHTMLファイルを解析し、「特定のHTMLファイルでしか使われていないクラス」を特定します。
これらを page_blog.css や page_contact.css のように分割することで、各ページの読み込み時には「必要なCSSだけ」を読み込めるようになり、パフォーマンスが向上します。
4. Flask / Jinja2 テンプレートに対応
一般的なHTMLだけでなく、PythonのWebフレームワーク「Flask」で使用される Jinja2テンプレート の解析にも対応しています。
{% block content %} などのテンプレートタグが含まれていても、正しくクラス名を抽出します。
よくある質問 (FAQ)
- Q. アップロードしたファイルは保存されますか？
- A. いいえ。処理は一時的なメモリ上で行われ、処理完了後またはエラー発生時にサーバーから即座に削除されます。データが保存されることはありません。
- Q. うまく分割されません。
- A. HTMLファイル（またはテンプレートファイル）が含まれているか確認してください。CSSファイル単体では「使用状況」が分からないため、分割処理が行われません。
