プロパティ別整理法 CSS自動整形

整形実行フォーム

概要

  • CSSテキストをプロパティ別整理法に基づいて、プロパティ基準で自動整形することができます。
  • セレクタ基準で自動整形することもできます。 (2005-03-07)
  • 単一セレクタではサイズが増えすぎることがあるので、複数セレクタでまとめるオプションを用意しました。編集時は単一セレクタ、公開時は複数セレクタといったように使い分けることも可能です。

使用用途

仕様・制限

  • @media規則、@page規則、@font-face規則には対応していません。
  • @charset規則、@import規則には対応しています。
  • コメントは全て削除されます。
  • セレクタの出現順序はUTF-8の文字コード順になります。
  • セレクタ基準方式の場合、プロパティの出現順序はUTF-8の文字コード順になります。
  • contentプロパティ値に「{」「}」が含まれていると、宣言の終了とみなされてしまいます。

整形例

プロパティ基準

整形前

/* 全般 */
  body {
   background-color:#fff;
   color:#000;
  }

  /* ナビゲーション */
  div.navigation {
   background-color:#fff;
   color:#555;
   font-size:80%;
  }
  div.navigation p {
   margin:1em 10%;
   padding:1ex;
  }

  /* コンテンツ */
  div.contents {
   background-color:#e0e0e0;
   color:#333;
   font-size:100%;
  }

整形後(単一セレクタ)

/* background-color */
  body { background-color:#fff }
  div.contents { background-color:#e0e0e0 }
  div.navigation { background-color:#fff }

  /* color */
  body { color:#000 }
  div.contents { color:#333 }
  div.navigation { color:#000 }

  /* font-size */
  div.contents { font-size:100% }
  div.navigation { font-size:80% }

  /* margin */
  div.navigation p { margin:1em 10% }

  /* padding */
  div.navigation p { padding:1ex }

整形後(複数セレクタ)

/* background-color */
  body,
  div.navigation {
   background-color : #fff
  }
  div.contents {
   background-color : #e0e0e0
  }

  /* color */
  body,
  div.navigation {
   color            : #000
  }
  div.contents {
   color            : #333
  }

  /* font-size */
  div.contents {
   font-size        : 100%
  }
  div.navigation {
   font-size        : 80%
  }

  /* margin */
  div.navigation p {
   margin           : 1em 10%
  }

  /* padding */
  div.navigation p {
   padding          : 1ex
  }

セレクタ基準

整形前

整形後(単一セレクタ)

整形後(複数セレクタ)

不具合報告や要望の連絡先

不具合報告や要望などは、akiyan.com+webmaster@gmail.comへお願いいたします。

トラックバックを送りたい方はCSSプロパティ別整理法の提案とCSS自動整形アプリケーションを公開しました (BlogId:47)のトラックバック先であるhttp://www.akiyan.com/cgi/mt/mt-tb.cgi/48までどうぞ。

実装検討中の機能

以下は実装を検討中の機能です。要望があれば、すぐに実装するかもしれません。

体裁だけを整える
できる限り製作者の意図を損なわずに、桁を揃えたりして見栄えの向上のみを行う機能。
整形フォーマットの指定
コメント部分なら現在は/* %s */と表現する。たとえば/** border-width **/としたければ/** %s **/になる。(2005-03-10 コメント部分のフォーマット指定機能を追加しました。)プロパティ部分も同様に%s { %s:%s }となる。改行を表現するときは%s {\n %s:%s\n}といった感じで。
Ajaxフレームワーク
整形後の出力をファイルのダウンロードやブラウザの表示ではなく、Ajaxフレームワークでテキストエリアに貼り付ける。
極悪圧縮モード
配信用にとにかくCSSのサイズを抑えたい人のために、出来る限り小さいサイズで整形するオプション。プロパティ別整理法を完全に無視。改行だって無くせる。複数プロパティの設定と複数セレクタのどちらを優先したほうが小さくなるか計算するのが難しそう。

ChangeLog

  • 2014-09-03
    • http://www.akiyan.com/css_beautifier から http://css_beautifier.akiyan.tokyo/ に移設しました。
  • 2005-03-29
  • 2005-03-10
    • 反応リンク集を追加しました。
    • 実装検討中の機能に、体裁だけを整える機能を追加しました。
    • プロパティ基準のコメント部分のフォーマット指定オプションを追加しました。
  • 2005-03-09
    • 複数セレクタで記述時に区切り文字で改行するか選べるオプションを追加しました。
    • 子セレクタや隣接セレクタ(例:blockquote > pblockquote + p)のスペースが削除される不具合を修正しました。
    • 整形前のCSSに空文字のセレクタ(例:blockquote,,p)が存在する時、空文字をセレクタとして認識してしまう不具合を修正しました。
  • 2005-03-08
    • セレクタ基準で整形時に同じプロパティを持つ場合に複数セレクタで整形するオプションを追加しました。
    • セレクタ基準の整形例を変更しました。
    • それぞれの整形後の例に複数セレクタの例を追加しました。
    • contentプロパティでの制限を追記しました。
  • 2005-03-07 セレクタ基準で整形するオプションを追加しました。識別名と値の桁を揃えることもできます。
  • 2005-03-06 不具合報告や要望の連絡先、実装検討中の機能を掲載。
  • 2005-03-04 公開。