kscc

スポンサーサイト

一定期間更新がないため広告を表示しています

今さらすぎる定番のZen-codingを本当に今さらDreamweaver CS5.5にインストールしてみた


最近Dreamweaverを使用することが多かったので
どーせならDreamweaverでもZen-codingが使えないかなーって思って調べてみたら
使えるらしかったのでインストールしてみました。

…。

いや本当に
無知って怖いですよね。

というワケで
快適コーディングライフを手に入れたんだどー!というお話です。

そもそもZen-codingってなあに?

星の数ほどあるテキストエディタで使えるプラグインみたいなやつです。
Dreamweaverではエクステンション(拡張機能)として利用できます。

Zen-codingはコーディングに特化したエクステンションで
長いコーディングをスラスラっと書ける優れものです。

例えばこんなコードを書いたとします。

div.wrapper>p.caution_text

そのあとに“Ctrl”と“,”を押すと

<div class="wrapper"><p class="caution_text"></p></div>

と変換されます。

これスゲくない?マジでスゲくない?

ちなみにNotepad++やMacで人気のCodaでも使えるようです。


CSSにも対応してるん

Zen-codingはHTMLだけではなく
CSSにも対応しています。

CSSの書き方は少し特殊なので
チートシートを見ながらまる覚えするしかないっぽいですが

list-style-type:none;

なんてものは

list:n

と書いて“Ctrl”と“,”と押すだけです。

こりゃ簡単ですねー。こりゃすごいですねー。


ダウンロード

ダウンロードはZen-codingの公式サイトからできます。

各エディタ専用のデータはもちろん
対応したエディタを持っていない場合はローカルに保存して使えるテキストエリアバージョンもあります。

Dreamweaverに使う場合はZen Coding for Dreamweaver v.0.7.5をどうぞ。


最後に

Zen-codingをインストールしようとすると何らかのエラー(何のエラーかすらも分からないエラー)が出てインストールできない場合がありましたが
下記のディレクトリにあるMenus.xmlを削除したらインストールできました。

C:¥Users¥ADMIN¥AppData¥Roaming¥Adobe¥Dreamweaver CS5.5¥ja_JP¥Configuration¥


もしインストールできない場合はご参考に。

そしてご承知の通りだとは思いますが
AppDataというフォルダが見つからないときはPCの設定でフォルダが隠れております。
コントロールパネルのフォルダオプションで変更してくださいね。



設定を削除しなければならないので
必ずバックアップしてから行なってください。


Zen-codingは新たに書き方を覚えなければならないので最初は面倒ですが
よく使うHTMLやCSSを覚えるだけでもコーディングのスピードが格段に上がります。

まだやったことのない人や
今からウェブサイトを作ろうとしている人は
ぜひチャレンジしてみてください。

    スポンサーサイト