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>
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.