Emmet/Zen-Codingの使い方をマスターしてコーディングの「はかせ」になる方法

こんにちは、せっかちな性格の金田です。

小学校の先生が教えてくれた言葉で、算数の答えは「はかせ=はやく、かんたん、せいかく」じゃないとダメという言葉がいまだに忘れられません。
答えは同じでも、そのプロセスについて考えされられた言葉でした。

コーディングに関しても、早く・簡単・正確な方法があれば取り入れるべきだと思います。
そこでおすすめなのがEmmet(旧Zen-Coding)です。

目次

Emmetとは

簡単に言ってしまえば、高機能の単語登録機能みたいなものです。
例えば「a」と入力して変換すれば、「<a href=””></a>」とリンクのタグになります。

この変換のことをEmmetでは展開と呼びます。
例えばこんなことができます。

[HTML]ナビゲーションメニューを展開する

nav>ul.menu>li#item$$*5>a[href=#]

↓展開すると

<nav>
 <ul class="menu">
 <li id="item01"><a href="#"></a></li>
 <li id="item02"><a href="#"></a></li>
 <li id="item03"><a href="#"></a></li>
 <li id="item04"><a href="#"></a></li>
 <li id="item05"><a href="#"></a></li>
 </ul>
 </nav>

たった一行の入力で、連番のID付のナビゲーションが作成できました。

[CSS]ブロック要素を中央揃え

m0-a

↓展開すると

margin: 0 auto;

たった4文字でCSSのコード中央揃えのコードを展開できました
ちょっとした展開のコツを覚えるだけでコーディングの効率化が図れます。

結構細かいところまでご紹介しますが、普段よく使うところだけ覚えるとOKです。

Emmetをインストール/セットアップする

では、さっそくですが主要ソフトでのインストール方法を簡単にご紹介いたします。

Sublime Text

(※Package Controlはインストール済みという前提)

  1. 「Ctrl+Shift+P」でコマンドパレットを表示
  2. 「Package Control:Install Pacage」を選択
  3. 「Emmet」と入力して検索し、インストールします。

Brackets

  1. 「拡張機能マネージャー」→「入手可能」を選択
  2. 「Emmet」と入力して検索し、「インストール」を選択します。

Dreamweaver

  1. GitHubにアクセスし、「Download ZIP」よりEmmetのファイルをダウンロードします。

    https://github.com/emmetio/dreamweaverGithub

  2. ダウンロードしたファイルを解凍し、「Emmet.zxp」をダブルクリックしてExtensionManagerでインストールします。

 

その他エディタの場合は、公式サイトを確認してみて下さい。

http://emmet.io/download/Emmet Download(英語)

Emmetはどのように展開するのか

tabまたはcontrol+Eが基本です。エディタによって異なる場合があります。

一例をご紹介します。

主要なエディタの展開のためのショートカット

Sublime Text
(Win)TabまたはCtrl+E
(Mac)TabまたはCmd+E
Brackets
TabまたはCtrl+Alt+Enter
Dreamweaver
Ctrl+E(ショートカットキーが重複するケースは変更してください。)

Emmetでコーディングをスピードアップさせる

それでは階層的な展開からEmmetについて学びましょう。
このセクションはHTMLとCSSの知識があればOKです。

階層的な展開

> 子要素として展開する

ul>li>a
<ul>
  <li><a href=""></a></li>
</ul>

+ 隣接した要素(隣り合わせに配置)

dl>dt+dd
<dl>
  <dt></dt>
  <dd></dd>
</dl>

^ 上の階層(続けて配置)

div>p^div
<div>
  <p></p>
</div>
<div></div>

さまざまな展開のテクニック

IDやCLASSをつける

ul#hoge>li.moge
<ul id="hoge">
  <li class="moge"></li>
</ul>

IDは要素名に続けて「#」、クラスは要素名に続けて「.」をつけます。
CSSの規則と同じです。

IDやCLASSを複数個つける

p#id1.class1.class2
<p id="id1" class="class1 class2"></p>

このように連続して複数個つけることもできます。

divの省略

#main^.sub
<div id="main"></div>
<div class="sub"></div>

