Unityアセットストアセール中!

【htmlコーディング】Zen Cording for Coda v0.7.1の使い方

スポンサードリンク
スポンサードリンク

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]
選択したタグの上へ新規にタグを加える。

HTML
HTML

HTML5 & CSS3ステップアップブック
HTML5 & CSS3ステップアップブック

スポンサードリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
スポンサーリンク

この記事を書いた人

コメント

コメントを残す

目次