zen codingは超便利!Dreamweaverで使ってみました。


先日、ノンプログラマのための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

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

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


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト