便利すぎるzen-coding
なぜ今まで使わなかったのだろうというエディタのプラグイン
それが「zen-coding」
ざっくり説明すると、
めちゃくちゃ楽にHTMLがかける!
その全容について今回説明していきます。
- zen-codingのインストール
- zen-codingを設定
- HTMLを素早く書く
このような流れで書いていきます。
ちなみにエディタはcoda2でやっていきますが、他のやつでも対して変わらないでしょう。
より詳しく知りたい方はドットインストールのレッスンにあったのでそちらで! Zen-codingの基礎 (全11回) - ドットインストール
zen-codingのインストール
こちらのページからダウンロード、インストールします。
zen-coding -
Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting
Officially supported editors
というセクションに対応するエディタが書かれています。メインエディタがなければそれをダウンロードしてください。それほどの価値があります。
zen-codingを設定
設定というほど大げさじゃないんですが、インストールしたzen-codingをドラッグ&ドロップでcoda2に置きます。
これで完了
HTMLを素早く書く
これが今回のメイン
早速coda2を開き、次のように入力して下さい
html:5
入力後つぎのコマンドを打ちます
ctrl + E
すると
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
とテンプレが一気に表示されます。
これだけでも感動なのですが、
次にリストを作ります。
ul>li*5
と入力し
ctrl + E
すると、
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
と一気にHTMLがかけます。
最後にidやclassですが
ul>(li#item>a.link)*5
とすると
<ul> <li id="item"><a href="" class="link"></a></li> <li id="item"><a href="" class="link"></a></li> <li id="item"><a href="" class="link"></a></li> <li id="item"><a href="" class="link"></a></li> <li id="item"><a href="" class="link"></a></li> </ul>
とidとclassが一気に設定され、li要素の中にa要素を入れることができます。
このようにめんどくさいコーディングもすごく楽にコーディングすることができます。
zen-codingならね!