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」
要素名を記述して展開する
imgTabキーで展開
<img alt="" />
入れ子構造を作る
「>」が入れ子を表す記号
ul>liTabキーで展開
<ul> <li></li> </ul>同じ要素を複数作る
「*」が同じ要素を複数作る記号
ul>li*3Tabキーで展開
<ul> <li></li> <li></li> <li></li> </ul>グループ化する
「（ ）」がグループ化の記号
ul>(li>a)*3Tabキーで展開
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>グループ化しないと・・・
ul>li>a*3Tabキーで展開
<ul> <li> <a href=""></a> <a href=""></a> <a href=""></a> </li> </ul>要素内に文字を入れる
「{ }」が要素内文字の記号
ul>(li>a{項目})*3Tabキーで展開
<ul> <li><a href="">項目</a></li> <li><a href="">項目</a></li> <li><a href="">項目</a></li> </ul>連番を作る
「$」が連番の記号
ul>(li>a{項目$})*3Tabキーで展開
<ul> <li><a href="">項目1</a></li> <li><a href="">項目2</a></li> <li><a href="">項目3</a></li> </ul>「$$」で2桁の連番
ul>(li>a{項目$$})*3Tabキーで展開
<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]{項目$$})*3Tabキーで展開
<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]{項目$$})*3Tabキーで展開
<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]{項目$$})*3Tabキーで展開
<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>
同じタグのコンテンツ
同じカテゴリーのコンテンツ
