Help us understand the problem. What is going on with this article?

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内の解説

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away