webサイト制作の勉強 | web-sync

webサイト制作の勉強を2014年8月後半から始めました。このページはその履歴を残すために作成しています。

【まとめ】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>

.row

<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

&lt;html&gt;
&lt;body&gt;
  &lt;div id="main"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
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>