zen-codingでhtml,cssのコーディングスピードが3倍以上になる

zen-codingはHTML and CSS hi-speed codingと謳っているように飛躍的にhtml,cssのコーディングスピードを上げてくれます。

zen-coding - Project Hosting on Google Code

公式でVimには対応していなかったのだけどvimscriptでmattnさんが作っていました。神

zen-coding for vim を pure vimscript だけで書いてみた。

使用方法

スニペットコマンドを入力したあとにexpandabbr_keyをタイプします。
※デフォルトだと,

スニペットコマンド一覧

よく使いそうなスニペットコマンド(html)

実際にどんな風になるのかというのも交えて表示してみる
html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    
</body>
</html>

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    
</body>
</html>

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
    
</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
    
</body>
</html>

html:5

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    
</body>
</html>

link:css

<link media="all" rel="stylesheet" href="style.css" type="text/css" />

文字を囲む場合

h1{文字}

<h1>文字</h1>

属性を指定する場合

a［href=http://www.hatena.ne.jp］ {hatena}
※大括弧を全角で書いています

<a href="http://www.hatena.ne.jp">hatena</a>

親子関係

#header > h1

<div id="header">
    <h1></h1>
</div>

繰り返し

ul > li*5

<ul> 
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

カウントアップ

ul > li.class$*5

<ul> 
    <li class="class1"></li>
    <li class="class2"></li>
    <li class="class3"></li>
    <li class="class4"></li>
    <li class="class5"></li>
</ul>