× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】Zen-coding入門 (全11回)

最新版のレッスンはこちらから » 【最新版】Emmet/Zen-coding入門 (全10回)

HTMLを効率的に記述することができるエディター用のプラグイン「Zen-coding」について解説していきます。

このレッスンでは ZenCording.vim 0.59 / vim 7.2 を使用しています。

#01 Zen-codingとは何か?
2012年3月25日
このレッスンを受講するには以下のレッスンの予習が必要です。

・UNIXコマンドの基礎
http://dotinstall.com/lessons/basic_unix
・vimの基礎
http://dotinstall.com/lessons/basic_vim
2012年3月25日
Zen-codingの公式サイトはこちらになります。
http://code.google.com/p/zen-coding/
#02 プラグインを導入しよう
2012年3月25日
なお、プラグインページにあるチュートリアルも参考にしてみてください。
https://raw.github.com/mattn/zencoding-vim/master/TUTORIAL
2012年3月25日
vim用のZen-codingプラグインはこちらからダウンロードしてください。
http://www.vim.org/scripts/script.php?script_id=2981
#03 Zen-codingの基本を理解しよう
2012年3月25日
なお、現在展開するときに字下げはタブが使われていますが、これをスペースで代用したい場合は以下のように ~/.vimrc に記述してください。
let g:user_zen_settings = {'indentation' : '  '}
2012年3月25日
他にどういった記法があるかは .vim/autoload/zencoding.vim を読み解いてみるといいでしょう。
#05 id、class、連番について
2012年4月6日
idとclassを同時につけたい場合は以下のように連続して記述します。

div#main.center

複数のclassを同時につけたい場合も同様です。

div.clera.center