1. /
  2. /
  3. 気持よくコーディング。サクサクEmmetメモ with Sublime text 2

気持よくコーディング。サクサクEmmetメモ with Sublime text 2

emmet-sub

イマサラナガラ感満載ですが、年末の季節イベント等での実店鋪多忙によるコーディング離れで、
多々ど忘れすることありますので、メモっときます。

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”]

SNSでもご購読できます。