DN*BLOG

CSS属性フォーマットとは

CSSベースのサイト制作をしていると、ついCSSの属性の順番がバラバラになってしまうことが多々あります。
属性の順番がバラバラだと、そのセレクタでどのような属性が定義されていて、その結果、どのような見た目になるかを把握するのが難しくなります。従って、ある基準に従った順番にCSSの属性を揃えておくのが望ましいと言えます。

CSSを書いていると順番がバラバラになったり、規則がないとみずらいよ！だからそれを整理するよ！！っていうツールです。
Dreamweaverの拡張機能としてインストールされるのでDreamweaverがないと使えません。Ver.はDreamweaver MX以降です。

使い方

下記URLの右カラムの「CSS属性フォーマット Version 0.2」からダウンロード出来ます。

CSS属性フォーマット – 合同会社レゾリューションズ

ダウンロードしたファイルをWクリックでインストール。
できたらDreamweaverでフォーマットしたいCSSファイルを開く。

開いたら、メニューから[コマンド]-[CSS属性フォーマット]で順番をフォーマットできます。

メニューの[コマンド]-[CSS属性フォーマット]の下に[CSS属性フォーマットの設定]っていう項目があるのでそこから自分好みの順番を設定出来ます。

注意事項

ハックを使用している場合予期しない整形が行われてしまう場合がある様です。
（YUIのfontリセットCSSに記述されている、*font-size:small;の「*」は消されてしまいました。）
あと、セレクタ内にコメントが入っている場合、そのセレクタについては並び替えを行いません。

この辺は注意して利用してください。

気になったのは、「：」の後ろに半角スペースができる事でしょうか。
私はスペースは入れないので気になります・・・。

CSSファイルにハックの記述がなく、順番もバラバラで見づらい！という状況に使ってみるのはいいと思います。
でも、バックアップは忘れずに！！

合同会社レゾリューションズ様 – CSS属性フォーマット