僕は普段Zen CodingでCSSを書いています。「bgc」と入力して展開すると、「background-color:#FFF;」と初期値が入ってしまって、テキストカーソルを戻して本来設定したかった値を入れていくのはちょっと面倒です。

Dreamweaverに限ったことではないのですが、Zen Codingをカスタマイズすると、初期値を空にしたりまだ定義されていないプロパティを独自に定義できるようになります。


初期値が邪魔なものもある…。

カスタマイズの方法

例えばということで「background-color:#FFF」と展開されてしまうものを、「background-color:;」になるようにしてみます。

次のフォルダを開きます。<ユーザー名>やバージョンのところは、それぞれの環境に置き換えてください。

Windows

C:¥Users¥<ユーザー名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS6¥ja_JP¥configuration¥Commands¥ZenCoding

Mac

/Users/<ユーザー名>/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/Commands/ZenCoding/

フォルダーの中のZenSettings.jsを開くと、CSSの展開前・展開後を「:」で区切るような形で書かれています。連想配列ですね。24行目あたりからがCSSの設定です。

background-colorは353行目を下のように編集して保存をすると、Zen Codingの展開後の値をなくすようにカスタマイズできます。「|」の記号が展開後のカーソルの位置になります。「¥n」で改行、「¥t」でタブになります。

これでファイルを保存後、DreamweaverでZen Codingで展開すると、「background-color:;」となります。

SCSSの構文やメディアクエリー用のものを入れておくと便利

僕はSCSSを使っているので、@includeや@extendなどを設定したり、メディアクエリーもZen Codingで展開できるようにしています。たとえばこんな感じです。

設定例:メディアクエリー用

"@m640" : "@media screen and (max-width: 640px){¥n¥t|¥n}",
"@m480" : "@media screen and (max-width: 480px){¥n¥t|¥n}",
"@m320" : "@media screen and (max-width: 320px){¥n¥t|¥n}",

設定例:Sass用

"@inc" : "@include |",
"@mix" : "@mixin |",
"@excl": "@extend .clearfix;",
"@incl": "@include .clearfix;",

最近使うものが多くなってきたコードや、手打ちが面倒なぐらいの長いコードは自分用に追加していくと便利です。

CSSのプロパティは何回も繰り返し入力することが多いで、一度設定を見直すとストレスなくコーディングができます。ぜひお試しください。