Zen-Codingはみんなのもの

6,399 views

Published on

CSS Nite in SENDAI, Vol.5

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,399
On SlideShare
0
From Embeds
0
Number of Embeds
2,709
Actions
Shares
0
Downloads
34
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Zen-Codingはみんなのもの

  1. 1. Zen-Codingはみんなのもの こもりまさあき
  2. 2. 1972年生まれのフリーランス 大学時代から都内にある某DTPの会社で5年ほど入出力から デザイン、ネットワーク管理業務などに従事。 現在は、Webをはじめとしたネットワーク関連業務のほか、 テクニカルライティングや講師などの活動が中心。 時と場合によって職種が変わるため、肩書きはなし。 近著に「HTML+CSSコーディングベストプラクティス」他。 こもりまさあき 簡単に自己紹介を http://eee.am/cipher
  3. 3. これからお話しすること • Zen-Codingって何? • Zen-Codingの導入と覚えておきたいこと • Zen-Codingに関する大きな勘違い • 環境にあわせたZen-Codingの使い方 • CSSもZen-Codingで入力して効率 UP • まとめ
  4. 4. Zen-Codingって?
  5. 5. • ひとことで言ってしまえば「マクロ」 • あらかじめ用意された省略形や書式を使い、 コードの入力補完をすることができる テキストエディタ用プラグイン • Dreamweaver でも使える!* Zen-Codingとは *: 配布中の最新版は、Dreamweaver CS4用となってますが、その他のバージョンでも利用可能
  6. 6. Zen-Codingの導入と覚えておきたいこと
  7. 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. 8. 1. コードビューで、Zen-Codingの省略形を入力 Zen-Codingの基本となる使い方
  9. 9. 2. 入力した省略形を展開する Zen-Codingの基本となる使い方
  10. 10. 3. 登録されているコードが自動的に挿入される Zen-Codingの基本となる使い方
  11. 11. 省略形を入力して展開、登録されたコードが入力される
  12. 12. • いくつかの記号を使った書式を覚えれば、 複雑な文書構造もまるで数式のように入力できる 例えばこんな感じで #wrapper>(#header>h1+p)+(ul#nav>li*4>a) +(.section>#article+#aside)+#footer>address より高度に使いこなすためには?
  13. 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. 14. まるでマジック
  15. 15. • # を使ってid属性、. でclass属性を指定 覚えておきたい記号いろいろ h2#newsRelease.note  ↓ <h2 id=”newsRelease”class=”note”></h2> ※divの場合は、要素名を省略できる
  16. 16. • [ ] は、任意の属性を指定 覚えておきたい記号いろいろ a[title rel=”nofollow”]  ↓ <a href="" title="" rel="nofollow"></a> ※属性名だけ、属性名+値でも可。複数指定する場合は、半角スペースで区切る
  17. 17. • + は、連続する要素の指定に 覚えておきたい記号いろいろ h1#siteId+p  ↓ <h1 id=”siteId”></h1> <p></p>
  18. 18. • > は、親子関係の要素を入力 覚えておきたい記号いろいろ div#header>h1+p  ↓ <div id=”header”> <h1></h1> <p></p> </div>
  19. 19. • ( ) は、要素をグループ化する 覚えておきたい記号いろいろ (ul>li)+div#contents  ↓ <ul> <li></li> </ul> <div id=”contents”></div>
  20. 20. • * は、任意の要素の繰り返しを指定 覚えておきたい記号いろいろ ul>li*2  ↓ <ul> <li></li> <li></li> </ul>
  21. 21. • $ は、自動で番号をわりあてる 覚えておきたい記号いろいろ ul>li.navItems$$*2  ↓ <ul> <li class="navItems01"></li> <li class="navItems02"></li> </ul>
  22. 22. 覚えるのはたったこれだけ。どうですか?
  23. 23. Zen-Codingのこと、誤解してませんか?
  24. 24. • 違います(キリッ) • 原稿ありきでのマークアップでも大丈夫 • CSSの入力も、Zen-Codingを使えばサクサク • 作業内容や作業スタイルにあわせて使える HTMLをゼロから書くものじゃないの?
  25. 25. つまり、コーディングに関わるすべての人が恩恵を受けられる
  26. 26. スニペットや入力補完と組み合わせて、より効率的に
  27. 27. 環境にあわせてZen-Codingを使おう
  28. 28. • HTMLの文書構造をゼロから書き上げる場合は、 Expand Abbreviation[ Ctrl + , ]を使おう! • 書式さえ覚えれば、文書構造は一気に書ける 文書構造をゼロからマークアップする
  29. 29. 取りかかる前に大まかな構造を頭に描くのがポイント
  30. 30. • 適用したいテキストを選択して、 Wrap with Abbreviation[ Ctrl + H ]を選択 • 表示されたダイアログに省略形を入力 原稿ありきでマークアップする
  31. 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. 32. つまり、原稿ありきでもZen-Codingは使えるんです
  33. 33. CSSだって、Zen-Codingでサクサク
  34. 34. • 省略形を入力して、Expand Abbreviation! • 基本、プロパティ名の頭文字の組み合わせ CSSも省略形を展開して高速入力 m → margin:; fz → font-size:; lh → line-height:; bgc → background-color:; bdrs → border-radius:;
  35. 35. • プロパティによっては、: でオプションを指定可能 • よく使うものだけでも覚えれば、サクサク入力できる いくつかの入力オプション m:0 → margin: 0; m:3 → margin: 0 0 0; ff:ss → font-family: sans-serif; fw:b → font-weight: bold;
  36. 36. 省略形が…。大丈夫、チートシートがあります
  37. 37. まとめ • Zen-Codingは、作業スタイルにあわせて適用できる • スニペットや補完と併用して、さらに効率化 • CSSの入力も省略形でよりスピーディになる • 省略形や入力書式は、チートシートで確認しよう • 普段使うものから徐々にはじめてみましょう
  38. 38. いまのやり方にプラスして幸せに

×