2013年12月5日木曜日

爆速マークアップ

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

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

SublimeText2での設定

まずは,SublimeText2上でCommand + Shift + PでEnter
Emmetには,Control + eTabでのショートカットがあります,
しかし,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{リスト}
これらのように様々な組み合わせでマークアップを爆速に行うことが出来ます.

0 件のコメント:

コメントを投稿