HTMLとCSSを書き始めたんだけどいっぱい文字を打たないといけなくて大変だ……。これじゃあ完成する前に疲れちゃうよ。セミ君、何かいい方法は無い？
そんな時はEmmetを使ってみよう！
HTMLやCSSを書いているととにかくたくさんタイピングします。タイピング数が増えると疲れますしタイプミスも発生しがちですよね。
しかしこの記事で紹介するEmmetを導入すればタイピング数を削減することが可能です！
- Emmetとは？
- Emmetの導入について(Brackets・Atom)
- Emmetの基本
Emmetとは？
EmmetはHTMLとCSSを簡単に書けるようにするプラグインです。
Emmet独自の方式で記述し、Tabキーを押して変換します。
Visual Studio Codeは最初からEmmetが入っていますが他のエディタの場合自分で導入する必要があります。
Emmetの導入
まずはEmmetをエディタに入れないとね！AtomとBracketsへの導入方法を紹介するよ。
Brackets
- 「拡張機能マネージャー」を開きます。
- 「入手可能」タブを開きます。
- 検索ボックスにemmetと入力します。
- Emmetの「インストール」ボタンをクリックします。
Atom
- 画面上部の「ファイル」→「環境設定」の順に押します。
- 「Settings」タブの左側にある「Install」を押します。
- 検索ボックスに「emmet」と入力します。
- emmetの「Install」ボタンを押します。
Emmetの基本
Emmetは導入できたよ！セミ君、さっそく使い方を教えてよ！
OK！まずは基本的なところからいくよ！
HTML
・要素名をTabキーで展開する
・「要素名.class名」や「要素名#id名」でクラスやidを付与できる
・「>」と「^」と「+」で階層を指定
・「要素*任意の数字」で要素を複製できる
要素名をTabキーで展開
h1と打ってTabキーを押すと<h1></h1>となります。
他の要素でも同様です。
要素名にclassやidを付与できる
div.main-contentと打ってTabキーを押すと
<div class=”main-content”></div>となります。
div#main-contentならば、
<div id=”main-content”></div>となります。
特にclassの付与は多用するので覚えておきましょう！
複数のclassを付与したい場合は、
div.item.item2と打つと、
<div class=”item item2″></div>となります。
classの付与って結構面倒だったからすごく助かるよ！
うんうん、僕もこれは多用してるよ！
「>」と「^」と「+」で階層を指定
・「>」は階層を1つ下げる
・「^」は階層を1つ上げる
・「+」は同一階層に要素を増やす時に使う
実際に試してみましょう。
例：div>img+p^div
|
1 2 3 4 5 |
<div> <img src="" alt=""> <p></p> </div> <div></div> |
例を展開すると上のようになります。
上は例だから「＾」を入れてみたけど今のところあまり使ってないよ。最初のうちは「＞」と「+」の使い方を覚えておけばいいと思うな！
なんか複雑そうだし慣れるまではそうするよ！
「要素*任意の数字」で要素を複製
例：ul>li*3
|
1 2 3 4 5 |
<ul> <li></li> <li></li> <li></li> </ul> |
例を展開するとこうなります。
ひたすらコピペしてたリストがこんなに簡単に作れるなんて！
メニューを作るときに重宝するよ！
応用編
今までの例を応用してよくありそうなリストを作ってみます。
例：ul>li.list-item*3>a>img+p
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul> <li class="list-item"><a href=""> <img src="" alt=""> <p></p> </a></li> <li class="list-item"><a href=""> <img src="" alt=""> <p></p> </a></li> <li class="list-item"><a href=""> <img src="" alt=""> <p></p> </a></li> </ul> |
上の例を展開するとこうなります。
Emmetを使うとこんなに少ない文字数で書けるんだね！
驚くのはまだ早いよ、次はCSSだ！
CSS
- プロパティの頭文字を記述してTabキーで展開
- 内容の指定もできる
プロパティの頭文字を入力して展開
text-alignならばtaと入力してTabキーです。
プロパティの内容の指定
頭文字の後に内容をつけてTabキーです。下の表は例になります。
| 展開前 | 展開後 |
| db | display: block; |
| dib | display: inline-block; |
| op0.7 | opacity: 0.7; |
| tac | text-align: center; |
| m0-auto | margin: 0 auto; |
| df | display:flex; |
| fdr | flex-direction: row; |
| fdc | flex-direction: column; |
| w100% | width: 100%; |
| fz1.2rem | font-size: 1.2rem; |
| poa | position: absolute; |
| por | position: relative; |
HTMLほどの感動はないけどこっちも便利そうだね！
まとめ
タイピング数を削減できるプラグイン「Emmet」をご紹介しました。
Emmetの記述方式を覚える必要はありますが慣れるとHTMLとCSSを書くのがとっても楽になります。特にクラスの付与やリスト作成！
HTML/CSSを書いている方はぜひ試してみてください！
おまけ
Emmetは公式のチートシートがあります！（英語です）
うまく展開できないプロパティがあったら調べてみましょう！
