Zen CodingでらくらくHTMLコーディング

Zen Codingはロシアで誕生しました。ヴァディム•マケエフによって考案されドキュメントが作られており、プラグイン開発はセルゲイ•チクヨノックによって行われています。一般的にはGoogle CodeによってMITライセンスにより配布されていますが、中には秀丸エディターなど日本独自のエディターに関しては有志の方により開発され公開されています。

Zen Codingが初めて発案されたのは2008年で、現在の形のZen Codingが発案、実装されたのは2009年のことです。私が初めてZen Codingを知ったのは2011年初めの頃でしたが、すでにZen Codingには2013年現在未だに実装されていないHTML5やCSS3の仕様まで考えられていたので驚きです。

個人的にはタイピングにも自信があり、入力ミスも少なかったので、Dreamweaverなどのコードスにペット機能もあったら便利だとは思ってはいたものの、それがコーディングのスピードアップになるかどうかといわれれば疑問を感じていました。

なぜならば、覚えているのに選ぶという行為が発生するために時間のロスになっていたため、入力ミスが少なくタイピング速度の速い人は、すべて手で打ち込んだ方が速いのです。

しかしながらZen Codingは短縮系により、入力文字数を少なくし、ショートカットで展開することによってキーボードを打つ回数も減り、明らかにコーディング速度がアップしました。

簡単に言えば、キーボードを打つ回数とマウスを操作する時間が減ったということです。このZen Codingを使わない手はありません。ぜひHTMLコーディングに慣れてきた人はZen Codingを導入し、その効率性を体感してみてはいかがでしょうか。

内容
===========================================
Zen Codingの設定
テキストエディターにZen Codingを組み込む
notepad++にZen Codingを組み込む
秀丸エディタにZen Codingを組み込む
miにZen Codingを組み込む
CodaにZen Codingを組み込む
統合開発環境（IDE）にZen Codingを組み込む
EclipseにZen Codingを組み込む
DreamweaverにZen Codingを組み込む
WordPressにZen Codingを組み込む
webサイトにZen Codingを組み込む
ショートカットキーについて
ショートカットキーの確認方法
Zen Codingの機能
省略形の展開
省略形を1つ展開する
クラス属性をつけて展開する
ID属性をつけて展開する
特定の属性をつけて展開する
特定の属性に値をつけて展開する
要素の内容を含めて展開する
クラス属性を2つつけて展開する
親要素と子要素を同時に展開する
兄弟要素を同時に展開する
可能性の高い子要素を同時に展開する
同じ要素を複数を同時に展開する
要素の親子関係や隣接関係を複数、同時に展開する
見出し要素を連番で展開する
見出し要素を連番で展開する
属性値を連番で展開する
連番が2桁のとき1桁までの数値に0をつけて展開する
HTMLの基本構造をまとめて展開する。
タグをエスケープして展開する
タグを2重にエスケープして展開する
ID属性値のコメントを追加して展開する
CSSプロパティを展開する
CSSプロパティと値を同時にを展開する
CSSプロパティと値の間にスペースを空けて展開する
CSSの特殊構文を展開する
展開の練習
選択範囲をタグで囲む
選択範囲をタグで囲む
選択範囲をグループ化する
選択範囲をID付きのタグで分割する
選択範囲をタグで分割する
1行全体を選択する
コメントのオン・オフ切り替え
次の未入力属性にカーソルを移動
前の未入力属性にカーソルを移動
XHTML用終了タグを分割・統合
数値を繰り上げる
数値を繰り下げる
選択範囲を一段階外側の要素まで広げる
選択範囲を一段階内側の要素まで狭める
改行の除去
選択範囲の親要素を除去
選択範囲の親要素を変更
img要素で指定した画像のサイズを更新
共通するプレフィックスのCSS値を反映する
数値を四則演算する
開始タグと終了タグの前にカーソルを移動
Zen Codingのロケールを変更する
notepad++の場合
秀丸エディターの場合
Codaの場合
Eclipseの場合
DreamWeaverの場合
WordPressの場合
Webサイトの場合
HTMLタグの展開リファレンス
ルート要素
メタ要素
スクリプト要素
セクション要素
グループ化要素
意味付け要素
埋め込み要素
テーブル要素
フォーム要素
インタラクティブ要素
コンディショナルコメント
要素#ID
要素.クラス
要素.クラス.クラス
要素#ID.クラス.クラス
要素>要素
要素+要素
要素*繰り返し回数
連番指定
要素+
CSSプロパティの展開リファレンス
特殊構文
ポジション系プロパティ
ボックス系プロパティ
幅、高さ、余白系プロパティ
ボーダー、外枠系プロパティ
テーブル、リスト、特殊コンテンツ系プロパティ
テキスト、フォント系プロパティ
視覚効果系プロパティ
印刷系プロパティ