読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

もっとコーディングが早くなる「Emmet」使い方HTML編

スポンサーリンク

1, 基本編 2, 応用

1, 基本編

control+Eで展開 idは # classは . 以下コードを使ってHTMLを記述

【入れ子】 >

div>ul>li
<div>
    <ul>
        <li></li>
    </ul>
</div>


【同じ階層】 +

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

【1つ戻る】 ^

div+div>p>span+em 
<div></div>
<div>
    <p><span></span><em></em></p>
</div>

【3つ戻る】 ^^^

div+div>p>span+em^^^bq
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

【繰り返し】 *

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

他にも 【グループ化】() 【属性】[attr] 【nの数を連番】 $n 連番は@をつける事によってオプションが 【nの数を逆順】$@-n 【指定n数からN数】$@nN 【指定n数からN数を逆順】$@-nN 【テキスト】 {} Lorem Ipsumジェネレータ(30words)】lorem or lipsumLorem Ipsumジェネレータ(10words)】lorem10 などあります。

※詳しくはリファレンス

2, 応用

#header>#header-inner>h1#site-id+.header-nav>ul>(li.nav$$>a[href="/"])*5
#footer>#footer-inner>.to-top>a[href="#header"]{ページトップへ}^(.foot-nav>(ul>(li>a[href="/"]{フッターメニュー})*5))+.address>dl>dt+dd^p.copy{Copyright(c) 2012 xxx All rights reserved.}

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

dl+ === dl>dt+dd

<dl>
    <dt></dt>
    <dd></dd>
</dl>

table+ === table>tr>td

<table>
    <tr>
        <td></td>
    </tr>
</table>

こんな感じで展開出来たりします。 【1つ戻る】 ^ が素晴らしいのですね!