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

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

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

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

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

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

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

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

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

これで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を活用して、作業効率の改善を図りましょう。