Learning site for website creation
Emmet

Emmet-HTML編

公開日:2020年07月03日 更新日:2021年07月01日

HTMLファイルであるか確認

拡張子「.html」で保存したファイルを編集しているか確認。

Emmetの記述をHTMLに展開

Tabキー

HTMLの基本構造を作る

HTML5 は「!」か「html:5」

!

Tabキーで展開

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

</body>
</html>
  • HTML4.01 Strict は「html:4s」
  • HTML4.01 Transitional は「html:4t」
  • XHTML1.0 Strict は「html:xs」
  • XHTML1.0 Transitional は「html:xt」
  • XHTML1.1 は「html:xxs」

要素名を記述して展開する

img

Tabキーで展開

<img alt="" />

 

入れ子構造を作る

「>」が入れ子を表す記号

ul>li

Tabキーで展開

<ul>
  <li></li>
</ul>

同じ要素を複数作る

「*」が同じ要素を複数作る記号

ul>li*3

Tabキーで展開

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

グループ化する

「( )」がグループ化の記号

ul>(li>a)*3

Tabキーで展開

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

グループ化しないと・・・

ul>li>a*3

Tabキーで展開

<ul>
  <li>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
  </li>
</ul>

要素内に文字を入れる

「{ }」が要素内文字の記号

ul>(li>a{項目})*3

Tabキーで展開

<ul>
  <li><a href="">項目</a></li>
  <li><a href="">項目</a></li>
  <li><a href="">項目</a></li>
</ul>

連番を作る

「$」が連番の記号

ul>(li>a{項目$})*3

Tabキーで展開

<ul>
  <li><a href="">項目1</a></li>
  <li><a href="">項目2</a></li>
  <li><a href="">項目3</a></li>
</ul>

「$$」で2桁の連番

ul>(li>a{項目$$})*3

Tabキーで展開

<ul>
  <li><a href="">項目01</a></li>
  <li><a href="">項目02</a></li>
  <li><a href="">項目03</a></li>
</ul>

属性を指定する

[属性名=属性値]が属性指定の記号

ul>(li>a[href=menu$.html]{項目$$})*3

Tabキーで展開

<ul>
  <li><a href="menu1.html">項目01</a></li>
  <li><a href="menu2.html">項目02</a></li>
  <li><a href="menu3.html">項目03</a></li>
</ul>

id属性を指定する

「#」がid属性指定の記号

ul#nav>(li>a[href=menu$.html]{項目$$})*3

Tabキーで展開

<ul id="nav">
  <li><a href="menu1.html">項目01</a></li>
  <li><a href="menu2.html">項目02</a></li>
  <li><a href="menu3.html">項目03</a></li>
</ul>

class属性を指定する

「.」がclass属性指定の記号

ul#nav>(li.menu$$>a[href=menu$.html]{項目$$})*3

Tabキーで展開

<ul id="nav">
  <li class="menu01"><a href="menu1.html">項目01</a></li>
  <li class="menu02"><a href="menu2.html">項目02</a></li>
  <li class="menu03"><a href="menu3.html">項目03</a></li>
</ul>

セットタグをまとめて作る

「+」がtableやdl等のセットタグまとめて作成の記号
※最小構成なので後からコピペすることになる

table+

Tabキーで展開

<table>
  <tr>
    <td></td>
  </tr>
</table>