タグ

HTMLとzen-codingに関するclavierのブックマーク (5)

  • 知らない人は遅れてる?新Zen-Coding Emmet

    頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge

  • Zen-Coding、0.7のすすめ

    Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。 使いこなしてコーディング速度が3倍になっていますか? SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。 エディタのサポートは、3つの分類に分かれます。 公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E

    Zen-Coding、0.7のすすめ
  • Big Sky :: 最近の zencoding.vim

    最近 zencoding.vim を大きく修正しました。とは言ってもこれまで単体テストを作ってきた事もあって、過去の動作を(なるべく)壊さずに大規模な修正が行えました。 これまでは一つのファイルに html, css, haml の処理が全て記述されていたのでとてもスパゲッティなコードになっていて、もう少し放っておくとカオスな状態になりかけていたので、ファイルを分割しインタフェースを揃える事にしました。 これにより、今後新しいフォーマットに対応する際にも、zencoding/lang にあるファイルの真似をして記述すれば実装出来る様になります。 haml に対応した 「えっ?前から対応してたんじゃないの?」と言われる方もいるかもしれませんが、これはあくまで expand abbreviation の haml フィルタとしてだけサポートしていました。 何が変わったかというと zen cod

    Big Sky :: 最近の zencoding.vim
  • コーディングの効率化に効くと評判のツールを手軽に試せるサイト(+アドオン)4つ | バシャログ。

    桜はまだか。hakoishiです。 さて、web制作界隈は次々に便利なツールが登場してきます。 「便利と評判のあのツール、使ってみたいけど導入が手間で…」 そんな時、web上で手軽に試せるツールがあったりすると嬉しいですね。 ってことで、今回はそういったツール達のご紹介です。 zen-codingを試す JavaScriptフレームワーク各種を試す LESSを試す vimを試す zen-codingを試す マークアップ効率化 - zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog) 「基的な記法」まで移動して、各デモ欄の文末でtabを押してみてください。結構感動しますよね。 編集するとそれも反映されますので、いろいろ試してみてください! 【参考】 物足りなくなったら、こちらも。 kzms2 zen-coding editor JavaScript

    コーディングの効率化に効くと評判のツールを手軽に試せるサイト(+アドオン)4つ | バシャログ。
  • Zen Codingでできる、あんなことこんなこと | Zen Coding 1-2 | HTML+CSSコーディングが10倍速くなるZen Coding

    HTMLタグをいちいち手で入力していると、時間もかかりますし、入力間違いやスペルミスなど、間違いの原因にもなります。それはCSSでも同じです。 DreamweaverなどのWebオーサリングツールには、標準でタグや属性の補完機能や「スニペット」といわれる入力支援機能があります。スニペットは、登録されているよく使うコードを呼び出して、コピー&ペーストの要領で入力します。 Zen Codingでは、このスニペットのようによく使うコードを呼び出して入力するものですが、「省略形」(abbreviation)といわれるコードの略語のようなものを入力するだけで、さらにかんたんにコードを入力することができます。 Zen Codingを使えばコーディングはこう変わる!HTMLコーディングでは、「<h1>見出しタイトル</h1>」のようにテキストを開始タグと終了タグで囲み、見出しを指定します。 Zen Co

    Zen Codingでできる、あんなことこんなこと | Zen Coding 1-2 | HTML+CSSコーディングが10倍速くなるZen Coding
  • 1