タグ

zen-codingに関するsakapunのブックマーク (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

  • Introduction to Sass and How to Setup with Mac + Coda

    2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する

    Introduction to Sass and How to Setup with Mac + Coda
  • HTMLを一気に書き上げよう | Zen Coding 3-5 | HTML+CSSコーディングが10倍速くなるZen Coding

    Zen Codingの構文を組み合わせよう3-3ではよく使うHTMLタグの省略形を紹介し、続いて3-4では、HTMLをより効率的に入力するために、Zen Codingの構文の書式を紹介しました。 ここまで紹介した書式を組み合わせれば、次のようなHTMLを、「Zen Codingの記述」のように記述して、展開・生成することができます。 まず短めのコードから始めて、できるだけ一気に書けるように、記述のしかたを考えてみましょう。 <body> <div id="header"> <h1 id="site-id"></h1> <p class="site-copy"></p> </div> <ul id="nav"> <li class="list-items"></li> <li class="list-items"></li> <li class="list-items"></li> <li

    HTMLを一気に書き上げよう | Zen Coding 3-5 | HTML+CSSコーディングが10倍速くなるZen Coding
  • コーディングスピードはまだ上がる!! <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で展開す

    コーディングスピードはまだ上がる!! <br>Zen-Coding カスタマイズ
  • 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