Adobe

[Adobe] Dreamweaver CC 2014 に Emmet(Zen-Cording)を インストール!

2014-11-04_emmet_06s

こんにちは。
@OfficeTAKUです。

普段 HTML いじる時は、ミミカキエディットやらSublime Textやら使っていましたが、折角 Adobe Creative Cloud 利用しているのだから使ってやれ!ってことで、最近また Dreamweaver を使っていみようと思いなるべく使うようにしています。

たしか Dreamweaver CS3 位 の頃が一番使っていたので、随分とご無沙汰していました。
今は、Dreamweaver CC 2014 です。

でも結局、タグは手打ちなのです。
うーんめんどう。

でもたしか Zen-Cording 対応していたはず! と気づき早速調べたらありました。

Dreamweaver CC 2014 に Emmet をインストールする方法

とっても簡単でした。

事前準備:Extension Manager CC を インストールしておこう

Emmet は 拡張機能(Extension)として提供されています。
あらかじめ Extension Manager CC をインストールしておくと各種Extensionの導入が楽になります。

  1. Creative Croud を起動
  2. Apps タブを開き Extension Manager CC の [インストール]ボタンをクリックしインストールします
    Dreamweaver Extension Manager

Emmet のサイトから Emmet.zxp ファイルをダウンロード

  1. Emmetのサイト(Emmet — the essential toolkit for web-developers)へアクセスします
  2. 左メニューの[DOWNLOAD]をクリック
    Emmet
  3. [Adobe Dreamweaver]をクリック
    Emmet
  4. Installation 項目の中にある [Emmet.zxp] のリンク先ファイルを任意のフォルダにダウンロードします
    Emmet Dreamweaver Extension

インストールはダウンロードした Emmet.zxp ファイルをダブルクリック

  1. ダウンロードした [Emmet.zxp] ファイルをダブルクリックします
  2. Extension Manager が起動し、インストール確認のダイアログが表示されます
  3. [承諾]ボタンをクリックします
    Emmet Dreamweaver Extension
  4. 上記の確認のあと、もう一つセキュリティ確認のダイアログが表示されます。
    そちらも[OK]などをクリックしてインストールを進めます
  5. Extension Manager に Emmet が表示されたらインストール終了です
    Emmet Dreamweaver Extension

新規HTMLファイルを作成し試してみて下さい
[Ctrl]+[E] にタグの展開が割り当てられています
2014-11-04_emmet_08

ピックアップ記事

  1. [レビュー] Lenovo Ideapad 520 スタンダードな充実ノートパソ…
  2. Apple Music や Amazon Musice でクラシック音楽の楽曲・…
  3. 災害時に役立つTwitterアカウント、情報サイト等まとめ
  4. Scratch (スクラッチ)を ちょっとだけ勉強して、かんたんな作品『のっティ…
  5. 机からケーブルを落とさない NuAns WORKLIFE FOLDKEEPER …

関連記事

  1. Adobe Creative Cloud デスクトップアプリ

最近の記事

  1. Photo by rawpixel on Unsplash
  2. Photo by Szűcs László on Unsplash
  3. Photo by Samuel Zeller on Unsplash

人気の記事

  1. Photo by Szűcs László on Unsplash
  2. Photo by Samuel Zeller on Unsplash
  3. Photo by S A R A H ✗ S H A R P on Unsplash
  4. PAPERANG-P2
  1. Webサービス

    Office TAKU、LINE@ アカウント 開設しました!
  2. 書籍

    集中して仕事がしたい、自分で時間をコントロールしたい、と思い、読んでためになった…
  3. Photo by S A R A H ✗ S H A R P on Unsplash

    Facebook

    [Facebook] フェイスブック「追悼アカウント管理人」を指定しました
  4. Photo by Szűcs László on Unsplash

    Mac

    [Mac] Macで時報をアナウンスさせるようにしたら意外と便利です
  5. ハードウェア

    こんどのEchoはスクリーン付き!Amazon Echo Spot 7月26日発…
PAGE TOP