ヒャッハー！下段中キックキャンセルからの昇竜拳がなかなか出せないKameです。
今回はDWの便利コマンドのお話を。
CSS属性フォーマット
ガイドラインにてCSSのプロパティの記述順序なんかを定めてしまった際にすごく便利です。
実際のところプロパティの順番をきっちりと意識して書くのはしんどいし非効率なので、どうしても順番そっちのけになります。
そこで登場するのがコレ。CSS属性フォーマット。
（リンク先のダウンロードページが無くなっているし、インストールした記憶がないのに僕のDWに入っていた理由はわかりません。もしかして公式拡張になったとか？）
とりあえずインストールされているモノして話を進めます！！！
使い方
使い方は簡単、整形したいCSSファイルを開いて
DW上部メニュー「コマンド」→「CSS属性フォーマット」
これだけです。
その順番の指定はどこでするのかというと
DW上部メニュー「コマンド」→「CSS属性フォーマットの設定」
すると下のような画面が現れて後は好きにプロパティを上下入れ替えるだけです。
問題点
しかしながらこいつにも問題があり…結構大きな問題なんですが…
#hogehoge {
margin: 0;
*margin: 0 0 10px;
_margin: 0 0 10px;
}
みたいな感じにIE用に書いているハックは全て
#hogehoge {
margin: 0;
margin: 0 0 10px;
margin: 0 0 10px;
}
のようにハックのないクリーンなプロパティに書き換えられてしまいます。
やはりこういう面で考えてもCSSエラーの出るハックはやめたほうがいいと思いました！
ソースフォーマット
もう一つ超あたりまえのやつをご紹介。DWの純正ソースフォーマット。
HTMLの整形は細かくできないので、あまり僕は使わないんですがCSSくらいシンプルな書式だったらかなり綺麗になります。
使い方
使い方はこれまた整形したいCSSファイルを開いて
DW上部メニュー「コマンド」→「ソースフォーマットの適用」
でできます。
フォーマットを設定するには
DW上部メニュー「編集」→「環境設定」→「コードフォーマット」タブ→高度なフォーマット：「CSS」ボタン
で下のような画面が開くので、
後は好きな設定に変更すればOKです。
ショートカット設定しておくといい
最後に、デフォルトではどちらのコマンドもショートカットキーには割り当てられていないので、
DW上部メニュー「編集」→「キーボードショートカット」
から設定しておくと楽です。
やはり僕はDWから離れられそうにないです。