ユーザ用ツール

サイト用ツール


サイドバー

用語:emmet

以前のリビジョンの文書です


Emmet

HTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン。

HTMLドキュメント ! ! 空のHTMLファイルを開いて、その先頭に「!」を記述し、[Tab]キーを押すと、HTMLドキュメントのひな型が生成される
HTML要素 要素名 div、aなど 要素名をそのまま記述(divは「

」に、aは「<a href=“></a>」に展開される

子要素 > div>p <div>要素内に<p>要素を入れ込む
兄弟要素 + div>p+p 2つの<p>要素が、<div>の直接の子要素となる
要素間の関係を上昇 div>ul>li*3p <ul>要素と<p>要素が、<div>要素の直接の子要素となる
繰り返し * li*3 <li>要素を3つ生成する
テキスト {……} li*3{item} <li>要素を3つ生成して、そのテキストを「item」とする
ナンバリング {}内で$ li*3{item $} <li>要素を3つ生成して、そのテキストを「item 1」~「item 3」とする
ナンバリングの桁揃え {}の$の数で調整 li*3{item $$$} <li>要素を3つ生成して、そのテキストを「item 001」~「item 003」とする
グルーピング () div>(ul>li*3>a)+div かっこで囲まれた要素と2つ目のdiv要素が兄弟要素となる
IDの指定 # div#myid <div>要素のID属性値を「myid」とする
クラスの指定 . ul>li*3.myclass <ul>要素の下に<li>要素を3つ作成し、各<li>要素のclass属性値を「myclass」とする
カスタム属性 []内に記述 input[type=“text”] <input type=“text”>要素を生成
用語/emmet.1538292301.txt.gz · 最終更新: 2018/09/30 16:25 by ips