DreamweaverにEmmetをインストールする手順

DreamweaverにEmmetをインストールする手順

コーディングが爆速になる便利な拡張機能「Emmet」をDreamweaverにインストールする手順を紹介します。

Emmetは、決まった文法を入力することで、HTMLタグやCSSなどを入力補助してくれる拡張機能です。例えば、divと入力して[Ctrl]+Eを押すと、<div></div>が出力されます。

Emmetの詳細については、コーディングが爆速になる!Sublime Textのプラグイン「Emmet」が便利すぎて泣けるという記事をご参照いただければと思います。

DreamweaverにEmmetをインストールする手順

1. GitHubからEmmet.zxpをダウンロードします。
※「Download Emmet.zxp」のリンクをクリックすると、ファイルがダウンロードされます。

Emmet.zxpのダウンロード

2. ダウンロードしたEmmet.zxpを実行します。
3. Adobe Extension Managerが起動するので、しばし待ちます。
4. 拡張機能に関する免責が表示されるので、[承諾する]をクリックします。

拡張機能に関する免責

5. 公開元不明の警告が表示されるので、[インストール]をクリックします。

Emmet公開元不明の警告

6. インストールするユーザーを選択して、[インストール]をクリックします。

インストールするユーザーの選択

7. 拡張機能のところに「Emmet」が出てきたら、インストール完了です。

Emmetのインストール完了

Emmetのインストールが完了したら、Dreamweaverを起動します。[コマンド]の中にEmmetの項目が追加されていると思います。

Dreamweaverのコマンドメニュー

これでEmmetのインストールは完了ですが、Dreamweaverにはデフォルトで[挿入] – [タグ]に[Ctrl]+Eのショートカットキーが割り当てられているので、それをEmmetの展開に変更してあげます。

Emmetのショートカットキーを割り当てる

1. Dreamweaverを起動して、[編集] – [キーボードショートカット]を開きます。

キーボードショートカット

2. 「キー」を選択して、[Ctrl]+Eを押下します。

ショートカットキーの入力

3. 「デフォルトセットは変更できません」というメッセージが表示されると思うので、[OK]をクリックしてデフォルトセットの複製を作成します。

デフォルトセットは変更できません

4. 複製セットの名前を入力して、[OK]をクリックします。

複製セットの名前を入力

5. [挿入] – [タグ]を選択して、「キー」に適当なショートカットキーを入力します。
※すでに使われているショートカットの場合、下に警告が表示されます。

ショートカットキーの割り当て

6. [変更]をクリックして、[OK]でキーボードショートカットのメニューを閉じます。

これで[挿入] – [タグ]に割り当てられていたキーボードショートカットが変更され、[Ctrl]+EがEmmetで利用できるようになります。Emmet側にはすでにキーワードショートカットが割り当てられているので、特に変更する必要はありません。

あとがき

DreamweaverでもEmmetを利用できるようにすることで、コーディングの速度が向上すると思います。ぜひEmmetを活用して、作業効率の改善を図りましょう。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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