Tbpgr Blog

Organization Development Engineer tbpgr（てぃーびー）のブログ

Zen-Coding

2013-10-06

Sublime Text2 | Emmetプラグインのロケール設定

概要 Emmetプラグインのロケール設定詳細 Emmetプラグインのロケール設定をします。設定ファイルのフォルダ内の %Sublime Text 2%/Packages/Emmet/emmet/snippets.json を開いて3,4行目を編集します。設定前 { "variables": { "lang": "en", "locale": "en-…

2013-10-06

Emmet(Zen-Coding) | 同一タグを多数出力する際に、属性やテキストに連番を付与する

Emmet Zen-Coding

概要同一タグを多数出力する際に、属性やテキストに連番を付与する内容同一タグを多数出力する際に、属性やテキストに連番を付与します。 tag[attribute=value$]*nnが連番数。 value$の$の部分に連番が挿入されます。サンプル before div#hoge_${hoge$}*…

2013-10-06

Emmet(Zen-Coding)

Emmet Zen-Coding

概要 HTML、CSS、XMLのコーディングを高速化するEmmetについて詳細内容 code url 要素内のテキストを入力する {} http://d.hatena.ne.jp/tbpg/20131006/1381064353 同一タグを多数出力する際に、属性やテキストに連番を付与する tag[attribute=value$]*n h…

2013-10-06

Emmet(Zen-Coding) | 要素内のテキストを入力する

Emmet Zen-Coding

概要要素内のテキストを入力する内容要素内のテキストを入力するには以下の文法を利用します。 tag{text} サンプル1 before div{hoge} after <div>hoge</div> サンプル2:連番との併用 before div#hoge_${hoge$}*5 after <div id="hoge_1">hoge1</div> <div id="hoge_2">hoge2</div> <div id="hoge_3">hoge3</div> <div id="hoge_4">hoge4</div> <div id="hoge_5">hoge5</div>

2012-03-10

HTML5新要素 navタグ

html5 Zen-Coding

概要 navタグについて説明します。内容 navタグはナビゲーションを表します。一般的なサイトでよく見るメニューなどが対象となります。注意点企業情報、お問い合わせ、権利情報等サイトの一番下に配置したりするような対象は navよりもfooterを利用しま…

2012-03-10

HTML5新要素 sectionタグ

html5 Zen-Coding

概要 sectionタグについて説明します。内容文書の意味のまとまりを表す。より具体性があり、articleなど他のセクション要素を適用できる場合はそちらを利用すること。以前のhtmlではdivタグに任意のidをつけて擬似的に意味を持たせていたが、 html5では…

2012-02-16

jQueryのイベント処理（おまけでZen-Codingのサンプル）

jQuery Zen-Coding

概要 jQueryのイベントに処理を紐づける方法について。書式要素.event名(function) サンプル概要 divタグの範囲をクリックすると、クリックした位置のX軸とY軸の座標をダイアログに表示します。サンプルコード <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src='../js/jquery.js'></script> <script type="text/javascript"> $(fun…</meta></head></html>

はてなブックマーク - jQueryのイベント処理（おまけでZen-Codingのサンプル）

2012-02-16

Zen-Codingコマンド例

Zen-Coding

HTML 展開前 meta:utf展開後 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> CSS 展開前 w展開後 width:; 展開前 h展開後 height:; 展開前 bgc展開後 background-color:#FFF;</meta>

2011-12-03

Zen-Coding Eclipse Plugin

Zen-Coding Eclipse

以下をEclipseにインストールすればEclipseでZen-Codingを使用可能です。 http://zen-coding.ru/eclipse/updates/※2013/03/17追記。インストール元が変わった模様。 http://media.chikuyonok.ru/eclipse/updates/HTML+CSSコーディングが10倍速くなるZen Codi…

2011-11-17

Zen-Coding標準コマンド

Zen-Coding

Zen-Codingの標準的コマンドを紹介 Ctrl+EでZen-Coding実行 html展開後 <html></html> id指定は『#』で行う div#id展開後 <div id="id"></div> class指定は『.』で行う div.class展開後 <div class="class"></div> classの並列指定は『.』でつなげて行う div.class1.class2展開後 <div class="class1 class2"></div> 子要素の追加は『>』 table>tr>td展開…

2011-11-17

秀丸でZenCoding

秀丸 Zen-Coding

IDEを立ち上げる程でもないちょっとした検証用HTMLサンプルを作る時とかに秀丸でZenCodingしたいなと思いぐぐったら以下がヒット。MOGAMI Shuさん作の秀丸マクロ。設定手順は氏のサイトの下記URLにあります。 http://exoego.net/archives/zencoding-in-hid…