インプレス ビジネスメディア
Web担トップ » HTML+CSSコーディングが10倍速くなるZen Coding » HTMLやCSSが手間なく書けるZen Coding | Zen Coding 1-1
HTML+CSSコーディングが10倍速くなるZen Coding

HTMLやCSSが手間なく書けるZen Coding | Zen Coding 1-1

ここではまず、Zen Codingとはどのようなものなのかを説明します。
こもり　まさあき・岡部 和昌 2011/1/11 8:00 |
HTML+CSSコーディングが10倍速くなるZen Coding

ネットで話題の"究極の超速コーディング"がだれでもマスターできる！
この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

Zen Codingは、Vadim Makeev氏によって発表され、現在はSergey Chikuyonok氏らによって開発されているテキストエディタ用のプラグインです。MITライセンス※のフリーソフトとして公開されています。

このプラグインは、Webページの記述や装飾に用いられるHTMLタグやCSSのスタイルの記述を効率よく、かんたんに入力するためのものです。Windows/MacOS/Linux各プラットフォームのテキストエディタや、Dreamweaverなどのオーサリングツール用のプラグインとして提供されています。

また、公式サイトで対応しているものだけでなく、秀丸エディタなどのエディタや、Movable TypeやWordPressなどのブログツールにも、有志の手によってプラグインやマクロが提供されているので、ふだんHTML/CSSを書いている環境ですぐ使えるはずです。

※MITライセンス／マサチューセッツ工科大学を起源とするソフトウェアライセンス。著作権表示とライセンスを明記すれば、オープンソースに限らず無償で二次利用が可能。
Zen Coding
Zen Coding実行環境
環境OS名称配布場所
公式サポート…全機能に対応
Aptana/EclipseWin/Mac/LinuxZen Coding for Aptana公式サイトで配布
TextMateMacZen Coding for TextMate
CodaMacZen Coding for Coda
EspressoMacZen Coding for Espresso
Komodo Edit/IDEWin/Mac/LinuxZen Coding for Kodomo Edithttp://community.activestate.com/xpi/zen-coding
Notepad++WinZen Coding for Notepad++公式サイトで配布
PSPadWinZen Coding for PSPad
テキスト入力エリア用WebブラウザZen Coding for <textarea>
編集エリア用WebブラウザZen Coding for EditArea
サードパーティサポート…公式エンジン搭載、サードパーティ開発
DreamweaverWin/MacZen Coding for Dreamweaver公式サイトで配布
Sublime TextWinSublime Zen Coding
UltraEditWinUltraEdit Zen Code
TopStyleWinTopStyle Zen Coding
GEditWin/Mac/LinuxZen Coding for Gedithttp://github.com/fmarcia/zen-coding-gedit
http://github.com/mikecrittenden/zen-coding-gedit
BBEdit/TextWranglerMacZen Coding for BBEdit / TextWranglerhttp://www.angelwatt.com/coding/zen-coding_bbedit.php
Visual StudioWinVisual Studio Pluginhttp://zencoding.codeplex.com/
EmEditorWinzen_emeditor.jseehttp://jp.emeditor.com/modules/mydownloads/viewcat.php?cid=54
サクラエディタWinZenCodingForSakuraEditor.ziphttp://mwlab.net/download?did=15
非公式対応…独自エンジン搭載
IntelliJ
IDEA/WebStorm/PHPStorm		Win/Mac/LinuxWebIDE.Zen.Coding公式サイトで配布
EmacsWin/Mac/Linuxzencoding-mode.elhttp://github.com/chrisdone/zencoding/raw/master/zencoding-mode.el
VimWin/Mac/Linuxzencoding-vimhttp://github.com/mattn/zencoding-vim
秀丸エディタWin秀丸マクロでZen-Codinghttp://exoego.net/archives/zencoding-in-hidemaru
ブログツール/CMS
WordPressWin/Mac/LinuxWP Zen-Codinghttp://rewish.org/wp/zen_coding
Movable TypeWin/Mac/LinuxMT Zen-Codinghttp://code.google.com/p/mt-zen-coding/downloads/list
NucleusWin/Mac/LinuxNP_ZenCodinghttp://japan.nucleuscms.org/bb/viewtopic.php?t=4609
開発環境
Flash DevelopWin/Mac/Linuxhttp://flashdevelop.jp/Zen-Coding（3.1.0 RTMから標準で搭載）
NetBeansWin/Mac/LinuxNetBeans Zen HTML公式サイトで配布
SlickEditWin/Mac/LinuxSlicEdit Zen Coding
Webサービス
Webブラウザ―kzms2 Zen Coding editorhttp://kzms2.com/lab/editor/
HTML+CSSコーディングが10倍速くなるZen Coding
  • HTML+CSSコーディングが10倍速くなるZen Coding
  • こもり　まさあき・岡部 和昌 著
  • ISBNコード
    978-4-8443-2945-9
  • インプレス
