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

■プログラミングを学ぶのに最適です。無料体験あり!!現役エンジニアのパーソナルメンターがつき、躓いているときはチャットでの質問ができてすぐに回答が帰ってくる頼もしいサービスです。自分も12週間がっつり勉強してアプリを出せました。
未経験から仕事に繋がるエンジニア・デザイナーになりたいなら

スポンサードリンク

Pocket
LINEで送る

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ステップアップブック

Pocket
LINEで送る


スポンサードリンク

このサイトが役に立ったらシェアにご協力ください

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です