説明

Emmetは、HTMLやCSSを効率的に記述するためのプラグインです。初めのうちはプログラミングの学習に集中し、このような記法があることに気が付きませんでした。以下に使用例を記載します。tabキーを押すことで展開されます。

●HTMLの場合

<!DOCTYPE html>
<html lang=“ja”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <title>Document</title>
</head>
<body>
</body>
</html>

div

<div></div>

<a href=“”></a>

div#top

<div id=“top”></div>

div.container

<div class=“container”></div>

div#section.btn.twitter

<div id=“section” class=“btn twitter”></div>

p{hello}

<p>hello</p>

p*3

<p></p>
<p></p>
<p></p>

div.item*4

<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>

ダミー文章を入力する事もできます。

<p>lorem</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum illum reprehenderit vel rem mollitia, consequatur facilis sapiente earum, voluptatem veritatis officia iusto debitis expedita ducimus excepturi omnis quas voluptas nostrum?</p>

●CSSの場合

margin: ;

padding: ;

ピクセルを指定することでもできます。

m10

margin: 10px;

m10-20-30

margin: 10px 20px 30px;

他にも以下のように、省略して記述することも出来ます。

bgc

background-color: #fff;

fsz

font-size: ;

pos

position: relative;

このようにEmmetを使用すればコーディングが捗ります。

Emmetの記法について

説明

●HTMLの場合

●CSSの場合