Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
Sublime Text 2 + Emmet でRetina用に半分の画像サイズでimgタグを挿入する方法 - Qiita
概要 Sublime Text2 には Emmetをインストールした状態でhtmlを編集時にcmd + shift + p -> "Emmet : Update Image Size"で指定したパスの画像をwidthとheight込みでimageタグを挿入してくれるという便利機能がある。 Retinaを考慮したスマートフォン用にマークアップしている際はこの自動挿入されるwidthとheightのサイズを半分にする必要があるがそれができない。 既存の"Emmet : Update Image Size"を編集してRetina用に半分のサイズを自動挿入する方法を説明する。 1. スクリプトファイルを開く メニューのPreferences -> Browse Packages…でFinder開く 開いたFinderのEmmet -> emmet -> emmet-app.jsを開く 2. 編集
Emmet + hayaku プラグインのショートコードをしらみつぶし（2文字まで）
gistfile1.txt p 1 _U ��� _U *{ /*a*/ -webkit-animation: ; -moz-animation: ; -ms-animation: ; -o-animation: ; animation: ; /*b*/ bottom: 100%; /*c*/ color: #FFF; /*d*/ display: ; /*e*/ empty-cells: ; /*f*/ font: ; /*g*/ g /*h*/ height: 100%; /*i*/ -ms-interpolation-mode: ; /*j*/ j /*k*/ k /*l*/ left: 100%; /*m*/ margin: ; /*n*/ nav-down: ; /*o*/ overflow: ; /*p*/ padding: ; /*q*/ quotes: ; /*r*/ ri
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ – T2
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ 11月 18, 2012 admin 導入はめちゃくちゃ簡単 下記記事でインストールまで簡単に。 直近だと下の2つ見ておけば大体おｋ Permalink to Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ [Event][SublimeText]第0回 Sublime Text 2 勉強会 で Emmet について話してきた ダウンロード Dev Builds 初期設定等は上記記事にある設定をリスペクトしました笑 Packageのインストール Sublime TextはHTML5等パッケージをインストールする事で使えるようになります。 Dreamweaverではファイルを新規作成時、H
CSSが速くかけるようになるHayakuで、世界が変わるらしい - inkdesign
27 Nov 2012 Zen CodingもといEmmetを使いこなすとまでいかなくとも、それなりに使ってはいるが、実はCSSではあんまり活用していなかった。 というもCSSに関しては、多少Emmetや他のコード補完プラグイン（パッケージ）の支援はあるものの、HTMLよりも手グセというか、自然とプロパティなり値なりをさっさと書いてしまうし、それほどありがたい、と思えるほどでもない。 またZen Codingにせよ、Emmetにせよ、短縮形のルールが決まっているし、それらを覚えないといけないので少し大変だ。 そこでHayaku、らしい 二度見しそうな名前だが、これはHayakuというSublime Text2のパッケージ。Emmetと違い、対象になるのはCSS（とCSSプリプロセッサ）であり、前述の通りCSSの記述に関してはこれといったツールを使っていない自分でも感動した。 ちなみにHay
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cheat Sheet
http://toybox-design.net/?p=488