Emmetで恋する速度を爆速化しよう！

エディタに恋する速度を早めるためには

　特にこうしたプログラミングになれるまでは、一々キーボードでチマチマと文字を打っていくこと自体がある種の憂鬱を生み出していくということがよくあるかと思います。特にHTMLやCSSといったものはもっとちゃちゃっと書き上げてしまいたくなるかもしれませんが、Emmetというものを使うとこれらをものすごいスピードで書いていくことが出来ます。またPHPやその他の言語もスニペットとして登録しておけば一発で呼び出すということも出来るようになるのです。

連番でメニューを100個作るのも一瞬

　メニューを100個作るなんて例が頻繁に起こるとは言いがたいですが、実際にあった場合に一々コピペしていては手が疲れてしまいます。しかし、Emmetを導入していれば、

nav>ul>li*100>a[href=$.html]

　このように入力して展開すれば一瞬で1.htmlから100.htmlまでのファイルを作ることが出来ます。もしも1~100じゃなくて、001~100なんだけど……って場合には、

nav>ul>li*100>a[href=$$$.html]

これで解決です。一瞬できれいな連番メニューが仕上がりました。流石にメニューでこれをやる人は中々いないかと思いますが、画像などだと比較的あったりしまますので、連番画像をちゃちゃっと表示するのにも非常に便利に使えます。

Emmetが使えるエディタ

　Emmetを使うためにはEmmetに対応したエディタを使う必要があります。肝心な対応エディタですが、以下の様なものがあります。

クロスプラットフォーム（複数OS用）

Mac OSX用

Windows用

　いかがでしょうか？　特にSublimeTextやAptana、EclipseなどはどのOSでも利用できる上無料で利用することができます。

また、AdobeのDreamweaverを利用している人も、このEmmetを使って爆速でウェブアプリケーションを作るためのHTMLとCSSを書き上げて行くことができるのです。

　またCodepenというサイトではデフォルトのWEBエディターの中にこのEmmetが組み込まれているため、ブラウザさえあればさくさくとコードを書いていく事が出来るようになっています。

　そんなEmmetですが、実際にコーディングの方法を覚えていかなくてはいけないわけですが、代表的なものや、自分がよく使っているものなどはまとめておきましたので、一つずつ試して使って行ってみてくださいね。

HTMLの便利コード

!
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
.sub{タイトル$}*6
<div class="sub">タイトル1</div> <div class="sub">タイトル2</div> <div class="sub">タイトル3</div> <div class="sub">タイトル4</div> <div class="sub">タイトル5</div> <div class="sub">タイトル6</div>
nav>ul#menu>li*5>a[href=#]
<nav> <ul id="menu"> <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> </nav>

CSSのよく使うコード

基本

d
display: ;
w
width: ;
h
height: ;
m
margin: ;
p
padding: ;
ta
text-align: ;
fl
float: ;
cl
clear: ;
bg
background: ;
bd
border: ;
f
font: ;
fw
font-weight: ;
fz
font-size: ;
c
color: ;
pos
position: ;
t
top: ;
r
right: ;
b
bottom: ;
l
left: ;

応用

nav>ul#menu>li*5>a[href=]
mt
margin-top: ;
mb
margin-bottom: ;
pl
padding-left: ;
bdl
border-left: ;
bdb
border-bottom: ;
bdc
border-color: ;
bgi
background-image: url();
m:a
margin: auto;
d:i
display: inline;
d:b
display: block;
d:ib
display: inline-block;
fl:l
float: left;
fl:r
float: right;
cl:l
clear: left;
cl:r
clear: right;
cl:b
clear: both;
ta:l
text-align: left;
ta:c
text-align: center;
fw:n
font-weight: normal;
fw:b
font-weight: bold;
pos:r
position: relative;
pos:a
position: absolute;

　他にもこんなの無いのかとおもったら公式のドキュメンテーションを見てみると良いかと思います。

　特にHTMLに関しては大した効果が無いじゃないかという人もいるかもしれませんが、CSSに関して言えば、本当に便利なものだと思いました。ウェブアプリケーションソフトを作りたいという人は是非導入してみてはいかがでしょうか？