今更ながらのZen-Coding

もう半年前くらいに盛り上がってたような気がする「Zen-Coding」。
すんごい今更入れてみました。
macなら「Coda」ってエディタで使えるよ〜と至るとこに書いてあって、そのエディタも非常に気になってはいたのですが、なにぶん有料ですし。。
次の職場はwindows環境だったりするとさらに意味がなさげなので、とりあえずDreamweaverに入れました。

Dreamweaver用にダウンロード

ダウンロードしたものをダブルクリックでインストールして完了。
とりあえずいろんなところを参考に試すと…

※展開は「control + , 」
html:5→展開

titleタグの下にcssとjsのリンク追加。
link:css→展開
script:src→展開

bodyタグ内にheaderとcontentsとfooterなどの大枠divを追加。
#platform>(#header.clearfix>ul#gnav>li*5>a)+(#contents.clearfix>(#snavarea)+(#main))+
(#footer.clearfix>ul#fNav>li*5>a)→展開

さらにmainのdiv内にtableを追加。
table.solid>(th.w50+td.w80*4)+(th+td*4)+(th+td*4)→展開
table.solid>(th.w100*4)+(td*4)+(td*4)+(td*4)→展開

結果…

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all">
    <script type="text/javascript" src=""></script>
</head>
<body>

    <div id="platform">
      <div id="header" class="clearfix">
        <ul id="gnav">
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </div>
      <div id="contents" class="clearfix">
        <div id="snavarea"></div>
        <div id="main">

        <table class="solid">
          <th class="w50"></th>
          <td class="w80"></td>
          <td class="w80"></td>
          <td class="w80"></td>
          <td class="w80"></td>
          <th></th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <th></th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </table>

        <table class="solid">
          <th class="w100"></th>
          <th class="w100"></th>
          <th class="w100"></th>
          <th class="w100"></th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </table>

        </div>
      </div>
      <div id="footer" class="clearfix">
        <ul id="fNav">
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </div>
    </div>

</body>
</html>

という感じになりました。
便利ですねぇ…こりゃあ使いこなしたら早いですわ。