きっと多くの人と同じように、私も Web ページを書くときは、DW（Dreamweaver）でデザイン画面をドラッグして組み立てるより、Notepad を開いて HTML を直接書くほうが好きです～ この方法の良いところは、自分の腕を磨けることです（XD）。ただ、欠点は開発のスピードがやや遅いことです（とはいえ、この書き方に慣れると DW より速くなるんですけどね…XD）。今日は Zen Coding を紹介します。これを使うと、Web ページを書く速度が何倍にも上がります！ CSS の記述のような書き方で、そのまま Web ページを書けるんですよ～

なぜ Zen Coding で HTML を書くのが速くなるのか？ 下の動画を見ていただければ、そのすごさがおわかりいただけると思います！

Zen Coding の基本情報

P.S. お使いのエディターに対応したプラグインは、ご自身で検索してください

使い方

ここでは Notepad++ を例に説明します。ほかのエディターではショートカットキーが Notepad++ と同じとは限らないので、公式サイトの Wiki（http://code.google.com/p/zen-coding/w/list）で調べるか、インストール後に表示される情報をご覧ください。

  1. まず Notepad++ 用の Zen Coding をダウンロードして、インストールします

  1. Notepad++ を開いたら、クイックガイドに沿って始められます～ また、Notepad++ での展開ショートカットは「Ctrl+E」です。このキーを押すと、略記（短縮コード）が HTML に展開されます。よく使う例をいくつか紹介します：
  • div タグを生成し、id=a を指定する：#a
  • li タグを 10 個生成する：li*10
  • li タグを 10 個生成し、class に連番を指定する：li.$*10
P.S. ここでの「$」は連番を意味し、「.」は CSS でのクラスを意味します。
  • ul を生成したあと、その中に li タグを 5 個生成する：ul>li*5
P.S. ここでの「>」は、ul を生成したあと、その ul の中に li*5 を生成することを表します。

以上がよく使う例です。クイックガイドにはほかにも多くの例が載っていて、HTML だけでなく CSS も生成できます～ まず style タグを作成し、その中にキーワードを入力すると、CSS をすばやく生成できます～

  • 「float:;」をすばやく生成する：fl
  • 「float:left;」をすばやく生成する：fl:l
  • 「display:none;」をすばやく生成する：d:n
  • 「margin:auto;」をすばやく生成する：m:a
下の動画もご覧ください：