divを省略して、idとclass名のみを指定して展開することもできます。

連番と繰り返し

ul>li#item$*5
<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>

行数が多いと、便利さが際立ちます。

「$」マークで連番を付けることができます。「$」マークの数で桁数を指定することができます。
例えば3ケタの連番を付けたい場合は「$$$」です。

さらに「*」記号で特定の要素を繰り返して展開することができます。
「li*5」ならリスト要素を5個展開します。

降順に番号をつける

ul>li#item$@-*3
<ul>
  <li id="item3"></li>
  <li id="item2"></li>
  <li id="item1"></li>
</ul>

「$@-」で降順で番号を付与することができます。

開始番号を指定して、番号をつける

ul>li#item$@5*3
<ul>
  <li id="item5"></li>
  <li id="item6"></li>
  <li id="item7"></li>
</ul>

「@数字」で開始番号を指定することができます。
「@5」なら5番目から展開します。

まとめて展開する

dl>(dt+dd)*3
<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

この例では、<dt>と<dd>をまとめて、3つ展開しています。

説明リスト(定義リスト)の展開などで役に立ちます。

属性・値を指定する

a[href=# target=_blank]
<a href="#" target="_blank"></a>

[]を使うことで、あらかじめ属性・値を入力して展開することができます。
“”は不要です。

文字列を入れる

div>p{テキスト}
<div>
  <p>テキスト</p>
</div>

{}の中にテキストを入れて展開することができます。

ul>li*3>a{メニュー$}
<ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
</ul>

これはこれまでの応用です。
テキストに連番を付けて展開することもできます。

ダミー文章を入れる

lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore id minus dolorem architecto, neque voluptatibus et, culpa iste ad, voluptas perspiciatis magni earum. Ex ipsum eum mollitia, eius sint, est.

英語としても意味をなさないダミー文章を展開してくれます。

p>lorem5
<p>Lorem ipsum dolor sit amet.</p>

loremに数字をつけるとその数に応じた単語が展開されます。

フィルター

ちょっと特殊な展開方法もご紹介します。こんなことも出来るんだ程度でいいと思います。

|e 特殊文字をエンコードで出力

div>p|e
&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;

>や<、&をエスケープ処理して展開することができます。

|c 閉じタグの後にIDやClass名をコメントで出力

#main>p^.sub>p|c
<div id="main">
  <p></p>
</div>
<!-- /#main -->
<div id="sub">
  <p></p>
</div>
<!-- /.sub -->

コードが長くなると便利ですよね。
ID名やClass名を閉じタグの後ろにコメントとして追加してくれます。

|s シングルライン(1行で出力)

ul>li*3|s
<ul><li></li><li></li><li></li></ul>

{}の中にテキストを入れて展開することができます。

CSSのチートシート

多少間違ってても、近いやつが展開されます。
あいまいな入力にも対応しているのがうれしいところです。

すべて覚える必要はないので、よく使うものから覚えるといいと思います。

タイプ(文字装飾)

  • 活用のポイントは「略字」+「カラーコード」や「数字(単位)」です。
  • カラーコードは省略可能です。(例)「#fff」は「#f」でOK
  • 単位は「(省略)」でピクセル、「p」でパーセンテージ、「r」でレム、「e」でエムです。
  • 上下左右の設定が可能なものは「t」「b」「l」「r」を付けます。
    マージントップなら「mt」、パディングライトなら「pr」といった感じです。
展開前 展開後
c color: #000;
c#f color: #fff;
fz12 font-size: 12px;
fz12r font-size: 12rem;
fw:n font-weight:normal;
fw:b font-weight:bold;
lh1.5r line-height: 1.5rem;
td text-decoration: none;
-tsh-inset-0-1-3-#bbb -webkit-tsh-inset: -0px 1px 3px #bbb;
-moz-tsh-inset: -0px 1px 3px #bbb;
-ms-tsh-inset: -0px 1px 3px #bbb;
-o-tsh-inset: -0px 1px 3px #bbb;
tsh-inset: -0px 1px 3px #bbb;

背景

展開前 展開後
bg+ background:#fff url() 0 0 no-repeat;
bgc#ccc background-color: #ccc;
bgc:t background-color:transparent;
bgr:x background-repeat:repeat-x;
bgr:y background-repeat:repeat-y;

ブロック

展開前 展開後
va vertical-align:top;
va:m vertical-align:middle;
va:b vertical-align:bottom;
tac text-align: center;
ta-l text-align: left;
tar text-align: right;
ti text-indent: ;
d display:block;
d:n display:none;
d:b display:block;
d:i display:inline;
d:ib display:inline-block;
d:tb display:table;
d:itb display:inline-table;
d:tbcl display:table-column;
d:tbr display:table-row;
d:tbc display:table-cell;

ボックス

  • 活用のポイントは「略字」+「数字(単位)」です。
  • 幅は「w」、高さは「h」、マージンが「m」、パディングが「p」です。
  • 単位は「(省略)」でピクセル、「p」でパーセンテージ、「r」でレム、「e」でエムです。
  • 上下左右の設定が可能なものは「t」「b」「l」「r」を付けます。
    マージントップなら「mt」、パディングライトなら「pr」といった感じです。
  • ショートハンド的な展開も可能です。
    margin上下10px、左右autoなら「m10-a」で「margin: 10px auto;」となります。
展開前 展開後
w100 width: 100px;
w100p width: 100%;
w2e width: 2em;
w2r width: 2rem;
w:a width:auto;
h height:;
h:a height:auto;
maw max-width:;
mah max-height:;
miw min-width:;
mih min-height:;
fl float:left;
fl:r float:right;
cl clear:both;
m1-2-3-4 margin: 1px 2px 3px 4px;
m10–10
※ハイフンに続けて、マイナス10
margin: 10px -10px;
m0-a margin: 0 auto;
mt margin-top:;
mr margin-right:;
mr:a margin-right:auto;
mb margin-bottom:;
ml margin-left:;
ml:a margin-left:auto;
p padding:;
pt padding-top:;
pr padding-right:;
pb padding-bottom:;
pl padding-left:;

ボーダー

展開前 展開後
bd+ border:1px solid #000;
bt+ border-top:1px solid #000;
bdt+ border-top:1px solid #000;
bdc border-color:#000;
bdc:t border-color:transparent;
bdi border-image:url();
bds:s border-style:solid;
bds:db border-style:double;
bds:dt border-style:dotted;
bds:ds border-style:dashed;
-bdrs5
※ベンダープレフィックス付き
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
bdtrrs border-top-right-radius:;
bdtlrs border-top-left-radius:;
bdbrrs border-bottom-right-radius:;
bdblrs border-bottom-left-radius:;
-bsha-0-1-3-#bbb -webkit-box-shadow: -0px 1px 3px #bbb;
box-shadow: -0px 1px 3px #bbb;

リスト

展開前 展開後
lis list-style:;
lis:n list-style:none;
list:n list-style-type:none;
list:d list-style-type:disc;
list:c list-style-type:circle;
list:s list-style-type:square;
lisi list-style-image:;
lisp:i list-style-position:inside;
lisp:o list-style-position:outside;

位置(ポジション)

展開前 展開後
pos position:relative;
pos:a position:absolute;
pos:f position:fixed;
t top:;
r right:;
b bottom:;
l left:;
z z-index:;
ov overflow:hidden;
ov:v overflow:visible;
ov:s overflow:scroll;
ov:a overflow:auto;
v visibility:hidden;
v:v visibility:visible;

拡張(視覚的効果)

展開前 展開後
cur cursor:${pointer};
cur:a cursor:auto;
cur:d cursor:default;
cur:he cursor:help;
cur:p cursor:pointer;
cur:t cursor:text;
op opacity:;
op:ie filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* ie lt 8(7以前) */
op:ms -ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)’; /* IE8以降 */

