Webサイトのコーディングを簡略化 - ZEN-Coding -

【こちらの記事は、約5分程でお読みいただけます。】

皆さん、こんにちは！

ウェブサイトを作成するときに必ずしなければいけない「コーディング」。
コーディングが苦手、面倒くさい、時間がかかる・・なんて声を良く聞きます。

今日は、その面倒なコーディングを簡略化する
『ZEN-Coding』をご紹介します！

元々は、結構前からあるものなのですが、一昨年～去年辺りに話題になった手法です。
どういった手法かというと・・・

例えば、

<div></div>

とマークアップしたい場合。

通常なら普通に記述していくしかないのですが、ZEN-codingなら「div」と書くだけ！

では、IDがついている場合は？

「#wrapper」と書くだけで、

<div id="wrapper"></div>

と変換してくれるのです。

さらに複数のID/classがついている場合でも、
「#wrapper.test」と書くと、

<div id="wrapper" class="test"></div>

と簡単に変換してくれます。

さらに便利なのは、構造化したものも短く記述しただけで書くことができる、という点です。

「#header+#main_visual」と書くと

<div id="header"></div>
<div id="main_visual"></div>

と変換されます。

入れ子にしたいときは「#wrapper>#header」です。

<div id="wrapper">
	<div id="header"></div>
</div>

 

また、テーブル構造を記述するときは「table+」と書くだけで、

<table>
	<tr>
		<td></td>
	</tr>
</table>

と展開してくれます。

まだまだあります！もっと便利なのは・・・
組み合わせるだけで、長いマークアップ作業も一行で出来てしまう点です！

#wrapper>(#header>h1+p)+(#mainvisual>h2)+(#main>h3+ul+)+(#sub>h3+ul+)+(#footer>address)

これを展開すると・・・！

<div id="wrapper">
	<div id="header">
		<h1></h1>
		<p></p>
	</div>
   
	<div id="mainvisual">
		<h2></h2>
	</div>
    
	<div id="main">
		<h3></h3>
		<ul>
			<li></li>
		</ul>
	</div>
    
	<div id="sub">
		<h3></h3>
		<ul>
			<li></li>
		</ul>
	</div>
    
	<div id="footer">
		<address></address>
	</div>
</div>

と、一気にコーディングできてしまいます！

でも・・・ずっとDreamweaverでコーディングしてきたし、
今更エディタでやるのも・・・と、
躊躇（ちゅうちょ）してしまう方もいらっしゃると思います。

大丈夫です、実はCS3以降ならDreamweaverに
『ZEN-Coding』を組み込む事も出来ます！！

http://code.google.com/p/zen-coding/downloads/list

こちらからダウンロードしてください。

解凍して、「Zen Coding v.0.7.2.mxp」をダブルクリックするだけで
拡張機能として読み込まれます。

Dreamweaver用ダウンロード

複雑で面倒くさいコーディングを少しでもラクにして、作業効率化を図りましょう！

KEN SCHOOLの講座、クオリアなら・・・WEBにおける様々なスキルを「クオリティアップ！」
『ZEN-Cording』の様な話も聞けちゃいますよ！＾＾

--------------------------------------------------------------------------------

Web制作現場のテクニック全てを、ここに集約！
KENスクール自慢の就職対応プロフェッショナル講座！

⇒【「極」 Professional クオリア講座】
Webサイトを一段階上のクオリティへ進化させる 「極」 Professional クオリア。
デザイン、ユーザビリティにこだわり、より高い質のWebサイトを制作していきます！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場