HTML+CSSコーディングが10倍速くなるZen Coding

Dreamweaverへのインストール | Zen Coding 2-1

Dreamweaver用のエクステンションは、Zen Codingの公式サイトで配布されています。
HTML+CSSコーディングが10倍速くなるZen Coding

ネットで話題の"究極の超速コーディング"がだれでもマスターできる!
この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

Dreamweaverは、Adobe CSの統合パッケージにも含まれているAdobe社のWindows/MacOS用のWebオーサリングツールです。Web制作のプロをはじめ、多くのユーザーに利用されています。

Dreamweaver(Windows/MacOS)用のエクステンションは、Zen Codingの公式サイトで配布されています。Windows用もMacOS用も、同じファイルが使えます。

ダウンロードした配布ファイルを解凍してできた「Zen Coding v.*.*.mxp」(*にはバージョン名の数字が入る)をダブルクリックすると、Extension Managerが起動するので、メッセージにしたがってインストールします。

Dreamweaver CS4以上の場合は、インストール後Dreamweaverを再起動すると、そのままZen Codingが使えるようになります。

CS3以下のバージョンでは、別途修正ファイルを上書きする必要があります。「Dreamweaver CS3以下への修正ファイルのインストール」手順を参照して、上書きしてください。

  • 名称:Zen Coding for Dreamweaver
  • 作者:GreLImail
  • 種別:フリーウェア
  • 対応プラットフォーム:Dreamweaver(Windows/MacOS)
  • http://code.google.com/p/zen-coding/

Dreamweaver CS4以上へのインストール

Dreamweaver(Windows/MacOS)用のエクステンションは、Zen Codingの公式サイトで配布されています。Windows用もMacOS用も、同じファイルが使えます。

ダウンロードした配布ファイルを解凍してできた「Zen Coding v.*.*.mxp」をダブルクリックすると、Extension Managerが起動するので、メッセージにしたがってインストールします。WindowsもMacも、インストール手順は同じです。

  1. エクステンションのダウンロード

    Zen Coding公式サイトのトップページから[Downloads]をクリックするか、Zen Coding公式サイトのダウンロードページにアクセスして、ダウンロードファイル一覧から「Zen.Coding-Dreamweaver.v*.*.zip」(*にはバージョン名の数字が入る)を選択する。ダウンロードページが表示されるので、配布ファイル名をクリックしてデスクトップなど適当なフォルダにダウンロードする。

    エクステンションのダウンロード
    エクステンションのダウンロード
  2. エクステンションのインストール

    ダウンロードした配布ファイルをクリックして解凍し、「Zen Coding v.*.*.mxp」(*にはバージョン名の数字が入る)をダブルクリックしてExtension Managerを起動して、メッセージにしたがってインストールする。

    エクステンションのインストール
  3. Dreamweaverの再起動

    インストールが終了したらDreamweaverを再起動する。 「Zen Coding」メニューが表示されている事を確認する。

    Dreamweaverの再起動

Dreamweaver CS3以下への修正ファイルのインストール

Dreamweaver CS3以下でZen Codingを利用する場合、配布ファイルをコピーしただけでは動作しません。

以下の手順で、さらに修正ファイルをインストールします。

  1. Dreamweaverの終了

    Dreamweaverをいったん終了する。

  2. 修正ファイルのダウンロード

    Zen Coding公式サイトのトップページから[Issues]をクリックするか、Zen Coding公式サイトの修正ファイルページにアクセスして、修正ファイル一覧からID:121の「Not working in Dreamweaver CS3」をクリックしてプロジェクトを開く。

    最新の「zen.editors.js」の[Download]をクリックしてダウンロードし、ダブルクリックして解凍する。

    修正ファイルのダウンロード
    修正ファイルのダウンロード
  3. 修正ファイルの上書き

    修正ファイル「zen_editor.js」を上書きコピーする。 Dreamweaver CS3の場合、コピーするフォルダは下記のとおり。

    • Windows XP
      (ドライブ名):¥Documents and Settings¥(ユーザー名)¥Application Data¥Adobe¥Dreamweaver 9¥Commands
    • Windows Vista/Windows 7
      (ドライブ名):¥Users¥(ユーザー名)¥AppData¥Roaming¥Adobe¥Dreamweaver 9¥Commands
    • Mac
      /Users/(ユーザー名)/Library/Application Support/Adobe/Dreamweaver 9/Configuration/Commands/ZenCoding
  4. Dreamweaverの再起動

    インストールが終了したらDreamweaverを再起動する。 「Zen Coding」メニューが表示されている事を確認する。

    Dreamweaverの再起動
HTML+CSSコーディングが10倍速くなるZen Coding
  • HTML+CSSコーディングが10倍速くなるZen Coding
  • こもり まさあき・岡部 和昌 著
  • ISBNコード
    978-4-8443-2945-9
  • インプレス

この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

ネットで話題の"究極の超速コーディング"がだれでもマスターできる!

めんどうなタグ入力も、一瞬でラクラク変換! Zen Codingを使えば、かんたんな「省略形」だけでHTML/CSSタグがどんどん入力でき、複雑なHTML/CSSも、あっという間にコーディング可能です!同じタグの繰り返しや入れ子構造、連番も一発で自動変換。Webページ制作が画期的にスピードアップできます。 日々大量のタグを打つWebデザイナー、マークアップエンジニア、サイト更新担当者らが泣いて喜ぶマジックツール、Zen Codingのはじめての解説書です。

この記事が役に立ったらシェア!
tweet66はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

ディレクトリ
Webの世界ではテーマごとに整理されたリンク集のこと。 本来は「電話帳」や ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]