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の使い方

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Emmetの使い方

Similar to Emmetの使い方 (6)

More from Yossy Taka

More from Yossy Taka (18)

Recently uploaded

Recently uploaded (8)

Emmetの使い方