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