【HTML・CSS】エメットの学習
今回はHTMLで使用するエメットについて書いていきたいと思います。
今回の記事は自分の学習記録・備忘録のために書いたものです。
以下のサイト参考にしました。（今回の記事は下記サイトをほぼ丸写しさせてもらったものです！自分のオリジナルの文章・項目もありますが…）
こちらの方が詳細に説明をされていますので良かったらリンク先にもジャンプしてみてください。▼
エメットとは？
HTML CSSを省略して記述できるツール・プラグイン。
英語版のwikipediaを翻訳してemmetの由来を調べてみましたが、emmetは蟻という意味で、emit(動詞、放出する)と掛け合わせているように説明していました。日本語でemmetの名前の由来は僕が調べた範囲では、はっきり説明しているサイトは見つけることができませんでした。
HTMLでの書き方
要素名
展開前 div
展開後 <div></div>
ネストした要素（ ＞ ）
展開前 div>a
展開後 <div><a href=""></a></div>
同じ要素を繰り返す（ * を使用）
展開前 div*3
展開後 <div></div>
<div></div>
<div></div>
繰り返す要素でネストする
展開前 div*3>a
展開後 <div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
兄弟要素にする（ ＋ ）
同じ階層のインデントを記述したい時に使います。
展開前 h1+p
展開後 <h1></h1>
<p></p>
1つ上の要素にもどる（ ^ ）
インデントを一つ上の階層に戻したい時に使います。
展開前 div>h1+p^ul>li*3
展開後 <div>
<h1></h1>
<p></p>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
要素にIDを付ける（ # ）
展開前 div#content
展開後 <div id="content"></div>
要素にクラスを付ける（ . ）
展開前 div.content.body
展開後 <div class="content body"></body>
連番をつける（ $* ）
クラス名などで連番をつけたい時に使います。
展開前 div.item-$*3
展開後 <div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
要素に属性をつける（ [] ）
IDやクラス以外の属性を使いたい場合は、「[]」内に属性を入力します。
変更前 img[title="sample" alt="image"]
変更後 <img src="" alt="image" title="sample">
要素にテキストを入れる（ {} ）
要素にテキストを入れたい場合は、「{}」を使います。
変更後 a{リンク}
変更前 <a href>リンク</a>
CSSでの書き方
プロパティ
タイプ数を大幅に省略することができます。
展開前
w100+h200+m10-0-10-10+tac
展開後
width: 100px;
height: 200px;
margin: 10px 0 10px 10px;
text-align: center;
単位
数値に単位を指定しないとデフォルトで「px」が指定されます。明示的な単位を指定すると他の単位にできます。
「無記入」→「 px 」
「 p 」→「 % 」
「 e 」→「 em 」
「 r 」→「 rem 」
展開前
w200+h100p+m10e+p10r
展開後
width: 200px;
height: 100%;
margin: 10em;
padding: 10rem;
ベンダープレフィックス
まず、ベンダープレフィックスとは何か？についてですが、CSSのプロパティの拡張機能をさまざまなブラウザに実装するために付け加えられる接頭辞です。（-ms-や-webkit-）
ベンダープレフィックスについてもエメットで作業を大幅に省略できます。
展開前
-bx
展開後
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
対応エディター・サービス
Visual studioやAdobe Dream Weaverなど、主要エディターの他に多くのエディターで使用することができます。
例えばVisual Studioでは、「Web Essentials」という拡張機能がサポートしています。
ダウンロードページ：http://emmet.io/download/
エメットをユーザー辞書に登録
頻繁に使用する長文のエメットは、ユーザー辞書などに登録しておくと非常に便利だと学校の先生がおっしゃっていました。
まとめ
エメットを使いこなせればかなりの時間を省略することができるので、複雑なエメットも使いこなせるよう日々努力していきたいです。