VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-

この記事は 約 3 分 で読めます。

先日、ノンプログラマのためのPHP入門という素敵なUSTを見ていたのですが、その中で出てきたzen coding。

前々から知っていたものの、これ使うならエディタごと乗り換えないといけないんだ！とずっと勘違いしていて、なんだかんだでまだDreamweaver使ってるし…サイトの定義とかもしてるからなんだかんだでエディタ乗り換えるの面倒だしなぁ…とかごにょごにょ思っていたのですが…

Dreamweaverでも使えるらしいよ！知らなかった！無知って怖い！＞＜
Dreamweaver用はこちらからダウンロードできます。

ダウンロードしたZen Coding.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストール。

これだけでOK。

インストールが終わったら、早速何か入力してみましょう。

すごい！感動！

展開はcontrolキーと,(カンマ)キーを一緒に押すだけ。

他にも

div#main.text

のように打って展開すると…

<div id=”main” class=”text”></div>

こんな感じに！
これでさくさくコーディングできます♪

記述方法をちょっと覚えないといけないけど、
div#main.text　こんな感じならCSSの表記と大差ないし、
ほかは使いながら慣れていければいいなー。

とまぁ、私がさらっと書いた上の文章じゃあまり魅力が伝わらないかと思いますが、以下のサイトに良さがよーくわかる説明が書かれていましたのでぜひこちらで魅力をご確認くださいませ！

Zen-Codingでできるあんなことこんなこと

ほら、使いたくなってきたでしょう！！！！！！！

ちなみにhtml:5とかで展開したとき、doctype宣言のデフォルト設定がenになっているのですが、これをjaにするには、zen_settings.jsというファイルを書き換えてあげればOKです。

このファイルの場所は大体以下のような感じのところにあるよ！

Mac

ユーザ名/ライブラリ/Application

Suppor/Adobe/DreamweaverCS4/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js

Win

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

私は以下のように書き換えました。
環境に合わせて変えておくとラクチンかも。

ぜひ楽しいコーディングライフを！