【HTML編】初心者向けEmmetの使い方

2016年11月6日tool, WEB制作

Emmetによる快適高速コーディングを習得するための記事です。
EmmetでのHTMLコーディングをなるべく分かりやすくまとめてみました。

自分自身が初心者なので、自分にとって分かりやすく書いたつもりです。

スポンサーリンク

基本の書き方

emmetは簡単な記述でHTMLを展開してくれます。
コードを記述し、【TAB】もしくは【ctrl+e】キーで展開されます。

では展開例を書いていきます。

タグの展開

タグの展開
タグの展開は自動的に閉じタグまで生成してくれます。
例として以下のように展開されます。

略して書けるタグ

長いタグ名などの場合、略して展開する事が出来ます。

タグ 略した記述
blockquote bq
figure fig
figcaption figc
iframe ifr
embed emb
object obj
source src
caption cap
button btn
textarea tarea
section sect
article art
header hdr
footer ftr
address adr
strong str
input inp

Emmetのチートシートがありましたので、どんなタグが対応しているか目を通しておいた方がいいかもしれません。
Cheat Sheet

IDとclass

IDやclassを付与して展開する例です。

#や.のみでdivとして展開します。
続けて文字を入力することで、その文字がID,classにセットされます。

入れ子

入れ子の場合は要素の次に【>】で繋ぐ。

同階層、兄弟要素を作る

同階層、兄弟要素を作る場合は【+】で繋ぎます。

親要素、ひとつ上の階層

【^】はひとつ上の階層に移動します。

テキストの入力

テキストを流し込むときは{テキスト}でテキストを入れる。

ダミーテキスト

loremを使用する事でダミーテキストを入れてくれる。勿論英語。
繰り返し処理させる事で異なるテキストが出力される。

コメントアウト

コメントの展開は【c】で行う。
また、【|c】を末尾に入れることで閉じタグのコメントを展開できる。

コンディショナルコメント

IE対策用のコンディショナルコメントも自動で展開してくれる。

実体参照

タグを実体参照にしてくれる。
重ねがけも出来る。

繰り返し&連番

繰り返しは【*】、連番は【$】を使います。
また【$】は【$$】や【$$$】と書くことで【01】【001】から始まる連番表示が出来ます。

グループ化

グループ化をする事で、グループの中での階層移動はグループの外では影響を受けなくなります。

■navと同階層にP要素を作りたい場合
グループ化をしていない場合

グループ化での記述

要素のプロパティと値の指定

プロパティと値を指定するには[プロパティ=値]の形式で書きます。
複数のプロパティを指定する時は半角スペースを入れ、記述します。

記述の省略を考えてみた

記述の省略例として色々考えてみました。

・略して書けるタグは略して書く。
・divは書かない、書くときは#や.で書く。
・階層移動が激しいときは、グループ化する。

■よくあるボックス型コンテンツのHTML
繰り返しの記述を.conteiner*3でする事で、セクション内に複数のコンテンツボックスを出力させている。

■子要素の省略

要素によっては省略して書けるケースがある。
ul,olはliになり
pはspanに
tableはtr、trはtdを省略できる。

記号の意味

Emmetで使用する記号の使用例
今までに何度か登場しているが、おさらいに覚えていたほうが絶対得する。

記号 意味
$ 連番(1から始まる数値)
* 繰り返し
> 入れ子、子要素
+ 同階層の次の要素、兄弟要素
^ 一つ上の階層、親要素
# ID
. class
[] 属性
{} 要素の中身、テキスト
= 属性の値a[href=./index]等として使う
() グループ
| 後ろに特定の文字を入れることで機能する
|e 実体参照にする
|c IDやclassが着いている要素の閉じタグにコメント
|s 一行出力

doctype宣言

docmenttype宣言にはいくつかの例があります。
どの展開もlangの初期値はenになっていることに注意

あとがき

頑張って書いたおかげかemmetのHTMLの展開に関しては殆ど覚えました。
やっぱりブログ書く=アウトプットって重要ですね。

結構他人より物覚えが悪いので、人一倍努力しなければ覚えられないんです><
では後ほどCSSの方も頑張って書きたいと思います。

この記事が気に入ったら
『いいね』しよう!


PAGE TOP