Emmet 使用方法

11043 ワード

SublimeText3 SublimeText3 テキストリンク

Emmetショートカット : control + e

HTML

基本

.(ドット)はclass、#(シャープ)はidの表記となる。

例) Emmet : .border
展開 : <div class="border"></div>

HTMLひな形

! , html:5

上記の入力だけでHTML5のひな形を記述できる。

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

</body>
</html>

html:4

HTML4のひな形を記述できる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

[繰り返し] タグ名*数字

nav > ul#menu > li*5 > a [ href = # ]

li*5とすると、liを5回繰り返す指定となる。
タグ名の後ろに"*数字"を入れることで、そのタグを指定した数字分繰り返すという指定となる。

<nav>
   <ul id = "menu" >
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
  </ul>
</nav>

連番、テキスト入力

.text{サンプル$}*3

{}の中にテキストを書き込むとタグの中身となる。
$を入力すると、連番として表記される。

<div class="text">サンプル1</div>
<div class="text">サンプル2</div>
<div class="text">サンプル3</div>

.test{サンプル２桁$$}*5

$$で、連番01,02,03...と表記される。

<div class="test">サンプル2桁01</div>
<div class="test">サンプル2桁02</div>
<div class="test">サンプル2桁03</div>
<div class="test">サンプル2桁04</div>
<div class="test">サンプル2桁05</div>

階層を上げて展開

div + div > h1 > span ^ p

^を入力すると、^以降のタグの階層が1段階上がる。

<div></div>
<div>
    <h1><span></span></h1>
    <p></p>
</div>

グループ化の展開

div > (header > ul > li*2 > a) + footer > p

()で１つのグループを作ることができる。

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

タグ属性の展開

div[data-foo]

[]で属性を指定できる。

<div data-foo=""></div>

td [ rowspan=2 colspan=3 title ]

<td rowspan="2" colspan="3" title=""></td>

ダミーテキストの挿入

p*3 > lorem

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi vero, porro ullam magni voluptatum id dolor! Rerum iure beatae quas, cupiditate debitis vel repudiandae corporis, iste. Porro doloribus, eius ipsam.</p>
<p>Molestias molestiae officiis hic nesciunt id, deserunt in sint repellendus sequi! Distinctio aut ea culpa recusandae voluptatibus enim saepe laborum, placeat praesentium dolores vel, amet, impedit quos atque. Iste, provident.</p>
<p>Cumque voluptatem consequatur, consectetur possimus, aperiam, aut alias at voluptas magnam temporibus corporis debitis animi minima atque molestiae nam. Dolorem necessitatibus eos rem magnam, qui explicabo nam temporibus cumque. Voluptas.</p>

CSS

複数行まとめて展開できない
基本的に"-"で繋がるプロパティ名は、頭文字を打てばOK
先頭に"-"を打つと、ベンダープレフィックスを適切に入れてくれる

基本

単位はだいたいが省略しても"px"を入れてくれるので数字だけ打てば良い。

tac

text-align : center;

db

display : block;

m:a

margin: auto;

tdn

text-decoration : none;

posl

position: relative;

poa

position: absolute;

pf

position: fixed;

w100

width: 100px;

fsz12

font-size: 12px;

fsz12pt

font-size: 12pt;

"+"を最後につける

bg+

background: #fff url() 0 0 no-repeat;

f+

font: 1em Arial,sans-serif;

bd+

border: 1px solid #000;

ベンダープレフィックス

複数カーソルに対応しているので、同時に書き換えが可能
必要な分だけプレフィックスをつけてくれる。(ブラウザの進化ごとにEmmetもアップデートされるので)

-bx

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

-bxc

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

-bxs

-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;

-trans

-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;

-bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;

bdrs10

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

値の展開

w100 , w100p , w100e , w100x

width: 100px;
width: 100%;
width: 100em;
width: 100ex;

色のプロパティ展開

c#1 , c#e0 , c#fc0

color: #111;
color: #e0e0e0;
color: #fco;