作業効率が◯倍になると噂のZen-Codingを試す。

マークアップ作業効率が2〜10倍になると云われているZenCodingを、今更ながら試してみました。

ZenCodingの存在を知ってからというものの、フルスクラッチでやってた事自体恥ずかしいと感じるくらい残念な僕のマークアップ環境はAptanaかDreamweverなので、今回はDW中心に語ります。ほぼエディター機能しか使っていないですけど。

全手作業マークアップ作業のかゆいところ。

・ <ul,li>,<dl,dt,dd>,<table,tr,td>といった繰り返す要素の記述。

・コード補完があれど、要素を閉じる記述。

・コメントアウトの記述。

・width,height,display,font-sizeなどの頻出するスタイルシートの記述。

体感的にこのようなコピペを使い倒す場面が歯がゆいわけです。これを緩和してくれるのがZenCodingなので、導入してショートカットを覚えておいて損はないと思います。そもそも、マークアップ作業で時間を食う所ところを大きくわけると…

①レガシーブラウザへの対応

②文章、画像コンテンツのタグによる囲い込みと参照

③繰り返しが発生するタグの記述

があるとして、ZenCodingは2と3を主に解決するという認識です。サポートしているエディターの範囲もかなり広いので、自身の環境でインストールできると思います。

1.DreamWeaver + Zen-Coding準備

ZenCodingのプロジェクトから、Dreamweaverのコマンドプラグイン「Zen_Coding.xmp」をダウンロードしてインスト―ル。

2.使い方

Dreamweaverで適当に新規ドキュメントを開いて、

