![• [ ] は、任意の属性を指定
覚えておきたい記号いろいろ
a[title rel=”nofollow”]
↓
<a href="" title="" rel="nofollow"></a>
※属性名だけ、属性名＋値でも可。複数指定する場合は、半角スペースで区切る](https://image.slidesharecdn.com/cnsvol5-komori-100921232906-phpapp01/85/Zen-Coding-16-320.jpg)
Zen-Codingはみんなのもの
- 3. これからお話しすること • Zen-Codingって何？ • Zen-Codingの導入と覚えておきたいこと • Zen-Codingに関する大きな勘違い • 環境にあわせたZen-Codingの使い方 • CSSもZen-Codingで入力して効率 UP • まとめ
- 5. • ひとことで言ってしまえば「マクロ」 • あらかじめ用意された省略形や書式を使い、 コードの入力補完をすることができる テキストエディタ用プラグイン • Dreamweaver でも使える！* Zen-Codingとは *: 配布中の最新版は、Dreamweaver CS4用となってますが、その他のバージョンでも利用可能
- 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
- 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>
- 21. • $ は、自動で番号をわりあてる 覚えておきたい記号いろいろ ul>li.navItems$$*2 ↓ <ul> <li class="navItems01"></li> <li class="navItems02"></li> </ul>
- 24. • 違います（キリッ） • 原稿ありきでのマークアップでも大丈夫 • CSSの入力も、Zen-Codingを使えばサクサク • 作業内容や作業スタイルにあわせて使える HTMLをゼロから書くものじゃないの？
- 28. • HTMLの文書構造をゼロから書き上げる場合は、 Expand Abbreviation［ Ctrl + , ］を使おう！ • 書式さえ覚えれば、文書構造は一気に書ける 文書構造をゼロからマークアップする
- 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>
- 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;
- 37. まとめ • Zen-Codingは、作業スタイルにあわせて適用できる • スニペットや補完と併用して、さらに効率化 • CSSの入力も省略形でよりスピーディになる • 省略形や入力書式は、チートシートで確認しよう • 普段使うものから徐々にはじめてみましょう
- 38. いまのやり方にプラスして幸せに