DW CS5にZen-coding

Pocket

Zen-codingをDreamWeaver CS5に入れてみました。なぜかショートカットが動かない・・・?

という事で仕方なく、ドリームウィーバーの編集⇒キーボードショートカットから、zen-codingのショートカットを変えました。

デフォルトの場合windowsは[Ctrl+,]で展開なのですが、なぜかできなかったので変更した事で解決しておきますw

自分の場合は、[Ctrl+Shift+Enter]にしておきました。

しかし、DreamWeaverに[Ctrl+,]ってショートカットあったっけ?と思いながら、再度初期のショートカットに戻してみてもやっぱりダメだったので諦めましたw

これって、自分だけ?良く分からないのですが、何か別な解決法があるなら情報提供お願いします!

Zen-Cordingの各種ダウンロードは以下からできます↓
【Downloads – zen-coding -】

前置きはさておき、Zen-Codingで出来る事を今回はまとめてみたいと思います。

プラグイン

DreamWeaverだけじゃなく、Zen-codingは通常のエディターでも使えるんですよね。

ちなみにDWはCS3以降対応が可能です。CS3にv0.6をインストールするには、そのままでは出来ないらしいです。

こちらの記事が参考になります↓
【Dreamweaver CS3でZen Coding v0.6を使用する方法】

プラグインとして使えるエディターは以下の様な物があります。

  • 秀丸
  • Vim
  • WordPress
  • MovableType
  • EmEditor
  • Emacs
  • TextMate
  • Eclipse
  • Aptana Studio

そして、まだ使い始めたばかりなので、色々コマンドを覚えなければいけないので、ここにメモっときます!

使えるコマンド一覧(HTML)

まずは、DOCTYPEです。

html:4t HTML 4.01 Transitional
html:xt XHTML 1.0 Transitional
html:xs XHTML 1.0 Strict
html:5 <!DOCTYPE HTML>

次は、meta系です。

link:css <link rel=”stylesheet” type=”text/css” href=”style.css” media=”all”>
link:rss <link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”rss.xml”>
meta:utf <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>

普段から使う事の多い各セクションです。

h1~h6 div body p br
a ol+ ul+ dl+ img
table+ tr+ th td strong, str

+系のコマンドは、インラインのタグまで吐いてくれます。

例えば、

div#wrapper>ul.sec1>li*3>a:link

を、Zen-Codingで展開すると

<div id="wrapper">
  <ul class="sec1">
    <li><a href="http://"></a></li>
    <li><a href="http://"></a></li>
    <li><a href="http://"></a></li>
  </ul>
</div>

となります。

その他のHTMLコマンドについてはこちらから↓
【ZenHTMLElementsEn – zen-coding】

使えるコマンド一覧(CSS)

続いて、良く使う事の多いCSSコマンドです。

! !important
pos:a(s,r,fも使えます) position:absolute;(static,relative,fixed)
fl:l(r,nも使えます) float:left;(right,none)
cl:b(r,l,nも使えます) clear:both;(right,left,none)
d:b(その他多数) display:block;
ov:h(v,s,aも使えます) overflow:hidden;(visible,scroll,auto)
m:4(m:a) margin:0 0 0 0;(margin:auto)
p:4 padding:0 0 0 0;
w width
h height
bd+ border:1px solid #000;
bg+ background:#FFF url() 0 0 no-repeat;
lis:n list-style:none;
ta:l(c,r,jも使えます) text-align:left;(center,right,justify)
f font:;

組み合わせ等もたくさんあります。CSSコマンド一覧は以下で↓
【ZenCSSPropertiesEn – zen-coding -】

DW+Zencordingを使いこなせば、作業効率アップ間違い無いと思います。

優遇されるスキルの一つとなるかもしれませんね!

Pocket

Comments