今回はHTMLで使用するエメットについて書いていきたいと思います。
今回の記事は自分の学習記録・備忘録のために書いたものです。
以下のサイト参考にしました。（今回の記事は下記サイトをほぼ丸写しさせてもらったものです！自分のオリジナルの文章・項目もありますが…）

こちらの方が詳細に説明をされていますので良かったらリンク先にもジャンプしてみてください。▼

エメットとは？

HTML CSSを省略して記述できるツール・プラグイン。

英語版のwikipediaを翻訳してemmetの由来を調べてみましたが、emmetは蟻という意味で、emit(動詞、放出する)と掛け合わせているように説明していました。日本語でemmetの名前の由来は僕が調べた範囲では、はっきり説明しているサイトは見つけることができませんでした。

HTMLでの書き方

要素名

ネストした要素（ ＞ ）

同じ要素を繰り返す（ * を使用）

繰り返す要素でネストする

兄弟要素にする（ ＋ ）

同じ階層のインデントを記述したい時に使います。

1つ上の要素にもどる（ ^ ）

インデントを一つ上の階層に戻したい時に使います。

要素にIDを付ける（ # ）

要素にクラスを付ける（ . ）

連番をつける（ $* ）

クラス名などで連番をつけたい時に使います。

要素に属性をつける（ [] ）

IDやクラス以外の属性を使いたい場合は、「[]」内に属性を入力します。

要素にテキストを入れる（ {} ）

要素にテキストを入れたい場合は、「{}」を使います。

CSSでの書き方

プロパティ

タイプ数を大幅に省略することができます。

単位

数値に単位を指定しないとデフォルトで「px」が指定されます。明示的な単位を指定すると他の単位にできます。
「無記入」→「 px 」
「 p 」→「 % 」
「 e 」→「 em 」
「 r 」→「 rem 」

ベンダープレフィックス

まず、ベンダープレフィックスとは何か？についてですが、CSSのプロパティの拡張機能をさまざまなブラウザに実装するために付け加えられる接頭辞です。（-ms-や-webkit-）
ベンダープレフィックスについてもエメットで作業を大幅に省略できます。

対応エディター・サービス

Visual studioやAdobe Dream Weaverなど、主要エディターの他に多くのエディターで使用することができます。
例えばVisual Studioでは、「Web Essentials」という拡張機能がサポートしています。

ダウンロードページ：http://emmet.io/download/

エメットをユーザー辞書に登録

頻繁に使用する長文のエメットは、ユーザー辞書などに登録しておくと非常に便利だと学校の先生がおっしゃっていました。

まとめ

エメットを使いこなせればかなりの時間を省略することができるので、複雑なエメットも使いこなせるよう日々努力していきたいです。