イマサラナガラ感満載ですが、年末の季節イベント等での実店鋪多忙によるコーディング離れで、
多々ど忘れすることありますので、メモっときます。
Emmetの導入
Sublime text2なのでPackage Controlインストールありきで、Emmetのpackageを追加。
展開
Ctrl + E
↑↑ 忘れないで ↑↑
コーディングの効率化例
HTMLの雛形
たとえば、サイト制作時に毎度書く下記のようなソースを、”html:5″で展開。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
上の階層へ戻る
これまでの”()”で囲う必要がなくなり、”^”で階層を一段階上に上がる事が出来るようになりました。
<-- これまで(Zencoding) --> (#header>(.nav+.logo))+#wrapper<!-- 展開は「tab」 --> <-- emmetの場合 --> #header>.nav+.logo^#wrapper#header>.nav+.logo^#wrapper
地味にグッジョブ!
ダミーテキスト挿入
p*2>lorem
で展開すると、
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor sint aspernatur sit nostrum nisi asperiores vel. Nihil tempore a quia et ducimus quidem beatae impedit rerum provident maxime non assumenda.</p> <p>Assumenda consequatur porro commodi molestiae eum aut inventore aperiam voluptates pariatur reprehenderit facere est eos earum repellat aliquam magnam dignissimos vitae nisi dolore placeat ab distinctio mollitia modi nobis quasi.</p>
よくあるナビゲーション
<nav> <ul id="menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav>
上記のような、よくあるナビゲーションも
nav>ul#menu>li*5>a[href=#]
で展開。
連番化
ごくたまにありますよね。連番作るの^^
ul>li.nav${メニュー$}*6
で展開すると、以下のように。
<ul> <li class="nav1">メニュー1</li> <li class="nav2">メニュー2</li> <li class="nav3">メニュー3</li> <li class="nav4">メニュー4</li> <li class="nav5">メニュー5</li> <li class="nav6">メニュー6</li> </ul>
CSS編
以下に例をあげてみますと、
db => display: block; m:a => margin: auto; p10 => padding: 10px; pb10 => padding-bottom: 10px; tdn => text-decoration: none; posl => position: relative; poa => position: absolute; pf => position: fixed; w100 => width: 100px; fsz12 => font-size: 12px; fsz12pt => font-size: 12pt;
ベンダープレフィックス
-bxs -webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color;
-bdrs10 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
などなど、コーディングにおける効率化さまさまです。
[amazonjs asin=”4844329456″ locale=”JP” title=”HTML+CSSコーディングが10倍速くなるZen Coding”]