HTML/CSSを爆速コーディング Emmet入門第1回 Emmetを薦める理由

HTML/CSSを爆速コーディング Emmet入門

Web制作に欠かせないツールである「Emmet」というものを、知っていますか？この連載では、お使いのエディタの機能を拡張するEmmetのインストールから、HTML・CSSの展開、あまり知られていない便利な機能などを解説します。初回は、Emmetの概要と、BracketsとDreamweaverにEmmetをインストール方法についてです。

Emmetとは何か？

Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。Dreamweaverをはじめ、様々なIDEやエディタに対応しており、CodePenのようなコードを公開するオンラインサービスなどでも採用されています。

元々はZen-Codingという名前でしたが、2012年9月ごろから「Emmet」という名前で開発が進められ、正式リリースされた現在も機能の拡張が行われています。

Emmetの主な特徴は、独自の省略記法によるコーディングの高速化です。
例えば、下記の様にたった一行の記述から、Emmetを利用するとショートカットキーひとつで、すぐにHTMLが作成されます。

Emmetの省略記法を用いた記述

#header>h1+ul#nav>li>a

Emmetにより展開されたコード

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

このようなデモはEmmetのドキュメントサイトで見ることができ、「Try it yours」ボタンをクリックすると、サイト上で実際に入力して試すことができます。

https://blog.adobe.com/media_050f7eb5eb2cfc3601eee8ca278b53299bbff874.gif

Watch demo」の部分をクリックすると、Emmetのデモンストレーションが始まる

Emmetの凄さは、この省略記法はHTMLだけでありません。

CSSの省略記法も利用できます。CSSの省略記法はZen Codingからありましたが、決まった文言を正確に入力しなければいけませんでした。

しかしEmmetから追加された「Fuzzy Search」という機能によって、正確な省略記法を入力せずともCSSが展開されるようになっています。

Emmetの省略記法を用いた記述

 .demo {
   w100p+m10-a-1.
 }

Emmetにより展開されたコード

 .demo {
  width: 100%;
  margin: 10px auto 1em;
 }

またEmmetは、省略記法以外にも便利な機能が多く用意されています。Emmetプラグインをインストールするだけで、下記のような機能が利用できます。

包括処理による展開
コメントの表示・非表示
編集点の移動
対応しているタグへの移動
選択範囲の拡張
計算機機能など

エディタによっては、Emmetのバージョンが異なるため特定の機能が使えない、ということもありますが、入れておいて損はないツールです。

Bracketsに、Emmetをインストールする

この連載で使用するメインのエディタは、Bracketsです。Bracketsはオープンソースのプロジェクトで、アドビが中心になって開発しているエディタです。

__
Bracketsをダウンロードする

Bracketsの便利な使い方や特徴は、「デザイナーにも優しいエディタ、Bracketsの基本を知っておく］が参考になります。

Bracketsで利用できるEmmetは、便利な機能が追加された最新バージョンである1.2.0(執筆時点)です。プラグインとして提供され、インストールも簡単なので、ぜひ入れておきましょう。Bracketsを起動したら、「拡張機能マネージャー」を起動します。

https://blog.adobe.com/media_5a4e5ec758d760d0d23e1ce9a487caa427ec5c40.gif

ウインドウ右側のツールバーにあるブロックのようなアイコンをクリックするか、[ファイル]→[拡張機能マネージャー]を選択する

拡張機能マネージャーが表示されたら、「入手可能」タブが選択された状態で検索ボックスに「Emmet」と入力してください。

Emmetプラグインが検索ボックスの下に表示されたら、「インストール」ボタンを押しましょう。

https://blog.adobe.com/media_d21b8d27e1c443c957c614c35cc3cfedf8a9fd7b.gif

拡張機能マネージャーの右にある検索ボックスにプラグイン名を入力すことで、絞り込みが行なえる

インストールが完了すると、メニューバーに[Emmet]の項目が追加されます。 [Emmet]メニューを開いて[Enable Emmet]がチェックされていればEmmetが利用できます。

HTMLファイルを開いて半角で「!」とタイプし、キーボードのTabキーを押してみましょう。DOCTYPE宣言やtitleタグなどが表示され、Emmetが利用できます。

https://blog.adobe.com/media_f3ff5688856dcc6d99cd8d18b5fdb5e59e78de76.gif

EmmetのHTMLの展開は、シンタックスが「HTML」になっていないと動きません。はじめに、ウィンドウの右下が[HTML]になっているか確認します

DreamweaverでEmmetを利用する

最新のDreamweaver CCでは、DreamweaverをインストールするだけでEmmetが利用可能です。
Emmetの記法を行い、Tabキーを押すとHTMLやCSSが展開されます。

__
Dreamweaver CC 体験版をダウンロード

Dreamweaver CC 2015 リリース以前に、Emmetをインストールする

Dreamweaver CC 2015 リリース以前のバージョンには、Emmetが標準されていませんでした。
そのため拡張機能としてEmmetをインストールしてから利用します。

ただし、Dreamweaver用のEmmetプラグインは、2013年から開発が止まっています。そのために一部利用できない機能もありますが、Emmetの基本的な機能は問題なく利用できます。

Emmetのインストールには、Extension Manager CCを利用します。もしインストールしていない場合は、Creative CroudかExtension Manager CCのダウンロードページからインストールしましょう。

Extension Managerが利用できるようになったら、EmmetのGitHubページからEmmet.zxpをダウンロードし、ZXPファイルを展開します。 Extension Managerが立ち上がるので、アプリケーションの指示に従ってインストールを進めてください。

https://blog.adobe.com/media_0e7fa4e97ea4aa8a39f9883b8bca9a4fffa2e3e7.gif

インストールが完了すると、Extension Managerに「Emmet」の項目が追加される

Emmetのインストールが完了したら、Dreamweaverを立ち上げてみましょう。

メニューの[コマンド]の中に、Emmetの項目が追加されています。ショートカットキーを利用するとEmmetをより効率よく使えます。

ショートカットキーの設定は、Windowsの場合は[編集]→[キーボードショートカット]から、Macは[Dreamweaver]→[キーボードショートカット]からショートカットの割り当てを変更できます。

https://blog.adobe.com/media_76cc2fbfef168de29e8fee47b99ecfcbac8695f0.gif

Emmetのショートカットキーは、[コマンド]の中から変更できる

以上で、Emmetが利用できるようになります。

次回はEmmetを使ったHTMLの効率的なコーディングを解説します。

HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由