Emmetとは
- HTMLやCSSなどのコーディングを補完してくれる機能
-
VSCodeは標準でEmmet機能を備えている
使い方
- キーワードを入力してTAB（もしくはEnter）を押すだけ
チートシート
よく使うEmmetまとめ
Syntax
要素.クラス名を追加
p.text
<p class="text"></p>
要素を指定しなければdiv要素になる
.container
<div class="container"></div>
複数指定できる
.main.mt-20.mb-50
<div class="main mt-20 mb-50"></div>
要素#id名を追加
#front-header.header
<div id="front-header" class="header"></div>
{}テキストを追加
h1.title{Emmetについて}
<h1 class="title">Emmetについて</h1>
>子要素を追加
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
+兄弟要素を追加
div+p+a
<div></div>
<p></p>
<a href=""></a>
^親要素に兄弟要素を追加
div+div>p+a^div
<div></div>
<div>
<p></p>
<a href=""></a>
</div>
<div></div>
*数字繰り返し
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
$*数字クラス名のナンバリング
ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
HTML
!HTML5のテンプレート
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
要素名各種タグ
a
<a href=""></a>
br
<br>
img
<img src="" alt="">
btn
<button></button>
input
<input type="text">
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
style
<style></style>
script
<script></script>
他のタグもモチロンあります
CSS
d:display
// d:
display: block;
// d:n
display: none;
// d:f
display: flex;
m:margin, p:padding
// m:
margin: ;
// m10
margin: 10px;
// mt20
margin-top: 20px;
// mb30
margin-bottom: 30px;
// ml40
margin-left: 40px;
// mr50
margin-right: 50px;
// paddingも同様 m -> p
bgbackground
// bg
background: #000;
// bgc
background-color: #fff;
// bgs
background-size: contain;
ffont
// f
font: 1em sans-serif;
// fw
font-weight: normal;
// fs
font-style: italic;
// fz12
font-size: 12px;
// ff
font-family: serif;
bdborder
// bd
border: 1px solid #000;
// bdn
border: none;
// bt
border-top: 1px solid #000;
// bb
border-bottom: 1px solid #000;
// bdl
border-left: 1px solid #000;
// bdr
border-right: 1px solid #000;