(ul#nav>li*5>a)+(div#contents$*3>p*3)

と打ち込み、行の末端でショートカット(⌘+,)を押すと…ぐぬぬ。

瞬時にタグが生成されました。まるで魔法をかけたかのようなマークアップ生成の気持ちよさ…!これはやみつきになりますね。

(参考)→zen codingは超便利!Dreamweaverで使ってみました。

3.導入後のチューニング

まず、さっきの参考記事の下部にある「zen_settings.js」に関する事項を参照しながら設定を書き換えてDoctype宣言等をJP仕様にしました。

次に、Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加 を参考にしながら、タグの開始/終了にあわせてコメントアウトを記述するために、設定ファイルをさらに書き換えました。

さらに、Coda、DreamWeaverの向けのZenCodingだとショートカットが(⌘+,)になっているので、他のエディターに移ってもすぐ慣れるように、主流のショートカット(⌘+E)で省略コードの展開ができるようにカスタマイズしておくのもいいと思います。範囲選択して包括した要素をマークアップするショートカット(⌘+Shift+A)も同様に変えちゃいました。

本家のチートシートや Zen-Codingを使いこなして、らくらくマークアップ こちらの記事などを参考にショートカットを覚える。

ひとこと

導入して早3日、HTML+CSSの書きやすさに涙がでる。

体感値ではとても早くマークアップできているように感じます。

← Previous post

Next post →

62 Comments

  1. News: watch Will certainly Have A Substantial role In Any Site administration 腕時計 http://www.2013tokei.com/

  2. I got neverwinter gold and also slip-ons i a lot choose the shoes for the neverwinter gold.

  3. An Repugnant Actuality Relating To Your Lovely japan Fantasy

  4. y27jzH IE nonetheless is the market chief and a good element of folks

  5. Great article post.Really looking forward to read more. Keep writing.

  6. Say, you got a nice blog post.Thanks Again. Much obliged.

  7. You made some good points there. I did a search on the subject and found most guys will approve with your site.

  8. wonderful post, very informative. I wonder why the other specialists of this sector do not notice this. You must continue your writing. I am confident, you have a huge readers a base already!

  9. “Attractive component of content. I just stumbled upon your weblog and in accession capital to say that I get in fact enjoyed account your weblog posts. Anyway I will be subscribing in your augment and even I fulfillment you get right of entry to persistently fast.”

  10. Awesome article.Really thank you! Really Great.

  11. A big thank you for your post.Much thanks again. Keep writing.

  12. Whoa! This blog looks just like my old one! It as on a entirely different topic but it has pretty much the same layout and design. Great choice of colors!

  13. “Good blog! I truly love how it is easy on my eyes and the data are well written. I’m wondering how I might be notified when a new post has been made. I’ve subscribed to your feed which must do the trick! Have a great day!”

  14. Muchos Gracias for your article. Really Great.

  15. Very nice post and right to the point. I don at know if this is really the best place to ask but do you people have any thoughts on where to hire some professional writers? Thank you

  16. wow, awesome article post.Thanks Again. Much obliged.

  17. Im no expert, but I think you just made an excellent point. You clearly know what youre talking about, and I can really get behind that. Thanks for being so upfront and so honest.

  18. Would appreciate to constantly get updated great blog !.

  19. Im obliged for the blog post. Awesome.

  20. Wow, great blog.Really looking forward to read more. Really Cool.

  21. Thorn of Girl Very good information might be identified on this web web site.

  22. What as Happening i am new to this, I stumbled upon this I have found It absolutely helpful and it has aided me out loads. I hope to contribute & aid other users like its helped me. Great job.

  23. Usually I do not learn article on blogs, however I wish to say that this write-up very pressured me to take a look at and do it! Your writing taste has been surprised me. Thanks, very great article.

  24. “It’s in reality a nice and useful piece of info. I’m happy that you just shared this helpful information with us. Please keep us informed like this. Thank you for sharing.”

  25. “Sweet blog! I found it while browsing on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Thank you”

  26. [url=http://prednisone10mg.in.net/]prednisone10 mg[/url] [url=http://genericlipitor.trade/]cost of generic lipitor[/url] [url=http://costofcialis.top/]cialis prices[/url] [url=http://clindamycin300mg.trade/]clindamycin antibiotic[/url] [url=http://nexiumgeneric.bid/]nexium generic[/url]

  27. “Wow! After all I got a blog from where I can really take useful information concerning my study and knowledge.”

  28. In fact, a systematic graphical representation is done by professional designers who have creative bent

  29. whether this post is written by him as nobody else know such detailed about my difficulty.

  30. Thanks for the article post. Really Cool.

  31. Muchos Gracias for your post.Really looking forward to read more. Much obliged.

  32. I am so grateful for your blog post.Really thank you! Really Cool.

  33. Of course, what a fantastic website and revealing posts, I will bookmark your website.All the Best!

  34. I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my trouble. You are incredible! Thanks!

  35. I just want to mention I am newbie to blogging and site-building and seriously savored this page. Almost certainly I’m going to bookmark your website . You really have perfect well written articles. Cheers for revealing your web page.

  36. Very neat post. Much obliged.

  37. Thanks a lot for the blog post.Thanks Again. Great.

  38. Thanks for sharing, this is a fantastic post.Really looking forward to read more. Much obliged.

  39. I really liked your blog. Much obliged.

  40. when it comes to tv fashion shows, i really love Project Runway because it shows some new talents in the fashion industry

  41. Muchos Gracias for your article.Really thank you! Keep writing.

  42. pretty handy material, overall I believe this is really worth a bookmark, thanks

  43. Muchos Gracias for your post. Want more.

  44. In my country we don at get any of this kind of article. Need to search around the globe for such quality stuff. I congratulate your effort. Keep it up!

  45. “Wow, amazing weblog layout! How lengthy have you ever been running a blog for? you made blogging look easy. The total glance of your site is wonderful, let alone the content!”

  46. Looking forward to reading more. Great blog article.Really thank you! Great.

  47. I will immediately seize your rss feed as I can not in finding your email subscription link or newsletter service. Do you ave any? Kindly permit me know so that I may subscribe. Thanks.

  48. Very good written. Keep up the author held the level.

  49. Thanks again for the blog post.Really looking forward to read more.

  50. Wow, marvelous blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, as well as the content!. Thanks For Your article about sex.

  51. Great, thanks for sharing this blog article.Much thanks again. Great.

  52. Thanks for sharing amazing Article.

  53. Louis Rams on Saturday in San Diego, as he led the Seahawks to a winning season and for the year.

  54. Looking forward to reading more. Great post.Really looking forward to read more. Fantastic.

  55. “I appreciate you sharing this blog article. Fantastic.”

  56. Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is magnificent, as well as the content!

  57. Thanks for sharing this amazing service

  58. Wow, great blog.Much thanks again. Cool.

  59. Thank for the article. Worth reading

  60. I really liked your blog post.Really looking forward to read more. Really Great.

  61. Thanks for this amaing article.

  62. Major thanks for the blog. Great.

193 Pingbacks

  1. NIKE FREE 4.0
  2. サングラス 通販
  3. Homepage
  4. Google
  5. finger tip vibrator
  6. Tongue Ring Vibrator,
  7. bunny vibrator,
  8. Fetish Restraints,
  9. sell junk car
  10. view website
  11. gourmet hawaiian kona
  12. Consultant
  13. Business leather cases for iPhone 7 plus
  14. premium home phones mississauga
  15. sex bedroom furniture
  16. RMUTT
  17. adult toy store
  18. adam n eve coupons
  19. Women's T-shirt wholesale in nairobi
  20. massage pj
  21. Webcam model jobs
  22. nikos
  23. free bonus slots
  24. Clasificados de Trabajo en alabama
  25. andrika
  26. Sex Toys Ratings
  27. tactical gear
  28. Live adult webcam models
  29. coffee by kona
  30. emergency roadside service near eastpointe mi
  31. salvage yard
  32. bean co peaberry
  33. coffee beans online
  34. hawaii coffee from kona
  35. best coffee
  36. click site
  37. best gourmet coffee
  38. coffee company of kona
  39. gold kona
  40. Best Sex Lubricant
  41. Vibrator Waterproof
  42. cell phone repair Maple
  43. web hosting provider
  44. workfromhomejobs
  45. Waste Equipment Companies
  46. pc games free download full version for windows 7
  47. play games no download
  48. download software for windows 7
  49. adamandeve.com
  50. Clasificados de trabajo
  51. acrílico
  52. kauno turgus
  53. customized video training
  54. try here
  55. online casino
  56. academic suspension
  57. pc version free download
  58. webcam models
  59. adult bedroom toys
  60. webcam models
  61. toys for couples
  62. best clit vibrator
  63. cleaning out dryer vent
  64. Increased drying time
  65. rigid dryer vent pipe
  66. Adam and Eve Wand
  67. Sarah Rae Vargas
  68. مولدات للبيع
  69. apps for pc
  70. ankle restraint
  71. jack rabbit vibrator
  72. buy penis ring
  73. best free online dating sites
  74. Narcando
  75. Webcam model
  76. vibrator review
  77. Wild Vibrator
  78. 이문희 감독
  79. Tiles stickers
  80. Amazon tile stickers
  81. skyzone trampoline park Stockton CA
  82. dump trash
  83. tow truck dealer
  84. kegel ball
  85. Immigration Solicitors in London
  86. taxi sölden
  87. diamond wheels
  88. Cash For Trucks Melbourne
  89. videochat
  90. toronto homes
  91. Sell house Derby, KS
  92. digital marketing agency philippines
  93. vibrators
  94. sex toy
  95. meet new friends
  96. Biomanix
  97. this is my email address
  98. clasificados gratis
  99. Car Wrecker Melbourne
  100. 롤대리천국
  101. accessories truck
  102. best auto insurance companies
  103. mti magnolia telecom
  104. Reciprocating Saw
  105. sec with nipple clamps and butt plug
  106. car wreckers
  107. best sex toys
  108. superior auto institute reviews
  109. crotchless panty
  110. anal sex plugs
  111. adam and eve sex toys
  112. sex restraints
  113. sex restraint toys
  114. katun
  115. diffusers
  116. inchiriere apartamente oradea
  117. fresh water pearl
  118. iPad broken screen
  119. piezas reemplazo suzuki
  120. power of solar
  121. i want to hire a grant writer
  122. work at home 2018
  123. Best Cock Ring
  124. montazni plosiny plzen
  125. pronajem plosiny
  126. Clasificados Oregon
  127. lovedoll
  128. morkie dog
  129. anal plugs
  130. magic wand vibra
  131. apps for windows 8
  132. NEED A DISCO
  133. apps for pc download
  134. best male masturbater
  135. sex toy rabbit
  136. replacing missing teeth
  137. laptop lcd screen repair
  138. 스포츠닥터스
  139. 스포츠닥터스
  140. pure kona coffee
  141. best kona coffee
  142. jobs to do from home
  143. EvolvedNovelties
  144. Triple Sex Toy
  145. Apartment Complex Managers
  146. Beni ouarain
  147. Iowa directorio
  148. Male Stroker
  149. best g spot vibrator
  150. male sex doll
  151. games for pc download
  152. apps for pc
  153. free tech
  154. سرور مجازی
  155. CIO Terbaik
  156. beagle
  157. chug dogs
  158. space technology world
  159. Курс US Citizenship
  160. free download for windows xp
  161. full version pc games download
  162. best sex toy for women
  163. thrusting rabbit vibrator
  164. bullet cock ring
  165. malayalam movie
  166. 오버워치대리사이트
  167. php music Script
  168. Hallelujah
  169. roof repair
  170. hitachi edm filter
  171. dedicated server hosting
  172. передержка кошек
  173. mylar bags
  174. chain saw sharpening CBN wheel
  175. superior auto institute
  176. luxury watch trading
  177. superior auto institute
  178. sex advice
  179. Silver Bullet Vibrator
  180. Dual Vibrator
  181. free download for windows 8
  182. free download for laptop pc
  183. pc games for windows 7
  184. free download for laptop pc
  185. superior auto institute review
  186. free full download for windows pc
  187. apps for pc download
  188. app for windows
  189. kerala
  190. sexshop barato
  191. buy kona
  192. Rom Menu Khmer
  193. 100% kona coffee

コメントを残す