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

皆さんこんにちは。とみっちです。

今日もせっせとHTML書いていますかー!?

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

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

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

僕の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>div.header__inner>ul.header__inner__menu>li*3

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


<div class="header">

<div class="header__inner">

<ul class="header__inner__menu">
      
<li></li>


<li></li>


<li></li>

    </ul>

  </div>

</div>

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

CSSもこんな風に書いて、

.header {
  w1000+m0-a
}

展開すると、

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

簡単に入力できます!

その他の入力例

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

p>lorem
ul>li>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.


<ul>
  
<li>Lorem ipsum dolor sit amet, consectetur.</li>


<li>Laboriosam officia veritatis exercitationem perferendis quibusdam.</li>


<li>Similique eius, repudiandae incidunt corrupti dicta.</li>

</ul>

のように展開されます。

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

もう、笑うしかない。

!

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

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

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

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

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

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

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

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

Emmetの使い方

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

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

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

Emmetをインストールしよう

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

Emmet対応テキストエディタ

Emmet対応テキストエディタ

SublimeText3の場合

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

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

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

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

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

Sublime Textのオススメ本

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

LiveStyleって何ができるの?

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

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

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

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

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

LiveStyleをインストールしよう

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

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

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

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

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

【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。

Google ChromeにLiveStyleをインストール

続いて、GoogleのChrome ウェブストアから拡張機能Emmet LiveStyleをインストールします。

インストール後、「⇧⌘I」で立ち上がるChromeの開発者ツールの一番右に「LiveStyle」の項目が増えています。

Chrome Emmet LiveStyle

Enable LiveStyle for current page」にチェックを付けて、リアルタイムコーディングに使用するCSSを選択してください。

LiveStyleを使って見る

Sublime TextとGoogle Chromeを同時に開き、Chrome開発者ツールを開いてCSSが選択できれば利用可能です。

Chrome LiveStyle

Safariにも導入可能です。手順はこちらを参照してください。

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

デザインカンプ通りにLiveStyleコーディング

デザインカンプ準拠でコーディングしてくださいって注文されることは多いですよね。

適当に余白を50pxくらいかなーと思って設定していると、数px、デザインカンプからずれていたりしてデザイナーから修正依頼が来ることとなります。

正確にコーディングする場合は、デザインカンプをブラウザに表示させながらリアルタイムコーディングすることをオススメします。

Google Chromeの「PerfectPixel」というエクステンションをChrome ウェブストアから追加して使えます。

こちらも是非使ってみてくださいね!

以上、Emmet + LiveStyleでHTMLコーディングする方法の紹介でした!

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

プログラミング 無料体験

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景