Zen-Coding

前回の記事でzen-cordingのことを書きましたが、実は恐ろしいほど簡単にコーディングができる方法があるんです!

それがZen-Codingです!!

現在はEmmetとしてバージョンアップして開発されているようです。かなり使いやすくなっています!!


スポンサーリンク

html:5とかけば

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
 
</body>
</html>

と展開してくれる。

div#containerとかけば

1
<div id="container"></div>

と表示してくれますし、

div#container>ul.list>li*3>a>imgと記述して展開すれば

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div id="container">
 
     <ul class="list">
 
      <li><a href=""><img src="" alt=""></a></li>
 
      <li><a href=""><img src="" alt=""></a></li>
 
      <li><a href=""><img src="" alt=""></a></li>
 
     </ul>
 
    </div>

としてくれる。なんともありがたいことで

table > thead > tr > th.title + th.author << tbody > tr*3 > td{タイトル} + td{著者}ここまで書いて展開!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<table>
    <thead>
        <tr>
            <th class="title"></th>
<th class="author"></th>
</tr>
</thead>
<tbody>
<tr>
<td>タイトル</td>
<td>著者</td>
</tr>
<tr>
<td>タイトル</td>
<td>著者</td>
</tr>
<tr>
<td>タイトル</td>
<td>著者</td>
</tr>
</tbody>
</table>

さらに
select[name=sample][id=test]>option[value=$$$]{$$$}*10
とかけば

1
2
3
4
5
6
7
8
9
10
11
12
<select name="sample" id="test">
	<option value="001">001</option>
	<option value="002">002</option>
	<option value="003">003</option>
	<option value="004">004</option>
	<option value="005">005</option>
	<option value="006">006</option>
	<option value="007">007</option>
	<option value="008">008</option>
	<option value="009">009</option>
	<option value="010">010</option>
</select>

連番までつけてくれます!!
さらにこんなことまで。。

1
2
3
4
5
6
リスト
リスト
リスト
リスト
リスト
リスト

このテキストを選択した状態でctrl+hで
囲む要素を指定すると(例えばli*とします)

1
2
3
4
5
6
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>

としてくれます~!
これはすごいじゃないか~といことで早速ドリームウィーバーにも入れました。使い方は簡単!
先ほどのコードを記述してCtrl+,(カンマ)をすればよい。そうすると展開しました。私の環境ではうまくできなかったので、コードの展開をCtrl+:(コロン)で表示するように設定しました。メニューの編集-キーボードショートカット-コマンド-zen-codingのExpand Abbreaviationを選択して変えてやればよいです。

詳しくはココをご覧あれ!知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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