Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加｜Blog｜Skyward Design
Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加 Posted by Hideki at 2010年4月24日 13:20 タグ： Dreamweaver効率化 div要素の終了タグにコメントを付け、id名／class名を書くことはよくあるかと思います。ただこれが意外と手間のかかる作業なので、何とかならないか？と思い、「Zen Coding for Dreamweaver v0.6」をカスタマイズしてみたところ、上手く動作するようになりました。 デフォルトのZen Codingでもdiv#main|cを展開するとコメントが入りますが、それだと要素の前後にコメントと改行が入ってしまうので、このカスタマイズの方が自分には効率的かなと。Zen Coding歴約3ヶ月なので、あまり詳しくはありませんが...。 カスタマイズ方法 ZenCoding/fi
コーディングスピードはまだ上がる！！ <br>Zen-Coding カスタマイズ
コーディングスピードはまだ上がる！！ Zen-Coding カスタマイズ 2011-01-20 コーディング速度が"3倍！10倍！上がる"と言われてる Dreamweaver Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js Aptana [任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js") Notepad++ [Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js HTMLの言語を修正する(ついでにインデントも) 例えばhtml:xsで展開す
Dreamweaverへのインストール | Zen Coding 2-1 | HTML+CSSコーディングが10倍速くなるZen Coding
Dreamweaverは、Adobe CSの統合パッケージにも含まれているAdobe社のWindows/MacOS用のWebオーサリングツールです。Web制作のプロをはじめ、多くのユーザーに利用されています。 Dreamweaver（Windows/MacOS）用のエクステンションは、Zen Codingの公式サイトで配布されています。Windows用もMacOS用も、同じファイルが使えます。 ダウンロードした配布ファイルを解凍してできた「Zen Coding v.*.*.mxp」（*にはバージョン名の数字が入る）をダブルクリックすると、Extension Managerが起動するので、メッセージにしたがってインストールします。 Dreamweaver CS4以上の場合は、インストール後Dreamweaverを再起動すると、そのままZen Codingが使えるようになります。 CS3以下の
Zen-Codingの応用でもっと超速に - 原稿ありきの変換について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 前回の記事（マークアップ効率化 - zen-codingでコーディングを倍速に）ではZen-Codingの基本について説明しました。 また、その内容をCSS Nite実行委員会（公式ページ）が主催した、Dreamweaver Town Meeting in TokyoというDreamweaverにフォーカスをあてたイベントで公演させていただきました。 ［撮影：飯田昌之］ その公演では、Zen-Codingを知らない方向けに、Zen-Codingとは何か・どんなことが出来るのかなど、基本に関して実演を行い
デザイナーが使えるZen-coding環境 | バシャログ。
ワールドカップのパブリックビューイングを会社近くの映画館で見てみたいminamiです。 以前tanakaがNetBeanでのZen-codingを紹介していましたが、デザイナー、コーダーがよく使うであろう環境でのZen-coding対応事情を調べてみました！ 秀丸でZen-conding 秀丸でZen-codingができるようになるマクロが配布されています。 秀丸マクロでZen-Coding マクロをダウンロード マクロフォルダのパスを確認。[その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されてるフォルダにダウンロードしたzencoding-for-hidemaru.zipから展開したzencoding.mac と zencoding.iniを移動 [マクロ] - [マクロ登録] で、zencoding.mac を任意の番号に、別々に2つ
Dreamweaver (mac) のzen-codingショートカットを変更するカンタンな方法 | Coding | Chifffon Snow Depot
前回のエントリーで、Zen-codingをDreamweaverで使用するときのショートカット設定をXMLファイルを編集して変更するということを書きました。 あの後、KAITOKUのesshiさんに「普通にDreamweaverのショートカット設定画面から変更できるのでは…？」というご指摘をいただきまして…。 （ありがとうございます＞esshiさん） 慌てて確認したところ、ありました。普通に。設定画面で設定できました。 なんで見つけられなかったんだろう…「コマンド」メニューはほとんど使わなかったので全く気づきませんでした。 ま、ショートカットはXMLの設定ファイルがありますよーてな感じのトリビア的なところで。(^^;
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
Zen-Codingで楽々コーディング! + コツ1つ
話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)
Zen-Codingを入れてみて、もうちょい自分好みにしたい
こもりまさあきさんのエントリー「TextMate+Zen-Codingで超速コーディング？」を発端にして、ブログやTwitterでZen-Codingに関する話題が熱くなっています。 こもりさんのエントリーではTextMateにZen-Codingを追加していますが、僕は持っていないのでDreamweaverに入れて使ってみました。 Dreamweaverへのインストール方法 zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOGを参考にインストールしましたので、ご参照ください。 これできないのかー、ということでちょっとカスタマイズ こもりさんのエントリーを参考にいろいろと書いてみました。Dreamweaverのコードビューを良く使う自分にはたしかにめっちゃ便利ですね。ただインストールした段階ですとちょっと足りないなと思うこともあ
ブラウザで動くZenCodingEditorを作りました！ | kzms2 – html,css,javascript
動画デモ Zen-Codingをブラウザ上で触って、リアルタイムプレビューが出来るものを作成してみました。 エディター持って無くてもブラウザだけあればOkですよ！ kzms2 zen-coding editor 対応ブラウザなど 見た限りですとIE、Firefox3.5、Chrome4、Opera10、Safari4などで動くようです。 ※ただし、Webkit系はHeader内に書いた要素がうまくリアルタイムにプレビューされない模様です。styleタグをbody内に書けば表示されます… 使い方や詳細は続きから Zen-codingの概要 Zen-codingはショートカットキーを用いることでコーディングする時間を早めることが出来るソフトのようなものです。 TextMate-and-ZenCoding from komori, masaaki on Vimeo. 以下のリンクが詳しいで
www.gnnk.net - [Coda][zen-coding]TEA for Coda 補完リストのカスタマイズ
web book movieCodaのzen-codingが、Deprecatedになってしまってどうしたものかと思っていたら、 TEA for Codaになっていて、しかも、すでにTEA for Codaはインストールされていたという、 どうしようもない感じですが、zen-codingは便利です。 ただ、html/xhtmlのドキュメントタイプが、lang=”en”みたいになっていて、 よろしくないので、補完リストをカスタマイズしてみます。 変更するファイルは、 TEA for Coda.codaplugin/Support/Library/zencoding/zen_settings.py になります。 zen_settings.py L11 'variables': { 'lang': 'en', 'locale': 'en-US', 'charset': 'UTF-8
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
http://blog.v-colors.com/etc/778.html
先日、ノンプログラマのためのPHP入門という素敵なUSTを見ていたのですが、その中で出てきたzen coding。 前々から知っていたものの、これ使うならエディタごと乗り換えないといけないんだ！とずっと勘違いしていて、なんだかんだでまだDreamweaver使ってるし…サイトの定義とかもしてるからなんだかんだでエディタ乗り換えるの面倒だしなぁ…とかごにょごにょ思っていたのですが… Dreamweaverでも使えるらしいよ！知らなかった！無知って怖い！＞＜ Dreamweaver用はこちらからダウンロードできます。 ダウンロードしたZen Coding.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストール。 これだけでOK。 インストールが終わったら、早速何か入力してみましょう。 すごい！感動！ 展開はcontrolキーと,(カンマ)キ
UStreamで生Zen-Codingやってみましょうか | gaspanik weblog
ちょっと前に書いたZen-CodingネタをH2O Spaceのたにぐちさんに取り上げていただいてからというもの、関連するエントリーへのアクセスがにぎやかです（謎）。そんなこともあり、数日前の夜中に遊び半分で「Zen-Codingってこんな感じ」ってのをお見せしようと、Twitterで告知しながらUStreamでダラダラとやってました。 終わってから何名かの方に「見たかった！」というレスをいただいたのですが、ただやみくもにというか、適当に思いつくままキーボードをカチャカチャやってると、やってる本人も「何がいいかな？どうしようかな？」みたいな脳みそになっちゃいます。もちろん、見ている側も何してるか想像できないですからね…（笑）。 ということで…。 ならば、簡単なサンプルを作ってそれをやってみようじゃないか簡単ですがサンプルを用意してみました。ただブロックが組み合わさっただけだと面白くもないの
TextMate+Zen-Codingで超速コーディング？ | gaspanik weblog
先日の100の質問の答えにもちょっと書いたのですが、世の中には「Zen-Coding」なるものが存在しています。ちょっと前にWebデザイン関係の皆さんのTwitterでも「すげえ」とかってビデオが流れてましたけど、実はこれ相当前からあるんですよ（笑）。 Zen-CodingとはもともとTextMateとNetBeans用に書かれたプラグインのことです。HTMLとCSSのコーディング作業をより高速におこなうための機能追加をしてくれるものですね。前述の2つ以外に、AptanaやCoda、Espressoといったエディタ、最近ではDreamweaverのMXPファイルもダウンロードできるようになってます（*1）。 というわけで、今回はボクが普段使っている「TextMate」とZen-Codingの組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁど
Zen-Codingでできるあんなことこんなこと | gaspanik weblog
先日超速コーディング？としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。 HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします（どちらかと言えば、こっちが本当のZen-Codingなんでしょう）。 ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…（はず 笑）。 文書構造がわかってれば、1行書いて一気に展開できるZen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-Text
CodaにZen-Codingを入れてみると… | gaspanik weblog
前回、前々回とTextMateをベースにZen-Codingの話をしたわけですが、一番最初にも書いたようにTextMateは日本語の処理がうまくないので、導入したくても導入できない方も多いかもしれません。 でも、Zen-CodingをTextMate以外で使おうとするとグッと選択肢が減ります。Mac使いの皆さんがお使いのエディタといえば、CodaやskEdit、miあたりが有名どころです。良かった！Codaならコマンドの違いはありますが、その恩恵にあずかれますよ（笑）。 （追記）Zen-CodingのDreamweaver用のMXP（ダウンロードはこの辺で）でも、以下の操作と同じショートカットで略語や構造の展開はできるみたいです。 Codaでやるなら「TEA for Coda」をインストール 前々回のエントリーにも書いておきましたが、現在Coda用のプラグインは「TEA for Coda」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://sixnine.biz/2010/09/zen-cording.html
Amazon.co.jp: HTML+CSSコーディングが10倍速くなるZen Coding: こもりまさあき, 岡部和昌: 本
【CSS】コーディングがさらに速くなる！Zen-Codingで覚えておきたいよく使うCSSスニペットコマンド | バシャログ。