1. /
  2. zen-coding

zen-coding

（コピペで使える）Coda2 zen-codingショートカット用メモ

select

[text]
Balanced Tag
Balanced Tag (Inward)
Line
Line Contents
Word
[/text]

Numbers

[text]
Decrement Number By 0.1
Decrement Number By 1
Decrement Number By 10
Evaluate Math Expression
Increment Number By 0.1
Increment Number By 1
Increment Number By 10
[/text]

Zen Coding

[text]
Encode/Decode image to data:URI
Expand Abbreviation
Merge Lines
Next Edit Point
Previous Edit Point
Reflect CSS Value
Remove Tag
Select Next Item
Select Previous Ite,
Split/Join Tag
Toggle Comment
Update Image Size
Wrap With Abbreviation
[/text]

HTML

[text]
Format: Emphasize
Format: Strong
Insert Linebreak
Wrap Selected Lines In Tag
Wrap Selection In Link
Wrap Selection In Tag
[/text]

General

[text]
Indent New Line
Trim Line(s)
[/text]

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting

Coda2にzen-codingを入れて、カスタマイズ | 乱雑モックアップ

Coda2のzen-codingで地味に困る事。

[html]2011
2012[/html]

をWrap with Abbreviationすると
こうなってほしいのに

[html]</pre>
<ul>
　<li>2011年</li>
　<li>2012年</li>
</ul>
<pre>
[/html]

coda2のzen-codingだとこうなる
[html]</pre>
<ul>
　<li>年</li>
　<li>2012年</li>
</ul>
<pre>
[/html]

どこをいじれば修正できるのだろう…

Coda2にzen-codingを入れて、カスタマイズ

Coda2のzen-codingで地味に困る事。を追加。
解決方法をご存知でしたらぜひ教えて下さいませ。
追記ここまで。

日本語化されるまで触らないでおこうと思いつつ
ちょっとしたコーディングをする際にちょこちょこ起動してるCoda2

zen-codingを入れてhtml:5とやるとlang=”en”になっていたり<!DOCTYPE HTML>と少し気持ち悪かったのでカスタマイズする事に。

zen-codingを拾ってくる

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
Zen Coding for Coda v0.7.1 をダウンロードした

/Users/[ユーザー名]/Library/Application Support/Coda 2/Plug-ins/TEA for Coda.codaplugin
右クリックして「パッケージの内容を表示」

Support/Library/zencoding/zen_settings.py
をバックアップしてから
CotEditorで開いた

でもってenをjaに変更

[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,[/text]
[image]気持ち悪い場所

ついでに

私、気になりますっ！

なんでHTMLが大文字でlangはlocaleなんでしょう？
[image]書き換えます

!DOCTYPE HTMLを
!DOCTYPE htmlにしました。
[image]小文字とjaにしました

ちなみに、W3C（HTML5）の記述はこんな感じだった
[html]<!DOCTYPE html>
<html lang="en-US-x-Hixie">
[/html]
lang属性はなんて書くのがいいんだろう？

おまけでjQueryやviewportの記述も追加しておく
[image]色々追加
コンディショナルコメントのところの[]は\でエスケープ。

この段階のhtml:5をzen-codingすると

[html]<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!–[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

</body>
</html>[/html]
こうなる。

テンプレ部分の参考サイト

HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis

ちゃんと勉強してテンプレを作りたいなー。

メモ / Notepad++でzencoding

Notepad++のインストール先を変更してない場合
C:\Program Files\Notepad++\pluginsフォルダの中に
Notepad++用のzencoding

  • NppScriptingフォルダ
  • NppScripting.dll

をぶち込む。

こっちはCtrl + Eで変換。

カスタマイズは以下のjsから
C:\Program Files\Notepad++\plugins\NppScripting\includes\Zen Coding.js

lang属性がenになっているので
[text]’lang’: ‘en’,
‘locale’: ‘en-US’,
[/text]

書き換えたりしとく。
[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,
[/text]

[追記 / 20100412] zencodingのスペル間違えてたので修正。

zen-codingとDreamweaverメモ

[追記あり / 201006] Zen Codingに慣れてきたのでちょこちょこ更新した。

各zen-codingダウンロード先

Downloads – zen-coding – Project Hosting on Google Code

Dreamweaver用

Dreamweaver用の各バージョンはこっち。

WordPress用プラグイン

WordPressの管理画面にZen Codingを導入するプラグイン「WP Zen-Coding」 – Rewish

使い方(DW)

キーワードを入力してctrl + , (カンマ)
DWのzen-codingで変換 / ctrl + , (カンマ)

[ctrl + , (カンマ)]が使いづらいなら、キーボードショートカットから変更や追加も可能。
[ctrl + , (カンマ)]が使いづらいなら、キーボードショートカットから変更も可能
[キーボードショートカット(Y)] – [コマンド(C)] – [Zen Coding] – [Expand Abbreviation]

変換例

[html gutter=”false”]
div#wrap
↓
/* ctrl+, */
↓
<div id="wrap"></div>
[/html]

idやclassの前に何も指定しないと勝手にdivで補完してくれる。素敵。
[html gutter=”false”]#wrap
↓
/* ctrl+, */
↓
<div id="wrap"></div>[/html]

[html gutter=”false”]
div#wrap>div#primary+div#secondary+div#footer
↓
/* ctrl+, */
↓
<div id="wrap">
<div id="primary"></div>
<div id="secondary"></div>
<div id="footer"></div>
</div>
[/html]

$で連番をつけられる。
[html gutter=”false”]
ul>li#navi$*3
↓
/* ctrl+, */
↓
<ul>
<li id="navi1"></li>
<li id="navi2"></li>
<li id="navi3"></li>
</ul>
[/html]

詳しい説明
Selectors and aliases for Zen HTML plugins

こうゆうのは一括で指定できないのかな？
[html]
<div id="wrap">
<div id="primary"></div>
<div id="secondary"></div>
</div>
<div id="footer"></div>
[/html]

出来た。()カッコでグルーピングできるらしい。
[text gutter=”false”](div#wrap>div#primary+div#secondary)+div#footer[/text]
マークアップ効率化 – zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)

[追記 / 2012-09-19] Emmetなら^で出来るらしい
Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17

Zen-Codingで、やりたかったけどできなかった『上の階層に戻る』機能。
今までは、”()”を駆使する形になっていましたが、”^”で階層を1段上がることができるようになりました。


(.header>.nav)+.logo
.header>.nav^.logo

Dreamweaverにはまだ対応してないみたい。

続きを読む