Zen-Codingの次期バージョン、Emmet について - kojika17
Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。 そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。 Emmet(beta) Emmetは、開発中です。 正式リリースはまだですが、機能は試すことができます。 Emmetは、2013年2月24日に正式リリースされました。 基本的には、今までのZen-Codingと変わりません。 Zen-Codingを使っていた人は、
Big Sky :: zencoding-vim の Emmet サポートを始めます。
« 僕がboost::asioとboost::property_treeを使いHTTPプロキシ環境下で非同期にGoogle Search APIから検索するまでにやった、たった一つの事。 | Main | python 補完のVimプラグイン「jedi-vim」がスゲー » しばらく zencoding-vim の emmet ブランチで開発し、落ち着いたら master にマージします。 親参照 ^ で親へ移動出来る様になってます。 .header>.nav^.logo これが <div class="header"> <div class="nav"></div> </div> <div class="logo"></div> こう展開されます。^^ で複数階層登れます。 高度なCSS補完 おそらくこれが emmet の最大の武器と思う。 まず m0.1 は margin: 0.1em
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
zencodingcss.vim (Vim Scirpt) : Serendip – Webデザイン・プログラミング
Sparkup （Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力）の vim plugin を参考にして CSS 用の Zen Coding 入力 vim script を作成しました。 <c-e> を押すことで、キーワード (Alias) から CSS のプロパティと値を自動で入力できます。 デフォルト設定では、Zen CSS Propaties の Alias が登録されています。 さらに、.vimrc に設定を記述することで Alias を追加・上書きすることができます。 使用方法 ノーマルモードでの Alias 文字列（行頭・行末・空白文字で区切られた文字列）上、またはインサートモードでの Alias 文字列末尾にカーソルがある状態で <c-e> を押すと Alias 文字列が対応する CSS プロパティ・値に変換されます。 変換され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