HTMLのチートシート

<head>関係

展開前 展開後
!
※lang=”en”をlang=”ja”に変更することも可能です。(詳しくは後述)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body></body>
</html>
link <link rel=”stylesheet” href=”” />
link:css <link rel=”stylesheet” href=”style.css” />
script <script></script>
script:src <script src=””></script>
link:favicon <link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico” />
link:touch <link rel=”apple-touch-icon” href=”favicon.png” />
meta:vp <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″ />

 lang=”en”をlang=”ja”に変更する方法

Sublime Textの場合の設定方法です。
「Preferences」→「Package Settings」→「Emmet」→「Settings – User」を選択します。

lang設定の変更
「Emmet.sblime-settings」のファイルに下記の内容を記述して保存します。

{
"snippets": {
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
}
}
}

以上で、Emmetのlangをjaに変更することができます。

Sublime Text以外のエディタでも設定ファイルを修正することでjaにすることができます。

フォーム関係

展開前 展開後
form:get <form action=”” method=”get”></form>
form:post <form action=”” method=”post”></form>
label <label for=””></label>
inp <input type=”text” name=”” id=”” />
input:h <input type=”hidden” name=”” />
input:search <input type=”search” name=”” id=”” />
input:email <input type=”email” name=”” id=”” />
input[type=tel] <input type=”tel”>
input:url <input type=”url” name=”” id=”” />
input:c <input type=”checkbox” name=”” id=”” />
input:r <input type=”radio” name=”” id=”” />
input:p <input type=”password” name=”” id=”” />
input:s <input type=”submit” value=”” />
input:p <input type=”password” name=”” id=”” />
input:b <input type=”button” value=”” />
select <select name=”” id=””></select>
opt <option value=””></option>
tarea <textarea name=”” id=”” cols=”30″ rows=”10″></textarea>
btn:b <button type=”button”></button>
btn:s <button type=”submit”></button>

