Zen-Codingで楽々コーディング! + コツ1つ
話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)
zen-codingでhtml,cssのコーディングスピードが3倍以上になる - chulip.org
zen-codingはHTML and CSS hi-speed codingと謳っているように飛躍的にhtml,cssのコーディングスピードを上げてくれます。 zen-coding - Project Hosting on Google Code 公式でVimには対応していなかったのだけどvimscriptでmattnさんが作っていました。神 zen-coding for vim を pure vimscript だけで書いてみた。 使用方法 スニペットコマンドを入力したあとにexpandabbr_keyをタイプします。 ※デフォルトだと, スニペットコマンド一覧 HTML http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn CSS http://code.google.com/p/zen-coding/wiki/ZenC
zencoding.vimで、１０倍速くHTMLを書く
ここ数日、Zen-CodingがLDCに上がってたので興味を持っていたのですが、手を出す事が出来ませんでした。 （環境構築とか面倒くさそうだったのでｗ） ところが、mattnさんが、pure vim-scriptでZen-Codingを作成してたので、Vimmerな僕はさっそく導入してみました。 導入方法です。 ３ステップで導入出来ます。 １．こちらからzencoding.vimをダウンロードします。 （僕のVim環境(Kaoriya版7.2.261）は若干古かったらしいので、Ver0.21を落としました） ２．vimをインストールしてあるディレクトリ/runtime/pluginにzencoding.vimをコピーする ３．_vimrcに以下を追加 let g:user_zen_expandabbr_key = '<c-e>' これで導入終了。 さあ、HTMLを構築しましょう。 html
Zen Coding: A Speedy Way To Write HTML/CSS Code — Smashing Magazine
In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers. In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS cod
vimでZen Coding::zencoding.vim - e2esound.com業務日誌
e2esound.com業務日誌 東京・群馬を中心にWebサイト製作、Mobilサイト制作、WordPress構築等々を業務にするe2esound.comの業務日誌的なblog。 HTMLを高速で作成できる（ようになれるかもしれない）コーディングスタイル。これがZen-Codingなのです。 Aptana等々のアプリケーションではプラグインが公開され、実際にこのコーディングスタイルが使えるらしいです。では、vimではどうなのか？つまりはいつもの行動パターンをとるわけです。 Big Sky:zen-codingの殆どの機能をzencoding.vimに取り込んだ。 mattnさんありがとうございます！感謝感謝!!早速使ってみます。最新版のzencoding.vimはmattnさんのgithubからダウンロード!! リンク先にある通り、インストールは～/ftpplugin/html以下にzen
zencoding.vim
HTMLやCSSの記述を手助けするツールにzencodingというものがあります。CSSのプロパティを書くとHTMLに展開する、というイメージ（div#headerが、<div id="heaer'><div>のように展開）です。もちろん他にもいろいろありますが。 Zen Coding公式ページで見ると、オフィシャルにはサポートされていませんが、zencoding.vimというものが用意されています。 スクリプトをダウンロードして、ftplugin/htmlに配置します。vim で htmlファイルを編集するとき、ctrl+y,を押すとzencoding スクリプトを呼び出します。 vim 自体が高機能なエディタなので、vimを使いこなせば可能なカスタマイズも多いのですが、上述のように、CSSプロパティとの類似性を考えると、非常に覚えやすい（思い出しやすい）ので、活用するに越したことは無い
zencoding.vim を使って倍速マークアップ・コーディングをする
Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. zencoding をご存じでしょうか。コーディングを倍速で行えるものなんですが、なかなか私もコーディングをする機会というのは無いのですが、ちょっと気になったのでやることにしました。一応 vim 使いレベル1なので、zencoding.vim を使ってみることにします。 ダウンロード Big Sky :: zen-coding for vim を pure vimscript だけで書いてみたなどから、ZenCoding.vim をダウンロードします。 インストール /vim/ftplugin/html/ に zencoding.vim を入れます。 続いて、vimrc に以下の記述を追加します。
下記のURLに記載されている手順で、Vim に zencoding.vim をインストールしました。…
下記のURLに記載されている手順で、Vim に zencoding.vim をインストールしました。 http://linuxserver.jp/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF/Vim/Zen-Coding.php インストール直後は正常に動作していたのですが、一度 Vim を再起動すると以下のようなエラーがでるようなりました。 ・ul>*3と入力した後、"Ctrl+y ," を押すと、正常に ul要素が展開されず <Plug>ZenCodingExpandAbbr と記入されてしまう。 ＞ ul>li*3(ここでCtrl+y,)<Plug>ZenCodingExpan
gvim で、Zen-Coding:巷で話題の「Zen-Coding」。やってみたかったが、これも気になってたエディタ「gvim」で、できるらしい ･･･ 【コーディング】 サイト構築,創る,WEB,ホームページ制作,サイト制作,WEBプログラミング - 創るmetaboy
創るmetaboy TOP > ツール紹介 > gvim で、Zen-Coding:巷で話題の「Zen-Coding」。やってみたかったが、これも気になってたエディタ「gvim」で、できるらしい ･･･ 【コーディング】 巷で、話題ですねぇ。Zen-Coding。 ちょいちょいと書いて、ど～ん、とソースを吐き出す Zen-Coding、、とても気持ちを刺激し、 個人的に、 「今気になるベスト３」でした。 ◆zen-coding Set of plugins for HTML and CSS hi-speed coding ・・・やりたい。 ・USTREAM で、そのコーディングの様子を 公開されてる方もいらっしゃいますね。 ・・・・・ 使い始めました！ 追記に ▼ ************************************************ ◎ gvim で、Zen
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Downloads - zen-coding - Project Hosting on Google Code
ZenHTMLElementsEn - zen-coding - HTML elements and its aliases for Zen HTML plugins - Project Hosting on Google Code
ZenCSSPropertiesEn - zen-coding - CSS-properties and its aliases for Zen CSS plugins - Project Hosting on Google Code
ZenCoding.vim