便利なEmmet

そんなにガシガシ使いこなしている訳ではないですが、
(効率を要求されるような仕事もしてないですし。)
やはり知っていると便利な「Emmet」

SublimeTextやAtomをお使いの場合は、
プラグインをインストールする必要がありますが、
Dreamweaverはデフォなので、
同ソフトをお使いの方は覚えておいて損はないですよね。

今回はそんな「Emmet」をチートだけ備忘録(←ダジャレ)
まあ、公式のチートシート見ればいいんですけどね(^_^;)

まず、「Emmet」の展開方法は以下の通り

Dreamweaver → 「tab」キー
SublimeText、Atom → 「Ctrl」 + 「e」

あとは下記記号を入力後、上記方法で展開するだけ。

「Emmet」の基本
記号 意味
# id設定 div#hoge
. class設定 div.hoge
> ネスト ul>li
hoge+ 内包子要素展開 ul+
hoge+hoge 同階層 div>h1+ul
* かける li*5
{} テキスト div{hoge}
HTML構文など
記号 意味
! html5全文
!!!xt XHTMLドキュメント宣言(transitional)
!!!4s HTML4ドキュメント宣言(strict)
html:xt XHTML全文(transitional)
html:4t HTML4全文(transitional)
meta:vp metaタグviewport指定
link:css linkタグstylesheet指定
bq blockquoteタグ
btn buttonタグ
CSS
記号 展開後
pos position: relative;
pos:a position: absolute;
fl float: left;
fl:r float: right;
m:a margin: auto;
m10 margin: 10px;
m10-20 margin: 10px 20px;
w100 width: 100px;
bg+ background: #fff url() 0 0 no-repeat;
bd+ border: 1px solid #000;
bx -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

※Emmetのアップデートによってベンダープレフィックスも最新のものが付くようです。

軽くご紹介しましたが、慣れると結構、勘でいけたりしますw
詳しくは公式のチートシートをご覧くださいませ。

SNSでもご購読できます。