タグ

Web制作とzen-codingに関するwww_tacaのブックマーク (6)

  • 知らない人は遅れてる?新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

    www_taca
    www_taca 2012/10/15
    Zen-Codingの進化版
  • もしも10分の1の行数でHTMLが書けたら

    Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLCSSのマークアップを効率的に行えます。 Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。 それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。 基的な使い方 ここからはZen-Codingの基的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエ

    もしも10分の1の行数でHTMLが書けたら
  • 【CSS】コーディングがさらに速くなる!Zen-Codingで覚えておきたいよく使うCSSスニペットコマンド | バシャログ。

    【CSS】コーディングがさらに速くなる!Zen-Codingで覚えておきたいよく使うCSSスニペットコマンド | バシャログ。
  • CodaにZen-Coding入れてみたらちょっと感動した。 - 納豆には卵を入れる派です。

    今日まで全然知らなかったんですが、何やら流行ってるらしくはてブ数がすごいことになっている、Zen-Codingとやらを導入してみた。 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ エディタに入れると、HTMLコーディングを楽にしてくれるイケてるプラグインらしく、詳しくは上記のエントリに動画なども貼ってある。 上記のエントリはAptanaでの利用法ですが、私の使っているエディタ"Coda"でも使えるようなので、さっそく入れてみたら、これが楽しい!すごい! Codaでの導入方法はこちらがわかりやすかったです。 CodaにZen-Codingを入れてみると… | gaspanik weblog ただし、展開方法が「control+,」とあるのだけど、私の環境だと「F1」キーで展開しました…なんでだろう。。バージョン違い

    CodaにZen-Coding入れてみたらちょっと感動した。 - 納豆には卵を入れる派です。
  • 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」

    CodaにZen-Codingを入れてみると… | gaspanik weblog
  • Zen-Codingで楽々コーディング! + コツ1つ

    話題のHTMLCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何?使い方は?という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)

  • 1