Zen-Codingでコーディングが変わった part1

制作部、稲葉です。
htmlコーディングには現在Dreamweaverを使用していますが、拡張機能のZen-Codingが素晴らしいと評判だったので調査。
コーディング速度が上がるとのことなので導入してみました。

どんな拡張機能？

追加される機能はたくさんありますが、基本的には下記の通りです。

• コードを簡略化して書き、展開する。
• 特殊な動きをショートカットキーで実行する。

コードを簡略化して書き、展開する

例えるなら、「fb」と入力して展開すると「Facebook」になるって感じです。
具体的なコードを紹介するとしたら・・・

を入力するのに

これだけでいいということです。
慣れてくるとコーディング速度が早くなったのを実感できると思いますが、
慣れないうちは、「あれ？これ普通に入力したほうが早くね？」となることも多いです。
間違えてはいけないのは、この機能が使いにくい、速さを実感できないからといって、
「Zen-Coding」を「使えない機能」としてはいけないということです。
他にも機能はありますのでそちらも確認した上で使える使えないを判断しましょう。

もちろんCSSも簡略化して書けます。
w→width
h→height
mb→margin-bottom
ta→text-align
fw→font-weight
などなど。
width,heightは正直微妙ですが、○-○の形のものは入力数がグッと減るのでオススメです。
一部のプロパティは値まで記述が可能で、
ta:c→text-align: center;
fw:b→text-align: bold;
のように書けます。

カスタマイズも出来るので、僕は
m:0a→margin: 0 auto;
を追加しています。よく使いますからね。

まとめ

今回は「コードを簡略化して書き、展開する」について書きました。
CSSはともかくhtmlの簡略化入力はマークアップがしっかり出来ていないと難しいので慣れが必要かなと思います。

逆に言えばマークアップの技術向上にもつながりますし、
コーディングの作業時間短縮によって生まれた時間を、確認作業や企画・提案のための時間に回すことができますので
結果的によりスムーズな作業のご報告が出来、より深い企画提案が出来る、ということにつながっていきます。

次回は「特殊な動きをショートカットキーで実行する。」について書きます。
稲葉でした。