CSS Nite in SENDAI, Vol.5

1. Zen-Codingはみんなのもの
こもりまさあき

2. 1972年生まれのフリーランス
大学時代から都内にある某DTPの会社で5年ほど入出力から
デザイン、ネットワーク管理業務などに従事。
現在は、Webをはじめとしたネットワーク関連業務のほか、
テクニカルライティングや講師などの活動が中心。
時と場合によって職種が変わるため、肩書きはなし。
近著に「HTML+CSSコーディングベストプラクティス」他。
こもりまさあき
簡単に自己紹介を
http://eee.am/cipher

3. これからお話しすること
• Zen-Codingって何？
• Zen-Codingの導入と覚えておきたいこと
• Zen-Codingに関する大きな勘違い
• 環境にあわせたZen-Codingの使い方
• CSSもZen-Codingで入力して効率 UP
• まとめ

4. Zen-Codingって？

5. • ひとことで言ってしまえば「マクロ」
• あらかじめ用意された省略形や書式を使い、
コードの入力補完をすることができる
テキストエディタ用プラグイン
• Dreamweaver でも使える！*
Zen-Codingとは
*: 配布中の最新版は、Dreamweaver CS4用となってますが、その他のバージョンでも利用可能

6. Zen-Codingの導入と覚えておきたいこと

7. • 配布サイト（https://code.google.com/p/zen-coding/) から
「Zen Coding for Dreamweaver」をダウンロード
• Extension Managerでインストール *
ダウンロードとインストール
*: DW CS3で使用する場合は「Issues」で公開されている「zen_editor.js」を入れ替える
→https://code.google.com/p/zen-coding/issues/detail?id=121
Zen Coding.mxp

8. 1. コードビューで、Zen-Codingの省略形を入力
Zen-Codingの基本となる使い方

9. 2. 入力した省略形を展開する
Zen-Codingの基本となる使い方

10. 3. 登録されているコードが自動的に挿入される
Zen-Codingの基本となる使い方

11. 省略形を入力して展開、登録されたコードが入力される

12. • いくつかの記号を使った書式を覚えれば、
複雑な文書構造もまるで数式のように入力できる
例えばこんな感じで
#wrapper>(#header>h1+p)+(ul#nav>li*4>a)
+(.section>#article+#aside)+#footer>address
より高度に使いこなすためには？

13. <divid="wrapper">
<divid="header">
<h1></h1>
<p></p>
</div>
<ulid="nav">
<li><ahref=""></a></li>
<li><ahref=""></a></li>
<li><ahref=""></a></li>
<li><ahref=""></a></li>
</ul>
<divclass="section">
<divid="article"></div>
<divid="aside"></div>
</div>
<divid="footer">
<address></address>
</div>
</div>

14. まるでマジック

15. • # を使ってid属性、. でclass属性を指定
覚えておきたい記号いろいろ
h2#newsRelease.note
↓
<h2 id=”newsRelease”class=”note”></h2>
※divの場合は、要素名を省略できる

16. • [ ] は、任意の属性を指定
覚えておきたい記号いろいろ
a[title rel=”nofollow”]
↓
<a href="" title="" rel="nofollow"></a>
※属性名だけ、属性名＋値でも可。複数指定する場合は、半角スペースで区切る

17. • + は、連続する要素の指定に
覚えておきたい記号いろいろ
h1#siteId+p
↓
<h1 id=”siteId”></h1>
<p></p>

18. • > は、親子関係の要素を入力
覚えておきたい記号いろいろ
div#header>h1+p
↓
<div id=”header”>
<h1></h1>
<p></p>
</div>

19. • ( ) は、要素をグループ化する
覚えておきたい記号いろいろ
(ul>li)+div#contents
↓
<ul>
<li></li>
</ul>
<div id=”contents”></div>

20. • * は、任意の要素の繰り返しを指定
覚えておきたい記号いろいろ
ul>li*2
↓
<ul>
<li></li>
<li></li>
</ul>

21. • $ は、自動で番号をわりあてる
覚えておきたい記号いろいろ
ul>li.navItems$$*2
↓
<ul>
<li class="navItems01"></li>
<li class="navItems02"></li>
</ul>

22. 覚えるのはたったこれだけ。どうですか？

23. Zen-Codingのこと、誤解してませんか？

24. • 違います（キリッ）
• 原稿ありきでのマークアップでも大丈夫
• CSSの入力も、Zen-Codingを使えばサクサク
• 作業内容や作業スタイルにあわせて使える
HTMLをゼロから書くものじゃないの？

25. つまり、コーディングに関わるすべての人が恩恵を受けられる

26. スニペットや入力補完と組み合わせて、より効率的に

27. 環境にあわせてZen-Codingを使おう

28. • HTMLの文書構造をゼロから書き上げる場合は、
Expand Abbreviation［ Ctrl + , ］を使おう！
• 書式さえ覚えれば、文書構造は一気に書ける
文書構造をゼロからマークアップする

29. 取りかかる前に大まかな構造を頭に描くのがポイント

30. • 適用したいテキストを選択して、
Wrap with Abbreviation［ Ctrl + H ］を選択
• 表示されたダイアログに省略形を入力
原稿ありきでマークアップする

31. • 連続するリスト項目や段落のマークアップは面倒…
• DWの「クイックタグ編集」の拡張版ともいえる
たとえば、こんな原稿も一発で
home
products
…
↓
ul#nav>li.navItems*
<ul id=”nav”>
<li class=”navItems”>home</li>
<li class=”navItems”>products</li>
<li class=”navItems”>support</li>
<li class=”navItems”>contact</li>
</ul>

32. つまり、原稿ありきでもZen-Codingは使えるんです

33. CSSだって、Zen-Codingでサクサク

34. • 省略形を入力して、Expand Abbreviation！
• 基本、プロパティ名の頭文字の組み合わせ
CSSも省略形を展開して高速入力
m → margin:;
fz → font-size:;
lh → line-height:;
bgc → background-color:;
bdrs → border-radius:;

35. • プロパティによっては、: でオプションを指定可能
• よく使うものだけでも覚えれば、サクサク入力できる
いくつかの入力オプション
m:0 → margin: 0;
m:3 → margin: 0 0 0;
ff:ss → font-family: sans-serif;
fw:b → font-weight: bold;

36. 省略形が…。大丈夫、チートシートがあります

37. まとめ
• Zen-Codingは、作業スタイルにあわせて適用できる
• スニペットや補完と併用して、さらに効率化
• CSSの入力も省略形でよりスピーディになる
• 省略形や入力書式は、チートシートで確認しよう
• 普段使うものから徐々にはじめてみましょう

38. いまのやり方にプラスして幸せに