readバイト先で「新ゆとり世代」と言われました。HTML、CSSを省略して書けるZen-Codingの後見、Emmetについて書こうと思います。やれCoffeeだTypeScriptだSassだ〜と手をつける前に、もっと簡単に、デメリット無く作業効率をあげられます。結局自由が効かなくなる、ということはありません。個人から使えて、チームで使ってもなお良し。細かい気配りまで完璧です。そんなEmmetを僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。Emmetの導入Emmetは各種エディタ・IDEのプラグイン形式で配布されています。Web系の人が使ってそうなエディタについて導入方法をざっくり説明します。Packageを選択。出てきたリストの中からEmmetを選ぶだけです。数秒待てばインストールが完了し、もう準備完了です。それをダブルクリックするだけで準備完了です。使ったこと無いので導入方法はイマイチわかりません。展開がされなかったら、ググってみてください。eになっていると思います。Emmetのコードを入力して、その行末でショートカット押せばカーソル以前のEmmetコードが展開されます。HTML編EmmetでHTMLを書く際最低限知っておくと便利なのは、HTMLのひな形を一瞬で作れるidは#、classは.タグを表すための<と>は不要。タグ名だけでいい入れ子にする際にはA>Bのように>を使う展開した時に連番にしたいときは$を使う属性を表すときは、[属性名=値]と書く。各タグにいい感じにデフォルト属性をつけてくれる基本これだけで恩恵を受けられます。CSSやjQueryを使ったことが有る方なら、すぐ馴染めると思います。他にも()でグループ化したり、^で階層を上に戻ったりできますが、そこら辺は割愛します。基本形ごくごくベーシックな例を出すと、linkheadタグ内に必ず入れると思います。href="">と、rel="stylesheet"、href=""を付加した状態にしてくれます。メニューよくあるメニューは、こんな感じになると思います。nav>ul#menu>li*5>a[href=#]navの中にidがmenuのulを入れて...という具合です。これを展開するとこんな感じになります。</ul></nav>liに*5とついていますが、タグ名の後ろに*数字を入れることで、そのタグを指定した数字分繰り返しますよーとうい指定をできます。最近は連番を使う機会があまりないのですが、たまに使う時でもあると便利です。連番を利用するには$を使います。.thumb{サンプル$}*6今回はタグ名がありません。タグ名を省略すると、デフォルトではdivになります。ulの中でタグ名を省略するとliになったり、だいたいいい感じになります。class="thumb">サンプル6</div>連番って、行コピー&ペーストする際に、さりげなくも、かなり面倒な作業だと思います。そんなときも、連番にしたい所に$を一つ置くだけで連番に出来ます。ちなみに$$と$を2つ並べると、01、02、03...と2桁の連番になります。transitionalとHTML5なので、とりあえずそれだけ説明します。