htmlコーディングが速くなるツールZen Cording。
マイナーアップデートもされているようで、Reflect CSS Valueなどが増えています。
知っている人も知らなかった人も改めて使い方を覚えてhtmlコーディングを速くしましょう。
インストール編はコチラ。
Coda2にZen Cordingをインストールする | WEB HORIC.
インストール環境
Mac OS 10.8.3 Mountain Lion
Coda 2.0.7
Zen Cording for Coda v0.7.1
Encode/Decode image to data:URI
初期ショートカットキー：[Control+Shift+L]
Encode/Decode image to data:URIは
<a href="http://"></a>のコードを生成するためのショートカット。
文字を選択した状態でEncode/Decode image to data:URIのショートカットキーを打つと
aタグに囲まれた状態で生成される。
Expand Abbreviation
初期ショートカットキー：[Control+E]
Expand AbbreviationはHTMLタグを展開するためのZen Cordingで最も利用されるショートカットキー。
pを入力したあとにExpand Abbreviationのショートカットキーを打つと
<p></p>として展開される。
Expand Abbreviation 書き方
書き方のルール。
リストやテーブルなど同じ要素をいくつも打ち込まなければ行けない場合には
繰り返しの記述をすると便利
liタグを4つ書くだけでも面倒だが、Expand Abbreviationを利用するとこの記述を4文字で完了できる。
同じタグを繰り返す場合には「*N」（Nには数値が入る）と記述する。
複数のタグを繰り返す場合には「()」で囲む。
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>Expand Abbreviation利用時：
li*5- タグの入れ子を生成する場合には「>」
- 別のタグを並べるには「+」
を利用する。
よくあるth,tdを利用したテーブルタグは以下のように記述。
table>tr*3>th+(td*5)展開後は
<table>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>Merge Lines
初期ショートカットキー：[Control+M]
選択しているタブ区切りの複数行を一行にまとめる。
Next Edit Point
初期ショートカットキー：[Control+Alt+ →]
次の閉じタグ前へ移動する。
Previous Edit Point
初期ショートカットキー：[Control+Alt+ ←]
前の閉じタグ前へ移動する。
Reflect CSS Value
初期ショートカットキー：[Control+R]
ベンダープレフィックスが必要なCSSへ同じ値を書き込むのが面倒なときに便利。
コピーしたい値の前にカーソルを移動してショートカットキーを打つ。
下のような場合でtest-box-shadowの値をbox-shadowの値に統一したい場合には
box-shadowの値前にカーソルを置いてショートカットキーを打つ。
.test-box-shadow {
-webkit-box-shadow: hoge;
-moz-box-shadow: hoge;
box-shadow: 0px 0px 0px 44px black ;
}
.test-box-shadow2 {
-webkit-box-shadow: hoge;
-moz-box-shadow: hoge;
box-shadow: 0px 0px 0px 14px black ;
}展開後：
.test-box-shadow {
-webkit-box-shadow: 0px 0px 0px 44px black;
-moz-box-shadow: 0px 0px 0px 44px black;
box-shadow: 0px 0px 0px 44px black ;
}
.test-box-shadow2 {
-webkit-box-shadow: hoge;
-moz-box-shadow: hoge;
box-shadow: 0px 0px 0px 14px black ;
}同じ値を入れる為には何かしらの値を入れておく必要がある。
空のままではコピーされない。
コピーされない例：
.test-box-shadow {
-webkit-box-shadow:;
-moz-box-shadow: ;
box-shadow: 0px 0px 0px 44px black ;
}Remove Tag
初期ショートカットキー：[なし]
選択したタグを消す。
Select Next Item
初期ショートカットキー：[なし]
次のhtmlタグを選択された状態にする。
Select Previous Item
初期ショートカットキー：[なし]
前のhtmlタグを選択された状態にする。
Split/Join Tag
初期ショートカットキー：[Shift+Command+J]
htmlタグの分割。
すでに書かれている内容があるタグに使用してしまうと、書いた内容が消えてしまうので注意。
Toggle Comment
初期ショートカットキー：[Command+/]
選択範囲をhtmlコメントする。
コメント範囲に使用するとコメント解除される。
Update Image Size
初期ショートカットキー：[Shift+Command+l]
ローカルにある画像サイズを取得してwidth,heightを補完する。
ファイルパスが合っていることが前提になる。
Wrap With Abbreviation
初期ショートカットキー：[Control+Shift+A]
選択したタグの上へ新規にタグを加える。
コメント