用語:emmet
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
用語:emmet [2018/09/30 16:25] ips |
用語:emmet [2018/09/30 16:35] (現在) ips |
||
|---|---|---|---|
| ライン 3: | ライン 3: | ||
| HTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン。 | HTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン。 | ||
| - | ^ HTMLドキュメント ^ ! | ! | 空のHTMLファイルを開いて、その先頭に「!」を記述し、［Tab］キーを押すと、HTMLドキュメントのひな型が生成される | | + | VS Codeで標準でインストールされているのでいきなり使用するのみ。 |
| - | | HTML要素 | 要素名 | div、aなど | 要素名をそのまま記述（divは「<div></div>」に、aは「<a href="></a>」に展開される | | + | |
| - | | 子要素 | > | div>p | <div>要素内に<p>要素を入れ込む | | + | [[https://docs.emmet.io/abbreviations/|Emmet Documentation]] |
| - | | 兄弟要素 | + | div>p+p | 2つの<p>要素が、<div>の直接の子要素となる | | + | |
| - | | 要素間の関係を上昇 | ^ | div>ul>li*3^p | <ul>要素と<p>要素が、<div>要素の直接の子要素となる | | + | [[https://docs.emmet.io/cheat-sheet/|チートシート]] |
| - | | 繰り返し | * | li*3 | <li>要素を3つ生成する | | + | |
| - | | テキスト | {……} | li*3{item} | <li>要素を3つ生成して、そのテキストを「item」とする | | + | |
| - | | ナンバリング | {}内で$ | li*3{item $} | <li>要素を3つ生成して、そのテキストを「item 1」～「item 3」とする | | + | | HTMLドキュメント | 空のHTMLファイルを開いて、その先頭に「!」を記述し、［Tab］キーを押す | |
| - | | ナンバリングの桁揃え | {}の$の数で調整 | li*3{item $$$} | <li>要素を3つ生成して、そのテキストを「item 001」～「item 003」とする | | + | | 要素 | 要素名をそのまま記述。div や a など | |
| - | | グルーピング | () | div>(ul>li*3>a)+div | かっこで囲まれた要素と2つ目のdiv要素が兄弟要素となる | | + | | 子要素 | div>p。<div>要素内に<p>要素を入れ込む。 | |
| - | | IDの指定 | # | div#myid | <div>要素のID属性値を「myid」とする | | + | | 繰り返し | li*3。<li>要素を3つ生成する。 | |
| - | | クラスの指定 | . | ul>li*3.myclass | <ul>要素の下に<li>要素を3つ作成し、各<li>要素のclass属性値を「myclass」とする | | + | | テキスト | li*3{item}。<li>要素を3つ生成して、そのテキストを「item」とする。 | |
| - | | カスタム属性 | []内に記述 | input[type="text"] | <input type="text">要素を生成 | | + | | ナンバリング | li*3{item $}。<li>要素を3つ生成して、そのテキストを「item 1」～「item 3」とする。 | |
| + | | ナンバリングの桁揃え | li*3{item $$$}。 | | ||
| + | | IDの指定 | div#myid。 | | ||
| + | | クラスの指定 | ul>li*3.myclass。 | | ||
| + | | カスタム属性 | input[type="text"]。 | | ||
用語/emmet.1538292301.txt.gz · 最終更新: 2018/09/30 16:25 by ips
