arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

Emmetで爆速コーディングを始めよう!- HTML編

前回はEmmetの導入部分までをやりました。テキストエディタは決まりましたでしょうか?今回からが本番、速くコードを書くための省略記法を説明していきます。内容盛りだくさんですが、基本を押さえながら実際に書いていくのが覚える近道です。さっと目を通してゴリゴリとコードを書いていきましょう。

Emmetの基本的な使い方

前回ちらっと書きましたが、Emmetの省略記法を入力して、行末でCtrl+EまたはTabを押せば、カーソル以前のコードが展開されます。
もしかしたらエディタによって他のショートカットキーである可能性があるので、「展開されないんですけれど…」ということであれば、お使いのエディタでのEmmetのショートカット設定をご確認されることをお勧めします。

Emmetで書くHTML

押さえておきたい省略記法は以下のとおりです。

  記号  役割  凡例
#ID名の指定div#id_name
.クラス名の指定div.class_name
>入れ子の作成div>p
*要素を複数展開li*3
+同階層に要素を展開div+p
{}テキストの挿入p{Text}
$連番をつけるli.item_$*4

Emmetの特徴としては、タグの<>が要らないことです。
一つ一つ見ていきましょう。

1.要素

要素名を入力して展開のショートカットキーを押すだけで一度に展開されます。
便利なのは、展開後にカーソル位置がタグ内に来ることですね。

imgタグにalt属性がついたり、aタグにhref属性がついたりと、よく使われる属性が自動でつくこともあります。
自分で属性を付ける時には以下のようにタグの省略記法の後に[](大かっこ)を追加をします。

このように[](大かっこ)を使います。metaタグに使うのは微妙なところですが、使えないことはないです(キーボート打数はあまり変わらないですね)。

2.ID名・class名の指定

cssを書いている方であれば、これは難なく理解できると思います。
ID名を指定した場合は#、クラス名を指定した場合であれば.を名前の前につけるのと同様です。

ちなみに、要素名を書かずにいきなりID名やクラス名を書いて展開すると<div id=”hoge”></div>などと補完してくれます。

要素を入れ子にする

次の要素の複数展開とあわせて最もHTMLではよく使い、Emmetの恩恵を感じる機能です。無限(?)に入れ子構造にできます。

<ul> や<ol> の入れ子である<li> が省略できたり、その他<p> の下層にくる<span> 、<table> の入れ子にできる<tr> や<td> なども省略可能です。

要素を複数展開

いちいちコピペしなくてもいいですね。これも無限(?試したことないんです…)に展開できます。

loremというのがでてきましたね。これはダミーテキストです。行ごとに違う意味のない文章が展開されていきます。とりあえず文書構造だけ作っておいて、後で別に作った原稿を流し込む時などに使います。
また、たまに*の位置を間違えて展開して「ありゃりゃ(^^;)」なんてこともあるかもしれませんが、Undo(Ctrl+Zまたは+Z)してすぐ戻せますし問題なしですねd(^-^)

要素を同階層に展開する

入れ子ではなく、同じ階層に並べる時に+を使います。

()を使うと、グループ化できることも覚えておくといいかもしれません。
もう一つ、<table>, <dl>, <ol>・<ul>, <map> などはスニペットとして要素名の後ろに+を追加して展開するだけで、下層も一緒に展開されます。

…mapって最近使わないですね…資格を取る時に苦戦して以来、自分で書いてなかったです。

テキストの挿入

要素名の後に{}(中かっこ)で囲ったテキストがタグの中に入ります。

先ほど使ったloremは入れ子でOKです。.content>p>loremといったような感じです。

連番を付ける

要素を複数展開する時に、$と一緒に使うと連番をつけられます。

おまけ

HTMLの雛形もどこかに雛形ファイルを置いといて、コピペ…なんてことをしなくてもいいのです(特殊な雛形以外は…)。
空のindex.htmlを作成して、を入力して展開すれば、あっという間です。

最低限の雛形は一発です。ただし、<html> 内のlangを「ja」に変えたいですね。


思ったよりもサクサクと行けましたでしょうか?HTMLで使うEmmetの基本的な形は以上になります。お疲れさまでした。

お次はCSS編です。
Emmetの本領はCSSにあるといっても言い過ぎではないですし、基本形を学べば一気にコーディングが楽になります。
私も次を書くのが楽しみです。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP