Emmetでコーディング時間を短縮！
【こちらの記事は、約4分程でお読みいただけます。】
あけましておめでとうございます。水曜日のブログ担当の工藤です。
Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。
今回は、Emmetについて解説していきたいと思います。
効率よくコードをかけるEmmet
コードエディッタ（DreamWeberなど）を使うと、コードが自動補完で出てくるので非常に捗りますが、Emmetを使えばさらにスピードを上げてコーディングすることが出来ます。
header#header.header>h1+ul.nav>li*5>a
たとえば、上記のようなコードをEmmetで変換すると
<header id="header" class="header">
<h1></h1>
<ul class="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
このような長いコードに転換してくれます。
詳しくは下記のEmmet公式ページをご覧ください。
左ナビのDownloadから、現在愛用しているエディッタのDL項目から選びプラグインを有効化すれば使えるようになります。
手っ取り早く体験するなら、CodePenで使えるようになります。CodePenでは、tabキーを押すと変換出来るようになります。
基本的な使い方
タグを入力
headerやpなどを転換するとタグで囲ってくれます。
存在しないタグでも<>で囲ってくれるので注意が必要です。
header
<header></header>
子要素
【>】で子要素を作ります。
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
兄弟要素
【+】で兄弟要素を作ります。
div>h3+p
<div> <h3></h3> <p></p> </div>
ID,class付加
【#〜〜】でIDを。【.〜〜】でclassを付加します。
div#nav__wrap>ul.nav__lists>li.nav__list>a.nav__item
<div id="nav__wrap">
<ul class="nav__lists">
<li class="nav__list"><a href="" class="nav__item"></a></li>
</ul>
</div>
2つ以上のclassを付加したい場合は下記のように記述します。
div.small-7.large-4.columns
<div class="small-7 large-4 columns"></div>
上の階層へ
【^】で上の階層へ行きます。
div>h3>span^p>span
<div> <h3><span></span></h3> <p><span></span></p> </div>
^の回数分だけ上の階層に移動します。
div>h3>span^^div>ul>li
<div>
<h3><span></span></h3>
</div>
<div>
<ul>
<li></li>
</ul>
</div>
繰り返し
【*ｎ】で要素を繰り返します。
div>ul>li*4>a
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
連番
【$】で連番を作ります。
ul>li.item$*5
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
【$】を増やすと0を追加出来ます。
ul>li.item$$*15
<ul> <li class="item01"></li> <li class="item02"></li> <li class="item03"></li> <li class="item04"></li> <li class="item05"></li> <li class="item06"></li> <li class="item07"></li> <li class="item08"></li> <li class="item09"></li> <li class="item10"></li> <li class="item11"></li> <li class="item12"></li> <li class="item13"></li> <li class="item14"></li> <li class="item15"></li> </ul>
文字を入れる
【{}】内に文字を入れるとタグ内に文字を挿入出来ます。
p{文字をいれます。}
<p>文字をいれます。</p>
属性付加
【[]】で属性を付加します。
table>tr>td[colspan=2]
<table>
<tr>
<td colspan="2"></td>
</tr>
</table>
応用
tableセット
table+
<table>
<tr>
<td></td>
</tr>
</table>
dlセット
dl+
<dl> <dt></dt> <dd></dd> </dl>
クラス
タグを入力せず【.】だけで転換を行うと自動的にdivダグで転換してくれます。
p内の場合は、自動的にspanタグに転換してくれます。
.
<div class=""></div>
p>.
<p><span class=""></span></p>
DOCTYPEセット
!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>
終わりに
emmetは、scssに比べて面倒なrubyなどは要らなくてプラグインを入れればすぐに使えます。
慣れてくれば、面倒なタグも思い通りに作れます。
ul>li*4>a>img[src=../images/img$$.jpg]
<ul> <li><a href=""><img src="../images/img01.jpg" alt="" /></a></li> <li><a href=""><img src="../images/img02.jpg" alt="" /></a></li> <li><a href=""><img src="../images/img03.jpg" alt="" /></a></li> <li><a href=""><img src="../images/img04.jpg" alt="" /></a></li> </ul>
CSSでもEmmetは使えます。
タグが多すぎるので下記のシートを参考に。
http://docs.emmet.io/cheat-sheet/
codepenで触ってみて便利だと思ったら、愛用しているエディッタにプラグインを導入してみましょう。
