主に使うEmmet短縮記述構文

※ゴーレムを滅するのにEmeth(真理)の頭文字のEを消してmeth(死)にする、という話を思い出してしまう。
emet,emeth,emes.
主に使うEmmet短縮記述構文
※私が個人的に主に使う、という意味です。table | table>(tr>td*3)*10 | td×数、(tr>td)×数、算数ですね。テーブル作成時に活躍します。コピペで作るよりずっと簡単で早いです。楽です。 |
list | ul>li*3>ol*5 | リスト作成時もテーブルと同様、やはりEmmet記法を使った方が楽です。特に入れ子状態になったようなリストだと楽さが違いますね。 |
class | p.minititle .wakudash span.haikeiao |
. だけだと自動的にdivになります。それ以外を使いたい時は手入力。 . の後ろがクラス名になります。 |
html | ! | ページを作る時の大枠の構造ですね。これはHTML5ですが、これ以外にも各種あります。 |
※単語の日本語訳は自分独自解釈ですので、特にこれといった決まった日本語定型句があるわけではないので、自分で勝手にわかりやすい感じの日本語にしているので、間違っている言葉もあると思います。
/) ///) こまけぇこたぁいいんだよ!! /,.=゙''"/ / i f ,.r='"-‐'つ____ / / _,.-‐'~/⌒ ⌒\ / ,i ,二ニ⊃( ●). (●)\ / ノ il゙フ::::::⌒(__人__)⌒::::: \ ,イ「ト、 ,!,!| |r┬-| | / iトヾヽ_/ィ"\ `ー'´ /
Bracketsはこれが出来ないのが不便
けどこれはUpdateされて解消される可能性大。
(2014年5月22日現在)
●改行を含む文字列の検索と置換が出来ない。
・SublimeTextでは普通に出来てたので、これが出来ないのは不便。
●imgのwidthとheightの自動入力が出来ない。
・SublimeTextでは出来た。これはその内Brackets用のEmmetプラグインがアップデートされれば出来るようになるんじゃないかと思われ。
Emmetの構文規則
短く書かれた算数式みたいな構文の後ろで「Tabキー」または「Ctrl+Alt+Enter」キーを押すことでHTMLに展開される。※↑Brackets上のキー操作です。SublimeTextだとCtrl+Eですね。
子要素: >
nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
同列加算: +
div+p+bq
<div></div> <p></p> <blockquote></blockquote>
段上げ: ^
div+div>p>span+em^bq
<div></div> <div> <p> <span></span> <em></em> </p> <blockquote></blockquote> </div>
div+div>p>span+em^^bq
<div></div> <div> <p> <span></span> <em></em> </p> </div> <blockquote></blockquote>
カッコ: ()
div>(header>ul>li*2>a)+footer>p
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
(div>dl>(dt+dd)*3)+footer>p
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>
掛ける: *
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
番号付け: $
ul>li.item$*5
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>
ul>li.item$$$*5
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>
ul>li.item$@-*5
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
ul>li.item$@3*5
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
ID CLASS 属性
#header
<div id="header"></div>
.title
<div class="title"></div>
form#search.wide
<form id="search" class="wide"></form>
p.class1.class2.class3
<p class="class1 class2 class3"></p>
サイト独自属性の割り当て
p[title="Hello world"]
<p title="Hello world"></p>
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文字の挿入: {}
a{Click me}
<a href="">Click me</a>
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
クラス名: .
.class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul> <li class="class"></li> </ul>
table>.row>.col
<table> <tr class="row"> <td class="col"></td> </tr> </table>
HTML
未知の略語は全てタグに変換されます。[例] foo → <foo></foo>
!
Alias of html:5
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>
a
<a href=""></a>
a:link
<a href="http://"></a>
html:5
Alias of !!!+doc[lang=${lang}]
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>
ol+
Alias of ol>li
<ol> <li></li> </ol>
ul+
Alias of ul>li
<ul> <li></li> </ul>
dl+
Alias of dl>dt+dd
<dl> <dt></dt> <dd></dd> </dl>
map+
Alias of map>area
<map name=""> <area shape="" coords="" href="" alt="" /> </map>
table+
Alias of table>tr>td
<table> <tr> <td></td> </tr> </table>
その他の記述方法や構文は公式サイトのチートシートをどうぞ。
- 関連記事
-
-
Emmetいいねー 2014/05/17
-
よく使うEmmetのショートカット(日本語化一覧) 2014/05/21
-
主に使うEmmet短縮記述構文 2014/05/22
-
コメントの投稿