爆速マークアップ

SublimeText2+Emmetで爆速マークアップ

「加速したくはないか，少年」
はい，言いたかっただけですね．B4のktaroです
今回は,SublimeText2とEmmetを利用しての爆速マークアップについて記述したいと思います．
環境構築は,Macを利用して行っています.
(うまくハイライトできなかったので，画像・・・)

SublimeText2での設定

まずは，SublimeText2上でCommand + Shift + PでEnter

Emmetには,Control + eとTabでのショートカットがあります，
しかし，Tabでの展開は動作が重複してしまう可能性があるため停止します．
停止は,Preferences > Settings – Userから行います.

//EmmetでのTabキーの停止
"disable_tab_abbreviations": true 
//[Emmet]日本語変換確定の文字消えを防ぐ
"disable_formatted_linebreak": true

Emmetを使ってみよう

Emmetには様々なショートカットが存在します．
例えば，!(感嘆符)を入力し,Control + eを入力すると・・・

という感じに展開されます．

使い方

演算子	意味	使い方
>	子要素に追加	div>ul>li
+	兄弟要素に追加	div+div
^	子要素からの脱出	div>ul>li^div
*	連続	ul>li*5
()	グループ化	(div>p)+div
$	番号	ul>li#item$*5
{}	テキストの追加	div>ul>li{リスト}

これらのように様々な組み合わせでマークアップを爆速に行うことが出来ます．