【Emmet】爆速コーディングに必須の今更聞けないEmmetの使い方。html編

この世の大体の事柄は早ければ早いほど喜ばれます。

早くて喜ばれないものもありますが、

コーディングに関して言えば早いにこしたことはありません。

Html/cssをコーディングする上で使ってない人はいないんじゃなか?ってくらいの定番

「Emmet」

(※読み方わからない)

今ではDreamweaverやcloud9などのIDEにも統合されて標準機能として使用することができ、

ATOMやSubline textにEmmetを導入して使う方も沢山います。

今回は必ず覚えておきたいEmmetの使い方をご紹介いたします。

Emmetってなに?

まずEmmetってそもそも何なのか。

Emmetというのは

htmlやcssをコーディングする際に爆速で書けるようにしてくれるプラグインです。

元々はZen-codingという名前でしたが〜〜の歴史的な部分省きます。

なぜ多くのIDEで採用され、導入必須と言われるまでEmmetが普及しているのか。

私が考えるに理由は2つ

  • 導入が楽
  • 省略記法が超楽

ようは楽なんです。

だって

!

て「!」一個書くだけで

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

って展開してくれるようなプラグイン使うっきゃないでしょう!

省略記法を覚えよう

私的には

  • HTMLをCSS的に書くことができる。
  • CSSをびびるくらい少ない文字で書ける。

この2点が気に入ってEmmetを使ってる理由です。

まずHTMLですと


.header>h1+ul#nav>li*3>a[href="#"]

このような省略記法を記入して展開をすると

<div class="header">
 <h1></h1>
  <ul id="nav">
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
  </ul>
</div>

こんな風に1発でここまで書けちゃいます!

一つ一つ解説していくと
CSSと同じように.headerとドットを頭につけるとclassとして定義されます。
#をつけるとIDとして定義されます。
なので

.header

#header

はそれぞれ

<div class="header"></div>

<div id="header"></div>

と展開されます。

ちなみにドットや#をつけないとどうなるかというと


<header></header>

と親タグとして展開されます。
ですので、header.headerで展開すると


<header class="header"></header>

というように展開されます。

なんとなく親子関係はわかってもらえたでしょうか。

どんどん書いてこう


.header>h1+ul#nav

次でてきたのが[>]

これは何かというと、.headerの中に入れますよーって意味です。
h1+ulの[+]は隣り合わせに配置しますという定義。

なので展開すると

<div class="header">
 <h1></h1>
 <ul id="nav"></ul>
</div>

としっかり.header>で定義した通り中に入っちゃってるのとか、
h1とulタグが仲良く隣り合わせになってるのがわかってもらえるかと思います。

そして最後に

.header>h1+ul#nav>li*3>a[href="#"]

li3のは何個生成するかという意味です。

li*100とか指定すると

<li></li>

が100個できます。

li3>
とli
3の下に定義したものは作られたそれぞれのタグの中に自動的に入れ込まれます。

つまり

li*3>a[href="#"]

<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

となります。

もし


li>a[href="#"]*3

というようにa[href=”#”]の方に*3とつけてしまうと

Liタグの中に3つのa[href=”#”]が展開されるという意味になるため

<li>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</li>

という感じで展開されてしまうため注意が必要です。

次回はCSS編!

htmlの説明だけでも結構なボリュームになってしまいましたが、
Emmetの省略記法を覚えるだけで圧倒的にコーディングが早くなります。
導入のハードルも低いため、まだEmmetを導入してない方は是非使ってみてくださいね!

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →