ATOM
emmet
monaca
mery

Emmetを導入してみよう

More than 1 year has passed since last update.

誰に向けての文章か?

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

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を呼び出すショートカットキーを割り当てないといけません。

  1. 「ツール」−「オプション」−「キーボード」を選択
  2. カテゴリを「マクロ」にします
  3. 「コマンド」の項目のなかにemmet.jsがありますので、選択しましょう
  4. 「新しいキー」にカーソルを当てます
  5. 好みのキーを入力します。わたしはCtrl+e を割り当てています。
  6. 「現在の割り当て」とかぶらないように注意しましょう。
  7. キーの組み合わせを入力後、「割り当て」キーを押します。
  8. 最後に「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内の解説

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