さらに詳しく知りたい方は、本家の英語サイトを参照してください。

http://docs.emmet.io/cheat-sheet/Emmet cheat-sheet(英語)

その他、Emmetの変換機能・ショートカット

Emmetにはさまざまな変換(展開)の機能があります。その一例をご紹介いたします。

Sublime Textの例(コマンドパレットで確認できます)

コマンドパレットのEmmet

Bracktesの例

Emmetのショートカットキー

Wrap変換(ラップ変換、wrap with abbreviation)

Ctrl+Shift+G(Sublime Text)
Ctrl+Shift+A(Bracktes)

特定の範囲を選択し、Emmetのコードを入力するとその前後に開始タグと終了タグを追加してくれます。

Emmet Wrap変換

展開済みのHTMLを更新(Update Tag)

すでに展開済みのHTMLを更新することができます。

Ctrl+Shift+U(Sublime Text)
Ctrl+Shift+I(Bracktes)

出現したウィンドウに「#name」などと入力することでID、Class名、属性・値などを追加できます。

<header>|</header>
タグの中にカーソルを合わせて、Ctrl+Shift+I
<header class="name"></header>

画像の幅・高さ情報を追加(Update Image Size)

Ctrl+U(Sublime Text) ※Bracktes版は未確認

保存済みのHTMLの画像パスのところにカーソルを合わせて「Ctrl+U」で画像の幅、高さが追加されます。
これは便利ですね!

画像サイズの取得

編集点間の移動(タブストップ、Tab Stop)

属性の値などの編集点を移動するショートカットです。
PCの設定によっては、画面の向きが変わる場合があります。その場合は、ショートカットキーを変更する必要があります。

前の編集点へ移動(Previous Edit Point)

Ctrl+Alt+←

次の編集点へ移動(Next Edit Point)

Ctrl+Alt+→

まとめ

いかがでしたでしょうか?例を多く書くと長くなってしまいました。

チートシートはA4で印刷して使えるようにまとめたいと思います。ご用意できたら追ってお知らせさせていただきます。

是非Emmetをマスターしてコーディングの「はかせ」になりましょう!

2 thoughts on “Emmet/Zen-Codingの使い方をマスターしてコーディングの「はかせ」になる方法

  1. sublimeでのUpdateTagは「Ctrl+Shift+U」ですね~。
    日本語で一覧としてまとまっていると拾いやすくて便利です。感謝

    • kanayamaさん
      コメントありがとうございます。Sublime Text3で動作確認できました。
      追記させていただきます。

コメントを残す

メールアドレスが公開されることはありません。