え！？まだHTMLコーディングでEmmet + LiveStyleを使ったことがないの？

HTMLやPHPを書いていることが多いとみっちです。

みなさん、今日もせっせとHTML書いていますかー！？

さて、今更ですが、EmmetとLiveStyleを使ってHTMLコーディングする方法を紹介します。

もし、EmmetもLiveStyleも今までに使ったことがないとしたらもったいない！

導入すればHTMLコーディングの効率・速度が格段にアップしますよ！

0.1 Sublime Text3 公式サイト

1 Emmetって何ができるの？
2 Emmetをインストールしよう
3 LiveStyleって何ができるの？
4 LiveStyleをインストールしよう
5 デザインカンプ通りにLiveStyleコーディング
6 プロから直接学べるプログラミングスクールの紹介！PHPコースあり！

僕のPCはMacBook Air‎（2013 Mid）で、テキストエディタはおなじみSublime Text3を使用しています。

メモリ4GBですが、かなりサクサク動いています。

Sublime Text3 公式サイト

Sublime Text3は、Windows、Mac、Linuxで動作します。

Emmetって何ができるの？

続いて、「Emmet」について説明しましょう。

「Emmet」とはテキストエディタの拡張機能として利用できる、HTMLやCSSのコーディングの入力をサポートするプラグインとなります。

SublimeTextなどのテキストエディタでは、「p」などと入力してtabキーなどを押すと「<p></p>」のように、簡単に展開してくれる機能があります。

簡単に言うと、Emmetはそれの高機能版だと思ってもらえればよいです。

EmmetのHTML、CSS展開例

例えば、Emmetを導入した環境下で下記のように入力します。

div.header&gt;div.header__inner&gt;ul.header__inner__menu&gt;li*3

そんで、展開するショートカットキー（タブとか、ctrl+Eとか自分で設定可能）を押すと、



&lt;div class=&quot;header&quot;&gt;

&lt;div class=&quot;header__inner&quot;&gt;

&lt;ul class=&quot;header__inner__menu&quot;&gt;
      
&lt;li&gt;&lt;/li&gt;


&lt;li&gt;&lt;/li&gt;


&lt;li&gt;&lt;/li&gt;

    &lt;/ul&gt;

  &lt;/div&gt;

&lt;/div&gt;

HTMLのタグの括弧も、「id=""」や「class=""」といった記述も、インデントも、Emmetが全部自動で記述してくれるから、いちいち全部書く必要がないのです！

CSSもこんな風に書いて、


.header {
  w1000+m0-a
}

展開すると、


.header {
  width: 1000px;
  margin: 0 auto;
}

簡単に入力できます！

その他の入力例

他にもloremと入力すると長いダミーテキスト（英語）を出力してくれたり、lorem5のようにすると5単語分のダミーテキストを出力してくれます。また、*3のように入力すると同様のタグを3つ出力してくれたりします。超絶に記述が楽！


p&gt;lorem
ul&gt;li&gt;lorem6*3

のそれぞれの行が、




Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis voluptate voluptatibus, aliquam totam! Quis, minus. Soluta dignissimos pariatur adipisci, at architecto, necessitatibus vitae voluptas perspiciatis laboriosam aut blanditiis consectetur distinctio.


&lt;ul&gt;
  
&lt;li&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/li&gt;


&lt;li&gt;Laboriosam officia veritatis exercitationem perferendis quibusdam.&lt;/li&gt;


&lt;li&gt;Similique eius, repudiandae incidunt corrupti dicta.&lt;/li&gt;

&lt;/ul&gt;

のように展開されます。

そうそう、HTML5の文章型宣言付きの雛形なんて、「!」だけでいいんですよ！

もう、笑うしかない。

こいつが、こうなります。


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  
&lt;/body&gt;
&lt;/html&gt;

※デフォルトはlang属性がenだったと思いますが、簡単に変更できますよ。

省略する記述が面倒そうと思うかもしれないんですが、全部覚えなくても、必要なものだけ、必要な時に使えばいいんですよ。

使いこなしたければ、PCのショートカットと同じ感じで、徐々に使える記述を増やしていけばいいのです。

是非、Emmetの公式ページで動画を見てください。

上記URLにアクセス後、[▷Play demo]ボタンを押してみてくださいね。

めっちゃ楽に、多くのHTMLタグが記述できることが分かったのではないでしょうか！？

Emmetの使い方

Emmetでどんな記述、使い方ができるかは、公式サイトのチートシートで見ることができますよ。
ページ前半にHTML、後半にCSSの記述があります。

慣れればコーディングが爆速になります。

それまでのHTMLベタ書きには、もう戻ることはできません。

Emmetをインストールしよう

Emmetが対応しているテキストエディタ及び、ダウンロード方法は、公式サイトから確認できます。

Emmet対応テキストエディタ

SublimeText3の場合

ショートカットキー「⇧⌘P」もしくは、メニューバーの「Tools」→「Command Palette」と進み、Package Controlを呼び出す
出てきたポップアップに「install」と入力、「Package Control:Install Package」と表示されるのでreturnキー
別のポップアップが現れるので「Emmet」と入力してreturnキー

これだけでインストールが完了します。

HTMLファイルやCSSで、早速Emmetの展開ができるようになっている点確認してみてください。

通常、EmmetはSublimeTextで「Tab」もしくは「Ctrl+E」で展開します。

さぁ、HTMLコーディング爆速ライフの始まりです！！

Sublime Textのオススメ本

Sublime Text関連の書籍は全然出てないんですが、これはオススメの本です。僕はKindle版を買って、いつでもPCやAndroidタブレットで参照できるようにしています。

Web制作者のためのSublime Textの教科書今すぐ最高のエディタを使いこなすプロのノウハウ

LiveStyleって何ができるの？

続いてはLiveStyleを紹介します。

通常、テキストエディタで書いて保存したHTMLコードは、ブラウザでリロードして表示確認すると思います。

いちいち「F5」や「⌘R」でリロードする手間を省き、リアルタイムでHTMLコーディングできるようにしてしまう方法がLiveStyleです。

LiveStyleを行っている動画を見ると、めちゃくちゃ格好良いです。

SCSSと組み合わせてLive SCSSなんてコーディングもできそうですね。これはまだ試してないので是非チャレンジしてみたい。

LiveStyleをインストールしよう

LiveStyleはSublime Textで実行できます。残念ながら、他のテキストエディタではできるのかどうか分かりません。

Sublime TextでPackage Controlを使用してインストール

ショートカットキー「⇧⌘P」もしくは、メニューバーの「Tools」→「Command Palette」と進み、Package Controlを呼び出す
出てきたポップアップに「install」と入力、「Package Control:Install Package」と表示されるのでreturnキー
別のポップアップが現れるので「LiveStyle」と入力してreturnキー

多分Sublime Text3では「pyv8-binaries」というものを別途インストールする必要が出てきます。利用環境にあったものを手動でインストールしてください。

「pyv8-binaries」のインストールに苦戦しそうでしたらこちらの記事も参考にしてください。