Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

Zen-Coding

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

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

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

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

Emmet(Zen-Coding)

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

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>

HTML5新要素 navタグ

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

HTML5新要素 sectionタグ

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

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>

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>

Zen-Coding Eclipse Plugin

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

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展開…

秀丸でZenCoding

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