Dreamweaverでzen codingを使ってみた。

dreamweaver + zen coding

先日、@seltzerさんのUSTREAMを見てからすっかり zen coding に取り憑かれたボク。あ、もちろんPHP入門も素晴らしかったです(次回も楽しみにしています)

残念ながらMacユーザーじゃないので、Codaとか使えないわけですが、Windows環境でもDreamweaver CS4で使えるって事で入れてみました(他にも幾つか対応しているエディタはあります)

このページからZen Coding for Dreamweaver v0.5というバージョンのZen Coding.mxpを拾ってきて実行。そうするとEXTENSION MANAGER CS4が立ち上がるので、画面に従いインストールするだけで完了です。

早速幾つか入力。
DWは新規でhtmlやphpを作ると、設定されているドキュメントタイプのタグが入った状態になりますが、HTML5は設定が無い(どこかでEXTENSIONがあった気もする)ので

html:5

と入力してCtrl+カンマで展開するとさっと以下のようなタグが!!

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title></title>
	<meta charset="UTF-8">
</head>
<body>
	
</body>
</html>

さらにこんな感じで入力して展開すると

div#header>ul.menu>li.name$*3
<div id="header">
  <ul class="menu">
    <li class="name1"></li>
    <li class="name2"></li>
    <li class="name3"></li>
  </ul>
</div>

どーん!素晴らしー!

独自の書き方は覚えなければいけないものの、直感的に分かる気がするのでなんとかなりそう。ただCSSに関しては標準の入力補完で十分かなって思いますね。

wikiっていうタブの中にタグの書き方が載ってます。
HTMLセレクタはこれ

あとlang属性がen-USが標準になっているので、以下のjsファイルの設定値を修正すればOKです。このファイルの中身を眺めてみると、展開する内容の修正も出来そうなので、head内でよく使うタグなんかは追加しておいてもいいかも。

Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js

WordPressであればプラグインもこちらにあります。
WP Zen-Coding

やっぱりMacを買おうかな~

Zen Coding
http://code.google.com/p/zen-coding/

“Dreamweaverでzen codingを使ってみた。” への 2 件のフィードバック

  1. >たにぐち さん、こんにちは。

    まさかブログにコメント頂けるとは!ありがとうございます。
    PHPの話ですが、入門編をやったら需要があるかなーという話の元になったブログを購読していて、そちら繋がりで拝見したので、本当に勉強になりましたよ。続編楽しみにしています。

    Zen Codingはよく使いそうな書式から覚えていこうかと思ってます。

  2. やっぱり、Zen Codingの話ですよねー。PHPの話より、Zen Codingですよねー。しくしく。(笑

    本当に、Zen Codingは魅力的だと思います。
    ぜひ、これからも使ってみて新しい使い方などわかりましたら、ブログで紹介してくださいね!

    視聴していただきまして、ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。