誰に向けての文章か？
この報告はわたしの担当してる大学での講義（デザイン系）のためのまとめです。対象はわたしの受講生です。講義中に話したことは省略してあることもあります。このため、一般の方が読まれると技術的に不明瞭・不正確な解説になっている部分もあります。
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内の解説
先人たちの素晴らしい仕事がたくさんあります。感謝しつつ参考にさせてもらいましょう。たとえば初学者には以下のような投稿が役に立つと思います。