誰に向けての文章か？

この報告はわたしの担当してる大学での講義（デザイン系）のためのまとめです。対象はわたしの受講生です。講義中に話したことは省略してあることもあります。このため、一般の方が読まれると技術的に不明瞭・不正確な解説になっている部分もあります。

Emmetについて

簡単にいうと、HTMLのタグやCSSの命令を書くときに「ずるっこ」ができる仕組みです。たとえば

div.hogehoge

と入力してCmd+Shift+eを押下してください(MacでAtomを使っている場合)。そうすると

<div class="hogehoge">|</div>

と展開されます。｜はカーソルの位置を示します。どうですか？便利でしょ？「呪文」を展開するキー（トリガーキー）の組み合わせは環境により異なります。以下詳述していきます。

Emmetが使える環境について

Emmetは様々な環境で使えますが、講義で扱ったものではすべて使えます。というより、プラグイン等によりEmmetを使える環境をご紹介しました。

Mery
Atom
Monaca

Emmetが導入できるテキストエディタについてはEmmetの公式サイトを参照してください。

エディタ別解説

Mery

導入方法

Mery公式サイトのマクロライブラリにリンクがあります。リンク先のGithubにemmet.jsがありますので、ローカルの任意の場所にダウンロードします。その後、Meryエディタがインストールされたフォルダ内に「MyMacros」等を作成し（フォルダ名は自由）emmet.jsを保存します。マクロメニューの「選択」から読み込みます。
（Meryをインストーラから標準インストールした場合、CドライブのProgram FilesフォルダのなかにMeryフォルダがあります）

トリガーキー

残念ながらMeryではEmmetにあらかじめトリガーキーの割り当てはありません。このため、自分でEmmetを呼び出すショートカットキーを割り当てないといけません。

「ツール」−「オプション」−「キーボード」を選択
カテゴリを「マクロ」にします
「コマンド」の項目のなかにemmet.jsがありますので、選択しましょう
「新しいキー」にカーソルを当てます
好みのキーを入力します。わたしはCtrl+e
を割り当てています。
「現在の割り当て」とかぶらないように注意しましょう。
キーの組み合わせを入力後、「割り当て」キーを押します。
最後に「OK」ボタンを押しましょう。

Atom

導入方法

AtomでのEmmetはプラグインとして提供されています。プラグインのインストール方法は以下です。

Ctrl+,(Macの場合はCmd+,)を押して設定画面を開きます。左側のメニューのところに「Install」がありますので、選択します。検索窓が出ますので、そこにEmmetと入力して「Packages」ボタンを押しましょう。emmetioから提供されているemmet（執筆時のバージョンは2.4.3）を選択してInstallボタンを押します。

トリガーキー

Winの場合はCtrl+e
Macの場合はCmd+Shift+e

Windowsの場合はTabでも展開するようです。

Monaca

導入方法

ありません。デフォルトで使用できるようになっています。

トリガーキー

Tab

チートシート

公式サイトで「呪文」の一覧が用意されています。こちらです。

Qiita内の解説

先人たちの素晴らしい仕事がたくさんあります。感謝しつつ参考にさせてもらいましょう。たとえば初学者には以下のような投稿が役に立つと思います。

Emmetを学習しましょう
備忘録_Emmet