HTML
HTML5
emmet
初心者向け
新人プログラマ応援

最低限押さえておきたいEmmet省略記法(HTML)

More than 1 year has passed since last update.

divやpなどタグ名を覚えていれば展開できるものに関しては省いて紹介していきます。


子要素として展開 >

nav>ul>li


展開後

<nav>

<ul>
<li></li>
</ul>
</nav>


同階層に展開 +

div+div+p


展開後

<div></div>

<div></div>
<p></p>


上の階層に展開 ^

div>p^ul>li


展開後

<div>

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


複数要素の展開 *

ul>li*4


展開後

<ul>

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


要素のグループ化 ()

(ul>li)*3


展開後

<ul>

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


id・classの付与 # .

div#header+div.container.about>div.main+div.side^div#footer


展開後

<div id="header"></div>

<div class="container about">
<div class="main"></div>
<div class="side"></div>
</div>
<div id="footer"></div>


属性の付与 []

p[title="Hello world"]

table>tbody>tr>td[rowspan=2 colspan=3]


展開後

<p title="Hello world"></p>

<table>
<tbody>
<tr>
<td rowspan="2" colspan="3"></td>
</tr>
</tbody>
</table>



連番展開 $ @- @

ul.list-A>li.item$*4

ul.list-B>li.item$$*4

ul.list-C>li.item$@-*4

ul.list-D>li.item$@3*4


展開後

<ul class="list-A">

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>

<ul class="list-B">
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
<li class="item04"></li>
</ul>

<ul class="list-C">
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>

<ul class="list-D">
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
</ul>



テキスト入力 {}

p{text}

ul>li*3>a{link-text$$}


展開後

<p>text</p>

<ul>
<li><a href="">link-text01</a></li>
<li><a href="">link-text02</a></li>
<li><a href="">link-text03</a></li>
</ul>



HTML雛形 !

!


展開後

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>



metaタグ viewport指定 meta:vp

meta:vp


展開後

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />



主な省略タグ

タグ
展開後

a:link
<a href="http://"></a>

a:mail
<a href="mailto:"></a>

link:css
<link rel="stylesheet" href="style.css" />

link:print
<link rel="stylesheet" href="print.css" media="print" />

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

link:touch
<link rel="apple-touch-icon" href="favicon.png" />

meta:vp
<meta name="viewport" content="width=device-width, user-sc

script:src
<script src=""></script>

bq
<blockquote></blockquote>

cap
<caption></caption>

btn
<button></button>

sect
<section></section>

art
<article></article>

str
<strong></strong>

mn
<main></main>