基本的な使い方
Emmetの使い方は、
各エディタやOS、設定によって微妙にショートカットが変わる可能性があるので、 もし展開がされなかったら、ググってみてください。
ショートカットは、基本的にCtrl + eになっていると思います。
Emmetのコードを入力して、その行末でショートカット押せば
カーソル以前のEmmetコードが展開されます。
HTML編
EmmetでHTMLを書く際最低限知っておくと便利なのは、
· HTMLのひな形を一瞬で作れる
· idは#、classは.
· タグを表すための<と>は不要。タグ名だけでいい
· 入れ子にする際にはA>Bのように>を使う
· 展開した時に連番にしたいときは$を使う
· 属性を表すときは、[属性名=値]と書く。値に"は不要
· 各タグにいい感じにデフォルト属性をつけてくれる
基本これだけで恩恵を受けられます。
CSSやjQueryを使ったことが有る方なら、すぐ馴染めると思います。
他にも()でグループ化したり、^で階層を上に戻ったりできますが、
そこら辺は割愛します。
基本形
ごくごくベーシックな例を出すと、
| 1 | link |
headタグ内に必ず入れると思います。
これを展開すると、
| 1 | <link rel="stylesheet" href=""> |
と、rel="stylesheet"、href=""を付加した状態にしてくれます。
メニュー
よくあるメニューは、こんな感じになると思います。
| 1 | nav>ul#menu>li*5>a[href=#] |
navの中にidがmenuのulを入れて…という具合です。
これを展開するとこんな感じになります。
| 1 2 3 4 5 6 7 8 9 | <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> |
liに*5とついていますが、タグ名の後ろに*数字を入れることで、
そのタグを指定した数字分繰り返しますよー
とうい指定をすることができます。
連番
最近は連番を使う機会があまりないのですが、
たまに使う時でもあると便利です。 連番を利用するには$を使います。
| 1 | .thumb{サンプル$}*6 |
今回はタグ名がありません。
タグ名を省略すると、デフォルトではdivになります。
ulの中でタグ名を省略するとliになったり、だいたいいい感じになります。
| 1 2 3 4 5 6 | <div class="thumb">サンプル1</div> <div class="thumb">サンプル2</div> <div class="thumb">サンプル3</div> <div class="thumb">サンプル4</div> <div class="thumb">サンプル5</div> <div class="thumb">サンプル6</div> |
連番って、行コピペする際に、
さりげなくも、かなり面倒な作業だと思います。
そんなときも、連番にしたい所に$を一つ置くだけで連番に出来ます。
ちなみに$$と$を２つ並べると、01、02、03…と２桁の連番になります。
HTMLのひな形
僕がよく使うDOCTYPE宣言は、HTML4.01 transitionalとHTML5なので、
とりあえずそれだけ説明します。
| 1 | ! |
なんと1文字です。びっくり。
これを展開するとHTML5のひな形が出来ます。
| 1 2 3 4 5 6 7 8 9 10 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
文字コード指定のmetaタグまで入れてくれます！！！
デフォルトだと英語なのでlangがenになってしまいますが、
設定ファイルを数文字書き換えるだけでjaにできます。
新規テキスト ドキュメント (128).txt: Sublime Text 2 ： Emmet プラグインが出力する HTML の言語を修正する
次に、HTML4.01 transitionalはこうです。
| 1 | html:4t |
これがやや覚えにくいのですが、
IEが居る限り4.01と戦わざるを得ません。何とか覚えましょう。
展開すると以下のようになります。
| 1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html> |
XHTML transitionalにしたい場合は、html:xtです。
CSS編
Emmetの記事はHTMLについて書かれている場合が結構多いのですが、
個人的にはEmmetの真価はCSSにあると思ってます。
EmmetでCSSを書く時に意識すべきことは、
· 複数行まとめて展開は出来ない
· 基本的に-で繋がるプロパティ名は、頭文字を打てばOK
· 先頭に-を打つと、ベンダープレフィックスを適切に入れてくれる
です。
慣れるまでは「むしろ面倒」と思うかもしれませんが、
慣れると、いちいちプロパティ名をフルで打つのがアホらしくなってきます。
基本形
EmmetのCSSの基本形は、こんな感じです。
| 1 | tac |
唐突すぎてわけがわかりませんね。展開してみます。
| 1 | text-align: center; |
text-align: center; と、
頭文字をつないだ文字列になっています。
他にも例を出していきます。
| 1 2 3 4 5 6 7 8 9 | db => display: block; m:a => margin: auto; tdn => text-decoration: none; posl => position: relative; poa => position: absolute; pf => position: fixed; w100 => width: 100px; fsz12 => font-size: 12px; fsz12pt => font-size: 12pt; |
このように、被るプロパティ名が多い頭文字は
少し長めに打たないと行けないのですが、たかだか5文字程度です。
単位は、多くの場合
省略してもpxを入れてくれるので数字だけ打てばOK。
他の単位を利用したい場合、明示的に書いてあげればそちらが優先されます。
+を最後につける書き方
僕も最近知りました。
上記の指定に+を組み合わせられるものがあります。
backgroundなどを一括指定する場合に使うことが多いかと思います。
| 1 2 3 | bg+ => background: #fff url() 0 0 no-repeat; f+ => font: 1em Arial,sans-serif; bd+ => border: 1px solid #000; |
ベンダープレフィックス
CSS3を使うのがやや億劫な理由の一つ、
ベンダープレフィックスさんにもしっかり対応しています。
Sublime Text2のように、複数カーソルに対応したエディタなら、
値を一度に指定することができます。
ただでさえ捗るのに、更に捗ります。
box-sizing
| 1 2 3 4 5 6 7 8 9 10 11 | -bx -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -bxc -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; |
box-shadow
| 1 2 3 4 5 | -bxs -webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color; |
transition
| 1 2 3 4 5 6 7 | -trans -webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time; |
border-radius
| 1 2 3 4 5 6 7 8 9 10 11 | -dbrs -webkit-border-radius: ; -moz-border-radius: ; border-radius: ; -bdrs10 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; |
などなど。
お分かりだと思いますが、全部が全部に付けるのではなく、
必要な分だけプレフィックスを付けてくれます。
これは、ブラウザの進化ごとに、
Emmetもアップデートする形で変更されると思うので、 ちょくちょくアップデートをかけたほうが良さそうです。
自分なりの使い方
Emmetを覚えて使うようになってから、 気にしているやEmmetが有効なタイミングも書いておきます。
展開するときに、展開前のEmmetコードを残しておく
これはコーディングする際かなり重宝しています。
htmlに展開してみて、「あ、ここの構造ミスったな」と思った時に、
展開前のEmmetコードを残しておくと、修正が非常に容易です。
特に、繰り返しのliタグの中身なんかを修正した際、
いちいち修正後をコピーして、１行ずつ貼り付け
なんてことをしなくて済みます。
スニペット管理
素のhtmlは、見ればわかるのに、やたらと行数を取ります。
Emmetのコードとして１行で残いておいて、貼り付けて、展開
とすると、管理もしやすいし、何よりかさばりません。
ちょっとした説明に
htmlやjsの話をチャットなどでしている時に、
html構造やclass、idさえ伝われば良いのに、
いちいちhtmlを書くのは冗長です。
そんなときにEmmetのコードで表現すると、
簡潔かつ要所を的確に伝えることができます。
「メニューののhtmlどうなってる？」
「nav>ul>li*3>a[href=#]だよー」
と言った具合に。
0 件のコメント:
コメントを投稿