連載  /  

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

BY 公開

Web制作に欠かせないツールである「Emmet」というものを、知っていますか?  この連載では、お使いのエディタの機能を拡張するEmmetのインストールから、HTML・CSSの展開、あまり知られていない便利な機能などを解説しま す。初回は、Emmetの概要と、BracketsDreamweaverに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」ボタンをクリックすると、サイト上で実際に入力して試すことができます。

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

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

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

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

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

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

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

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

DreamweaverでEmmetを利用する

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

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が立ち上がるので、アプリケーションの指示に従ってインストールを進めてください。

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

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

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

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

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

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

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

  AUTHOR

久保 知己

株式会社まぼろし / マークアップエンジニア / 1985年生まれ。HTML/CSSからCMSの構築まで、様々なサイトの制作に携わり、2014年にまぼろしに入社。著書に「CSS3&jQueryで作る スマートフォンサイトUI図鑑 」(アスキー・メディアワークス/共著)、「プロとして恥ずかしくない 新・WEBデザインの大原則」(MdN/共著)などがある。