MENTAにてフリーランス、Webデザイナー、グラフィックデザイナーを目指す方のよろず相談受付中!
css

コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法

webooker

開始タグを書いて、クラスを書いて、閉じタグを書いて…。

毎度毎度htmlコードやcssを書いていると、

もっと効率化出来ないものかと思いますよね。

まだあまり記事を見かけない気がしますが、

ロシアからやってきたZen codingが、

劇的に私の作業効率を上げてくれたのでご紹介。

(ダウンロード等は、各自の責任でお願いしますねー。)

■Zen codingとは

↓公式(おそらく)

http://code.google.com/p/zen-coding/

Zen codingはテキストエディタの拡張機能。

適用すると、少ない文字入力で面倒なコーディングを自動で行ってくれます。

デモ映像を見てちょっと感動しました。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

サポートされているエディタは、

  • Full support:Coda、Espresso、TextMateなど
  • artial support (“Expand Abbreviation” only):Dreamweaver CS4, Windows, Macなど

(詳細は公式サイトで。)

■Zen codingをDreamweaver cs4で使う場合

※今回はmac(snow leopard)に入れています。

【1】

http://code.google.com/p/zen-coding/downloads/detail?name=Zen%20Coding.mxp&can=2&q=dreamweaver

からdreamweaver用のプラグインをダウンロード。

【2】

ダウンロードしたファイルを実行する。

ADOBE EXTENSION MANAGER CS4が起動し、

プラグインとして読み込まれる。

※このときにDWのメニューが文字化けした場合、

Application Support/Adobe/Dreamweaver CS4

を削除すると復旧出来る。

以上で最低限の準備は完了。

【3】

試しに入力してみましょう。DWでhtmlファイルを開き、

div#main

など、Zen-coding独自の記法にて記述する。その後

control+,(カンマ)

をおすとコードが展開する。

Zen codingの記法は下記をご参照下さい。

  • Zen HTML Elements

http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

  • Zen HTML Selectors

http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

  • Zen CSS properties

http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

■☆より便利に使う為に。

doctype宣言のデフォルト設定がenなどになっているため、

自分好みに変更しておくと便利です。

ユーザ名/ライブラリ/Application

Support/Adobe/DreamweaverCS4/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js

11行目~の

'variables': {
'lang': 'en',
'locale': 'en-US',
'charset': 'UTF-8',
'profile': 'xhtml',

を編集するとデフォルト値を変更可能。

(再起動不要)

※このサイトでは、アフィリエイト広告を利用しています。

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  1. ピット

    Windowsでは拡張機能がインスールできませんでした。
    対応って書いてあったのに。。orz

  2. sky_2007

    こんにちは。
    こちらで記事を見てzen-conding入れました。
    windowsでもインストールできましたよ!

    http://forums.adobe.com/thread/417467

    こちらのように、エラーがでるようですので、ファイルの削除等が必要になる場合があるようですね。

  3. ピット

    情報のご提供ありがとうざいます!
    キーボードショートカットをカスタマイズして
    おりましたの、Menus.xml を削除したらインストールできました!

  4. Zen-codingを使って、複雑なタグを一行で作成してみた | Webooker

    […] Zen-codingといえば、コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 | Webookerという記事で、2年前にご紹介したことがあります。 あまりに便利なのでそれ以来ずっと愛用 […]

  5. Zen-codingが進化した次期バージョン「Emmet」をSublime Text2に入れてみた | Webooker

    […] もZen-codingについてご紹介してきました。特に、2010年に書いたコーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法についてはたくさんの方に見ていただき、各種ブログにもご […]

ABOUT ME
Webと本の人 Webooker (ウェブッカー)
Webと本の人 Webooker (ウェブッカー)
フリーランス Webデザイナー・グラフィックデザイナー
2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。
記事URLをコピーしました