K-fix Learning & Playing

Editor


Emmet

Emmet(エメット)は、HTMLやCSSのコードを効率的に記述するための便利な機能の1つです。Emmetを使うと、省略した記法でコードを入力し、EnterキーまたはTabキーを押すだけで自動的に展開(入力)されます。

HTMLの要素(Element)の入力、CSSのプロパティと値の入力の効率化をアップしてくれます。

HTMLでの基本的な記述方法は以下のようになります。略語を記述した後に、TabキーまたはEnterキーを押してコードを展開します。

  • !:DOCTYPE宣言の展開
  • 要素名:開始タグと終了タグを挿入
  • #id名:タグにid属性を付与
  • .class名:タグにclass属性を付与
  • >:要素を入れ子構造で展開(親要素>子要素>孫要素)
  • +:兄弟要素(並列関係)で展開
  • ^:1つ上の階層で展開
  • *数字:繰返し入力(同じタグを複数展開)
  • $:連番の数字を展開
  • ():グループとしてまとめて展開
  • {}:コンテンツの挿入

CSSでのEmmetの記述法は以下の通りです。

  • プロパティの展開:m → margin: | bg → background: | c → color: | ! → !important
  • 値を代入して展開:w100 → width:100px;
  • 複数プロパティの一括書き出しm0-a-30+fz18+fwb → margin:0 auto 30ox;font-size:18px;font-weight:bold;
  • 値の単位:w10p → width:10%; | w10e → width:10em; | w10r → width:10rem; | w10 → width:10px;