Dreamweaverの拡張機能で使える「Zen Coding」が便利で良いです。

いろいろなところで紹介されている「Zen Coding」
Dreamweaverの拡張機能としてインストールできるので、使用してみました。
短い記述だけでHTML・CSSコードを生成、展開してくれます。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

ダウンロードしたZen Coding v.0.7.5.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストールします。
インストールが完了したら早速使ってみましょう。

使い方は簡単、Ctrl+,(コントロール+カンマ)を押すと変換・展開されます。
※注意点は変換前の文末にカーソルをあてること、スペースなどを途中にいれないこと。

例1

変換前

div#content

変換後

<div id="content"></div>

例2

変換前

div#page>div.logo+ul#navigation>li*5>a

変換後

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <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>

展開される時のlangやlocaleを日本に設定する

C:\Documents and Settings\【ユーザ名】\Application Data\Adobe\Dreamweaver 【バージョン】\ja_JP\Configuration\Commands\ZenCoding

にあるzen_settings.jsを自分の環境に合わせます。

var zen_settings = {
    /** 
     * Variables that can be placed inside snippets or abbreviations as ${variable}
     * ${child} variable is reserved, don't use it 
     */
    'variables': {
        'lang': 'ja',
        'locale': 'ja-JP',
        'charset': 'UTF-8',
        'profile': 'xhtml',

        /** Inner element indentation */
        'indentation': '\t'  // TODO take from Aptana settings
    },

もう少し例を紹介しておきます。

HTML5の雛形を生成

変換前

html:5

変換後

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

XHTMLのDOCTYPE宣言strictを生成

変換前

html:xs

変換後

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>
    
</body>
</html>

コメントつきでタグを展開

変換前

div#wrapper>div#container>div#contents+div#footer|c

変換後

<!-- #wrapper -->
<div id="wrapper">
    <!-- #container -->
    <div id="container">
        <!-- #contents -->
        <div id="contents"></div>
        <!-- /#contents -->
        <!-- #footer -->
        <div id="footer"></div>
        <!-- /#footer -->
    </div>
    <!-- /#container -->
</div>
<!-- /#wrapper -->

その他にもいろいろな活用法があります。以下のサイトが参考になります。
TechBlog 「マークアップ効率化 – zen-codingでコーディングを倍速に」

ちなみに私が良く使っているテキストエディタ「Notepad++」でもZen Codingが使えるらしく、導入方法が紹介されてます。
Notepad++ではCtrl+Eらしいですね。
乱雑モックアップ 「メモ / Notepad++でzencoding」

  

共有やブックマークなど

コメントは受け付けていません。