LOG IN

Emmet

by kuroko

Emmetとは?

Emmet(元Zen-coding)主にHTMLやCSSの入力・編集において、独自の省略記法を展開することにより各種コードを生成できるため、コーディングを高速化できるプラグインです。

Emmetの省略記法を用いた表記(HTML)

div>h1+p

>」で1つ下の階層になり、「+」でその次に追加できます。「tab」で展開できます。

<div>
<h1></h1>
<p></p>
</div>
#header>h1+ul.nav>(li.nav__item>a[href=#])*4

*n」(nは数字)でn回分繰り返します。ここでは「*4」なので、( )内を4回繰り返します。
[ ]」で属性を設定できます。ここでは、リンク先の「href」に「#」を設定しています。

BEMを用いた場合は、「|(shift+¥)」+「bem」を最後につけます。

#header>h1+ul.nav>(li.__item>a[href=#])*4|bem
<div id="header">
<h1></h1>
<ul class="nav">
<li class="nav__item"><a href="#"></a></li>
<li class="nav__item"><a href="#"></a></li>
<li class="nav__item"><a href="#"></a></li>
<li class="nav__item"><a href="#"></a></li>
</ul>
</div>

Emmetの省略記法を用いた表記(CSS)

p{
tc
}
p{  
text-align: center;
}
.nav__item{
dib+lis:n+p10
}

「+」でプロパティを繋ぐことができます。

.nav__item{
display: inline-block;
list-style: none;
padding: 10px;

}

その他の省略記法はこちら
Cheat Sheet - Emmet Documentation

導入方法

Emmetのダウンロードページ(Download - Emmet)より、自分の使っているエディタのパッケージをダウンロードし、エディタにインストールする。

例えば、Sublime Textの場合は、次のようなステップ。
1. 「Package Control: Install Package」を起動
2. 「Emmet」と入力
3.  (必要があれば)Sublime Textを再起動

実験

Emmetを使ってみよう!
 「command(ctrl)+A」で全選択して、エディタにコピペして展開してみてください。

HTML編

骨組み部分

.container>header.header>.__content>.__title>img[src]^ul.nav-global>(li.__item>a[href=#]{メニュー})*4^^^.contents>.box>(.__item>img[src]+.__title+.__content)*3^^footer.footer>.__title+.__content|bem

通し番号を入れる「$」

「$」を書くと、展開されたときに「1、2、3...」となり、「$$$」と書くと「001、002、003」となる。

ul.list>(li.__item{item$})*5|bem

テーブル

table>(tr.row>th.__title{会社名}+td.__content{kurokoroll})*4|bem

CSS編

paddingやmarginなどのショートハンド

padding: 5px 10px; といったように、ショートハンドで書くときは「-」で繋ぐ。

.nav__item{
dib+lis:n+p5-10
}

参考サイト

Emmetでよく使うショートハンドまとめ|Gimmick log


kuroko
OTHER SNAPS