読者です 読者をやめる 読者になる 読者になる

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

HTML CSS Vim

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

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

使用方法

スニペットコマンドを入力したあとに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>

life changingなpluginですね。
html手打ちと言えば自分も長くやっていましたがとても時間がかかるものですがこれで楽しくなりますね。
html5も折角対応しているのでhtml5を勉強するときはぜひ使いましょう!