Emmetの使い方

Emmetを使おう
みんなが大好きEmmet

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved.
2
Emmetとは
• Emmetの特徴
– HTML・CSSの省略記法で簡単に入力
– ショートカットキーのように使える
• 対応エディタ
– Dreamweaver CC 2015（ネイティブサポート）
– Brackets（拡張機能→’Emmet’を追加）
– Sublime Text 3（Package→’Emmet’を追加）
– Atom（プラグイン→’Emmet’を追加）

5
Emmet記述方法
• ！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
|
</body>
</html>
Tabキー

7
要素名Tab
• h1
• link
• img
• input
Tabキー <h1>|</h1>
Tabキー <link rel="stylesheet" href="|" />
Tabキー <img src="|" alt="" />
Tabキー <input type="text" />

9
要素:属性Tab
• script:src
• input:r
• form:post
Tabキー <script src="|"></script>
Tabキー
Tabキー
<form action="|" method="post"></form>
<input type="radio" name="|" >

11
id/classの指定
• #header
• .title
• p.c1.c2.c3
Tabキー <div id="header">|</div>
Tabキー
Tabキー <p class="c1 c2 c3">|</p>
<div class="title">|</div>

13
複数要素の基本
• ＋は要素の併記
div+p
• ＞は子孫要素
ul>li
• ＊は複数要素
li＊2
Tabキー
<div></div>
<p></p>
Tabキー
<ul>
<li></li>
</ul>
Tabキー
<li></li>
<li></li>

14
複数要素
• nav>ul>li Tabキー
<nav>
<ul>
<li></li>
</ul>
</nav>

15
複数要素
• ul>li*5>a Tabキー
<ul>
<li><a href=""></a></li>
</ul>

16
複数要素
• ul>li.item$*5 Tabキー
<ul>
<li class="item1"></li>
</ul>

18
要素名Tab
• m
• mt
• bd
• bd+
Tabキー margin:|;
Tabキー margin-top:|;
Tabキー border:|;
Tabキー border:1px solid #000;

19
要素名Tab
• bxz
• pos
• trf
• ta:c
Tabキー box-sizing:border-box;
Tabキー position:relative;
Tabキー transform:|;
Tabキー text-align:center;

詳しくは
cheat-sheetを参考に

Emmetの使い方

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (7)

Semelhante a Emmetの使い方

Semelhante a Emmetの使い方 (6)

Mais de Yossy Taka

Mais de Yossy Taka (18)

Emmetの使い方