Your SlideShare is downloading. ×
0
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Zen-Codingはみんなのもの
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Zen-Codingはみんなのもの

5,920

Published on

CSS Nite in SENDAI, Vol.5

CSS Nite in SENDAI, Vol.5

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

No Downloads
Views
Total Views
5,920
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
33
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. いまのやり方にプラスして幸せに

×