この本をAmazonで注文する

この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

ネットで話題の"究極の超速コーディング"がだれでもマスターできる！

めんどうなタグ入力も、一瞬でラクラク変換！ Zen Codingを使えば、かんたんな「省略形」だけでHTML/CSSタグがどんどん入力でき、複雑なHTML/CSSも、あっという間にコーディング可能です！同じタグの繰り返しや入れ子構造、連番も一発で自動変換。Webページ制作が画期的にスピードアップできます。 日々大量のタグを打つWebデザイナー、マークアップエンジニア、サイト更新担当者らが泣いて喜ぶマジックツール、Zen Codingのはじめての解説書です。

この記事が役に立ったらシェア!
関連記事: 
これは広告です
メルマガの登録はこちら　Web担当者に役立つ情報をサクッとゲット！
この記事の筆者

こもりまさあき（cipher）
フリーランス

1972年生まれ。黎明期からWebサイト構築などに関わる。現在はWeb関連業務に加えてテクニカルライティング、講師など、業種を限定せずに活動しながら、Twitter（@cipher）でたまに毒を吐く日々。 近著に『HTML+CSS コーディングベストプラクティス』（MdN・共著）など。
gaspanik weblog　http://blog.gaspanik.com/
ソーシャル系のアカウント一覧はこちら　http://eee.am/cipher

岡部和昌（おかべ・かずまさ）
Webデザイナー

1983年生まれ、埼玉県の田舎出身。大学で応用化学を学んだ後、ヤフー株式会社初のデザイナー新卒採用にて入社。現在に至る。同社サイトの大規模リニューアルのマークアップを数多くメインで担当した経験を持つ。 ページ表示速度の高速化、マークアップの効率化に強い関心があり、HTML5やCSS3を用いたサイトの開発・運用、Java ScriptやPHPを用いた動的なサイト構築が得意分野。 執筆記事に『続・ハイパフォーマンスWebサイト−ウェブ高速化のベストプラクティス』（オライリージャパン）付録「Yahoo! JAPANが実践するWebの高速化」（共著）。
kzms2 - html,css,javascript　http://kzms2.com/
Twitter　@kzms2

これは広告です
メルマガの登録はこちら　Web担当者に役立つ情報をサクッとゲット！

人気記事トップ10（過去7日間）

  1. 高収入企業が集まる都市、トップ5に東京エリア以外からランクインした地区は？【SalesNow調べ】
  2. マンガ・アニメのキャラ人気、「ONE PIECE」の認知が近年で大きく増加。一方で好感率が増加したキャラは？【NRC調べ】
  3. 今冬のボーナスの使い道、「貯金・預金」が11年連続トップながら過去最低の割合に【Pontaリサーチ調べ】
  4. 大日本印刷Web担当者の「社内評価を大幅アップ」させた“サイトリニューアル成功”の全貌！
  5. Z世代の流行、「BeReal.」が引き続き総合1位。「Mrs. GREEN APPLE」「アサイーボウル」が新たにランクイン【LINEリサーチ調べ】
  6. 「9割以上出社」の職場で見える課題　オフィス出社はパフォーマンスを上げるのか？【oVice調べ】
  7. サンリオ流アクセス解析！ BigQueryなしでも実現、GA4でPDCAの回し方
  8. ChatGPT search特集： SEO担当者が知っておくべきChatGPT検索のこと【SEO情報まとめ】
  9. ILLIT、たまごっち、風呂キャンセル界隈……Z世代女子500人が選ぶトレンド大賞2024【SHIBUYA109 lab.調べ】
  10. ヘルプフルコンテンツアップデートはGoogleの説明と違う動きをしているとデータで判明（前編）

今日の用語

RTB
広告関連の用語。DSP と SSP による入札と応札を 1 回の広告表示（インプ ...→用語集へ

インフォメーション

RSSフィード

Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

[SPONSOR]
株式会社日本レジストリサービス株式会社キノトロープSitecore株式会社ミツエーリンクス株式会社電通デジタル株式会社サイズプライム・ストラテジー株式会社