【まとめ】Emmet省略コード (Dreamweaver)
DreamweaverにEmmetを導入したので、よく使用する省略コードと展開されたものをまとめてみた。
省略コードはドットインストールを参考にしました。
こちらも参照Cheat Sheet
よくHTMLで使用するコード(a,div,ul,liなど)
!
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> </head> <body> </body> </html>
a
<a href=""></a>
img
<img src="" alt="">
div#header
<div id="header"></div>
span.item
<span class="item"></span>
div#main.blue.red
<div id="main" class="blue red"></div>
#wrapper
<div id="wrapper"></div>
<ul>.item</ul> <ul><li class="item"></li></ul>
<table><tr class="row"></tr></table>
a href="">.link
<a href=""><span class="link"></span></a>
階層的な要素 (>,+,^)
ul>li
<ul> <li></li> </ul>
div+div+div>p
<div></div> <div></div> <div> <p></p> </div>
ul>li^div
<ul> <li></li> </ul> <div></div>
要素の繰り返しと連番(*,$)
ul>li*3
<ul> <li></li> <li></li> <li></li> </ul>
ul>li.item$*3
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>
ul>li.item$$*3
<ul> <li class="item01"></li> <li class="item02"></li> <li class="item03"></li> </ul>
ul>li.item$@-*3
<ul> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
ul>li.item$@5
<ul> <li class="item5"></li> </ul>
table>tr*3>td*4
<table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>
tr>td*3
<tr> <td></td> <td></td> <td></td> </tr>
(ul>li*3)*2
<ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul>
(#main>(ul>li>*3)*2)+#footer>p
<div id="main"> <ul> <li></li> </ul> <ul> <li></li> </ul> </div> <div id="footer"> <p></p> </div>
a[title]
<a href="" title=""></a>
a[title=hello]
<a href="" title="hello"></a>
input[type=text name="name" id="name"]
<input type="text" name="name" id="name">
div{hello}
<div>hello</div>
a{click me}
<a href="">click me</a>
p>lorem
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, in, dicta, minus aliquid repudiandae iste praesentium consequuntur ea ipsa veritatis iusto velit asperiores quo. Modi, aut error incidunt hic nihil.</p>
p>lorem5
<p>Lorem ipsum dolor sit amet.</p>
フィルター
e |
-
-
-
-
-
-
- -
-
-
-
-
-
html>body>#main|e
<html> <body> <div id="main"></div> </body> </html>
c |
-
-
-
-
-
-
- -
-
-
-
-
-
#main>.sub>p*3|c
<div id="main"> <div class="sub"> <p></p> <p></p> <p></p> </div> <!-- /.sub --> </div> <!-- /#main -->
s |
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
ul>li*3|s
<ul><li></li><li></li><li></li></ul>
haml |
-
-
-
-
-
-
- -
-
-
-
-
-
html>body>#main>p*3
%html %body #main %p %p %p
CSS
m
margin: ;
m10
margin: 10px;
m10-20-30-40
margin: 10px 20px 30px 40px;
m10--20-30-40
margin: 10px -20px 30px 40px;
p
padding:
p10
padding: 10px;
w100p
width: 100%;
c#999
color: #999;
c#a
color: #aaa;
z100
z-index: 100;
actions wrapp with abbreviation
ctrl+w(wrap)
ul>list{item$}*3 <ul> <list>item1</list> <list>item2</list> <list>item3</list> </ul>