nigoblog

技術系会社のCEOブログ~私的編~

便利すぎるzen-coding

なぜ今まで使わなかったのだろうというエディタのプラグイン

それが「zen-coding

ざっくり説明すると、
めちゃくちゃ楽にHTMLがかける!

その全容について今回説明していきます。

  1. zen-codingのインストール
  2. zen-codingを設定
  3. 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ならね!