爆捗！ WordPressテーマ作成ショートカット（1）：Dreamweaverで始めるWordPressサイト構築の基礎知識 (1/3) - ＠IT

2014/02/09 147 users Sass Emmet Compass CMS メイン

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamwe... 続きを読む

Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました - WEBCRE8.jp

2013/05/20 103 users Sublime Text2 WEBCRE8.jp Sass

永らくHTMLエディターを移ることなく過ごしてきたのですが、先日Adobe Bracketsの記事を見て一目ぼれし、インストールしてみました。ごめんな、Sublime Text…！ どうもハマれなかったSublime Text 私は普段HTMLを書くときに結構適当なエディターを使ってきたんですが、いい加減ちゃんと効率のいい、Zen-Codingにも対応してて、HTML5の予測変換も出来てSassに... 続きを読む

Zen-Coding(Emmet)でコード展開時にクラス名・ID名のコメントを自動追加する方法 | OZPAの表4

2013/01/16 48 users OZPA Emmet テキストエディタ CSS Mac

HTML Code / Sebastian Fuss 愛用のテキストエディタ「Sublime Text 2」にも導入しております、Emmet（Zen-Codingの次期バージョン）。使いこなすことでHTML、CSSの記述を高速化することが出来ます。 んまぁ例えばこんな風に記述して展開すると… このようにHTMLを吐き出してくれます。 で。MacのエディタCoda2のプラグイン「Tea for Co... 続きを読む

ちょっとよさげなSublime Text 2の設定 | A Memorandum

2012/11/17 128 users sublime text A Memorandum 設定

たまたま目にした海外の記事「Configuring Sublime Text 2」に、自分が指定してないSublime Text 2の設定がありまして。ちょっくらそれを拝借しつつ、自分が指定しているいくつかの設定とZen-Codingの次期バージョン「Emmet」を日本語環境で使う時にしておいた方が良い設定をまとめておいた。 「Cmd＋,」で出る「Settings – User」に書いとけば大丈夫... 続きを読む

恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ | ウェビメモ

2012/11/08 94 users 備忘録 sublime text エディタ ウェビメモ 爆速化

先日「恋に落ちるエディタ」Sublime Textの勉強会に参加してきた霙(@xxmiz0rexx)です。 エディタの便利さ、優雅さ、魅力などを語るのは別の機会にするとして、 今回はそのSublime Textで、爆速コーディング用プラグイン「Zen-Coding」先生を使えるようにする設定方法を学んできましたので、備忘録もかねて記事にしたいとおもいます。これから使ってみようと思っている方は是非！... 続きを読む

CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17

2012/10/18 288 users Emmet 真価 プロパティ CSS HTML

Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの... 続きを読む

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

2012/10/11 529 users Emmet HTMLコーダー HTML リズム 公式アナウンス

頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話します... 続きを読む

Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17

2012/09/19 208 users Emmet htm GitHub IDE エディタ

Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17 Web Design KOJIKA17 Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTM... 続きを読む

Sublime Text2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog

2012/08/13 1575 users エディタ sublime text シェアウェア メモ 実務

Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+C... 続きを読む

Zen-Coding、0.7のすすめ : Web Design KOJIKA17

2012/06/30 314 users Haml Abbreviation 略語 エンコード NEXT

Zen-Coding、0.7のすすめ Headlines Zen-Codingとは公式サポートサードパーティー非公式Zen-Codingの使い方Expand Abbreviation (略語の展開)フィルターコメントアウト (c)エンコード (e)Haml (haml)ショートコードHTMLCSSWrap with Abbreviation (略称の包括処理)Next/Previous Edit ... 続きを読む

html+cssのコーディングの作業スピードが数倍に！「Zen-Coding」の情報まとめ - NAVER まとめ

2012/06/22 475 users NAVER コーディング HTML+CSS 作業スピード 数倍

My favorites ▼ | Sign in Your version of Internet Explorer is not supported. Try a browser that contributes to open source, such as Firefox , Google Chrome , or Google Chrome Frame . zen-coding Set o… 続きを読む

[K] これでHTMLコーディングが捗るかも！TextWranglerにzen-codingを導入してみました

2012/06/17 58 users HTMLコーディング

この一年でHTMLを書くこともちょくちょく増えてきました。どうも@knk_nです。 Twitterで「zen-coding」というコトバを目にし、興味を持ったのでお気に入りのテキストエディタ「TextWrangler」に導入してみることに。 無料だけどかゆいところに手が届く高機能なHTML&テキストエディタ「TextWrangler」 Zen-codingとは zen-codingとはHTMLの記... 続きを読む

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

2012/03/19 85 users アドオン バシャログ コーディング less hakoishi

桜はまだか。hakoishiです。 さて、web制作界隈は次々に便利なツールが登場してきます。 「便利と評判のあのツール、使ってみたいけど導入が手間で…」 そんな時、web上で手軽に試せるツールがあったりすると嬉しいですね。 ってことで、今回はそういったツール達のご紹介です。 zen-codingを試す JavaScriptフレームワーク各種を試す LESSを試す vimを試す zen-codin... 続きを読む

もしも10分の1の行数でHTMLが書けたら（1/2） ─ ＠IT

2011/07/04 656 users HTML 行数 CSS 10分 特定

ひらいさだあき 2011/7/4 Zen-Codingのテキストプラグイン使うと、効率的にHTMLが書けます。特定の省略された記法や展開を試そう Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSS... 続きを読む

Dwでコーディングがちょこっと早くなる小技｜WEB Drawer -WEB制作に関するメモサイト-

2011/02/04 48 users コーディング テキスト WEB Drawer タグ 記述方法

コーディングを早くすると言えば超速コーディングとして話題になった「Zen-Coding」がありますが、記述方法を覚えなければいけないのもあって及び腰な人も多いのではないでしょうか（私です）。私はコーディングする際は先にテキストをコピーしてもってきてからタグで囲むので、このような使い方をしてるとあまりZen-Codingは使わないのかなと思います。覚えてしまえば早くなりそうですが、そこまでなーと思う... 続きを読む

より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net

2010/06/09 1403 users CSS コーディング HTML net 順不同

Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方... 続きを読む

ブロガーにもおすすめ！「秀丸でZen-coding」がやっぱり便利な件 - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/04/15 307 users IDEA class ヘッダー マクロ HTML

そういえば先日から「秀丸でZen-coding」できるマクロを愛用していますよ。Zen-codingは簡単にHTMLを書ける記法ですね。 例えば、 ul と書いてCTRL+Eを押すだけで、 <ul></ul> といった具合に変換してくれます。またIDやClassも指定できちゃったり、良く使うヘッダーなんかも一発で呼び出してくれるので、作業効率がぐっとあがりますよ。 これ、もともとはマークアップエン... 続きを読む

マークアップ効率化 - zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)

2010/03/16 695 users なか R＆D統括本部 制作本部 岡部和昌 普段

はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌と申します。 Yahoo! JAPANトップページやMy Yahoo!のマークアップを担当しており、HTML,css,JavaScriptなどを用いて開発を行っています。 マークアップの効率化を行えていると思われる部分を、普段の業務のなかから取り上げて、記事を書いていきたいと考えています。 今回はB... 続きを読む

Zen-Codingで楽々コーディング! + コツ1つ

2010/02/23 470 users コーディング CSS HTML 程度HTML ツール

話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ... 続きを読む

知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

2010/02/22 2247 users コーディング EC studio CSSエディタ CSS 3倍

最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動... 続きを読む