Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキストエディターでは、ショートコードを使用して通常の HTML コードを記述できます。このツールにより、HTML の記述が大幅に簡素化されます。

たとえば、次の HTML コード:

コードをコピー

コードは次のとおりです。

<!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">
<ヘッド>
<タイトル></タイトル>
<meta http-equiv="コンテンツタイプ" content="text/html;charset=UTF-8" />
</head>
<本文>
<div id="ヘッダー">
<div id="ロゴ"></div>
<ul id="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
</本文>
</html>

Zen Coding では、たった 1 行です。

コードをコピー

コードは次のとおりです。

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

こちらはオンラインデモです (ショートカットキーが機能しない場合は、ショートカットキーの競合がないか確認してください。たとえば、Sogou 入力方式では「Ctrl+,」が使用されます)

Zen Coding の省略ルールは、CSS セレクターと多少似ています。

id と class: たとえば、div#main.list.item は <div id="main" class="list item"></div> を意味します。
その他の属性は、div[title]、a[title="Hello world" rel]、td[colspan=2] などです。
繰り返し要素: li*3 は 3 つの <li></li> を出力します。
繰り返し要素の数値シーケンス: li.list-$$*2 は <li class="list-01"></li><li class="list-02"></li> に展開されます。複数の $ を組み合わせると、先頭の $ は 0 として使用され、数字が埋められます。
括弧を使用してグループ化できます: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
フィルターサポート、異なるパラメータを使用すると、まったく異なる結果が得られます

その他の主な特徴

HTML以外のデフォルト /XML/XSL/ CSS HAML の略語に加えて、Zen Coding はコードの作成を容易にする他の機能もいくつか提供します。。

短縮パッケージ (略語で囲みます)。

カーソルの位置またはテキストの選択に応じて、コードの省略形を入力して、目的の最終コードを取得します。

コードをコピー

コードは次のとおりです。

あなたは部屋に入って
鉛筆を手に
誰かが裸でいるのを見たら
そしてあなたは言う、「あの男は誰ですか？」
君は一生懸命頑張ってるね
でもあなたは理解していない
まさにあなたが言う通り
家に帰ったら
ここで何かが起こっているから
でもそれが何なのか分からない
そうですか、ジョーンズさん？

上記のテキストは「ul>li*>span」で囲まれ、次のコードになります。

コードをコピー

コードは次のとおりです。

<ul>
<li><span>部屋に入って行きます</span></li>
<li><span>鉛筆を手に</span></li>
<li><span>誰かが裸になっているのを見た</span></li>
<li><span>そしてあなたは言う、「あの男は誰ですか？」</span></li>
<li><span>あなたは本当に一生懸命です</span></li>
<li><span>でもあなたは理解していない</span></li>
<li><span>まさにその通り</span></li>
<li><span>家に帰ったら</span></li>
<li><span>ここで何かが起こっているからです</span></li>
<li><span>でも、それが何なのかは分からない</span></li>
<li><span>そう思いますか、ジョーンズさん?</span></li>
</ul>

タグマッチング（バランスタグ）

ZC（Zen Coding）は、要素内のすべてのコンテンツを素早く選択する方法を提供します。

編集ポイント (ポイント編集)

ZC によって拡張されたコードにはコンテンツがありません。この機能を使用すると、コンテンツの編集ポイントをすばやく見つけることができます。

編集ポイント

やっと

Eclipse/Aptana、Notepad++、TextMage、Dreamweaver、UltraEdit、Visual Studio などの一般的な IDE には、すでに公式またはサードパーティのプラグインサポートが備わっています。実は、Zen CodingのコアコードにはJavascriptとPythonの2つの言語バージョンがあるため、対応するJSファイルを導入すれば、ブラウザのテキスト編集領域でZen Codingを利用できるようになります。

<<: ダイナミックな波効果を実現するSVG+CSS3

>>: JD.com フラッシュセール効果を実現する JavaScript