LoginSignup
9
12

More than 5 years have passed since last update.

Emmetを導入してみよう

Posted at

誰に向けての文章か?

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

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

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

9
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
12