Web制作環境を整える その5 – Emmet でマークアップをスピードアップ

コーディング最適化

Sublime Text 3 の操作方法にもだいぶ慣れてきました。オートコンプリートはあるしSurround 機能も使えるとはいえ、マークアップ作業はやっぱりキーを打つ回数が多いです。そこで、「Emmet」というパッケージを導入して、マークアップ作業の大幅スピードアップを図りたいと思います。

Emmet とは、前バージョンまで Zen Coding という名前だったコーディング補助プラグインで、省略記法を展開してコードを生成するものです。言葉で説明するより、実際使ったほうがそのすごさがよくわかります。

Sublime Text 3 で Emmet を使う

いつものように Package Control から Emmet パッケージをインストールします。Emeet をインストールすると、一緒に PyV8 Binaries という依存パッケージもインストールされますので、「ナンダコレ?」とか言って消さないようにしてください。

ではさっそく Emmet による展開とはどんなものか、試してみましょう。新規ファイルを開き、HTMLかPHPシンタックスへ変更します。そこへ

のように入力してください。行末にカーソルを置いた状態の挿入モードCtrl + e を押すと・・・

このようにHTMLが生成されます。CSSのclass,ID指定と同じ書式で解りやすいですね。

HTMLだけでなく、CSSのコーディングでも Emmet は活躍します。今度はシンタックスをCSSに変更し、

のように入力して Ctrl + e を。

このように、CSSも生成する事ができます。

スニペットと呼ばれる省略表記と内容を登録しておき、それを呼び出す仕組みです。このスニペットの仕組みは、Sublime Text 3 の標準機能としても備わっています。Sublime Text 3 での展開ショートカットキーは Tab に設定されていて、Emmetはこれを上書きするように指定しています。
しかし、Emmet と標準のスニペットを共存させたいので [Preference] – [Settings – User] を開いて以下の設定を追加します。

この設定を追加する事で、標準機能のスニペットとEmmetが共存できます。

スニペットの利用はキータイプを大幅に減らせるのみならず、自動生成によって書式も統一される事もメリットですね。

Emmet でのマークアップ省略記法を学ぶ

Emmet におけるHTMLマークアップの省略記法のルールを勉強します。

Emmet Documentation の丸写しなので、英語でもOKな方は本家を確認したほうが確実です。

例にも示したように、CSSセレクターによく似た表現を使いますので、ウェブ開発者には親しみやすい記述方法になっています。

階層構造をあらわす演算子

演算子を使って、HTMLの入れ子や隣接といった階層構造を表現できます。

子要素: >

> 演算子を使用して、直下の子要素を指定できます。

隣接要素: +

+ 演算子を使用して、同じ階層に要素を追加できます。

上の階層: ^

隣接要素は入れ子の階層に依存します。

^ 演算子を使用することで、階層構造を1つ上に溯ることが出来ます。

^ 演算子を複数使用すれば、さらに上の階層へ溯ることも可能です。

乗算: *

* 演算子を使用して、要素を複数個出力することが可能です。

グループ化: ()

丸括弧を使ってより複雑な構造を表すこともできます。

グループ内にグループを作る事も、乗算演算子(*)と組み合わせて使用する事も出来ます。

グループを使えば、1行の省略表記でページ全体の構造を表す事も可能ですが、それはお勧めしません。

属性をあらわす演算子

属性演算子を使う事で、展開時に属性を追加することが出来ます。クラス属性を付ける事なんて朝飯前です。

IDとクラス

CSSでは IDを elem#id, クラス属性を elem.class といった形で表記します。Emmet でも属性の指定に同様の表記を使用します。

カスタム属性

CSSの属性セレクタのように[](角括弧)を使用して属性を指定できます。

  • 角括弧の中には複数の属性を指定できます。
  • td[title colspan] のように、属性値を書かなくても空白値として展開されます。
  • 属性値にはシングルクォートかダブルクォートを使用してください。
  • 属性値をクォートで囲む必要のない場合(数字や空白を含まない文字列)は問題ありません。

連番: $

乗算演算子(*)と組み合わせて、連番を付ける事が可能です。属性名や属性値に $ を置くと展開時に連番として出力します。

$ を並べて置けば桁数固定でゼロフィルします。

連番の開始値と方向

@ 記号を使用して、連番機能の方向(昇順・降順)と開始値を指定する事が出来ます。
降順に連番をつける場合の例です。

開始値を指定する場合の例です。

同時に指定する事もできます。

テキスト: {}

任意の要素にテキストを加える事ができます。

一部の使われ方では注意が必要です。例えば、 a{Click} と a>{Click} では出力結果は同じですが、a{click}+b{here} と a>{click}+b{here} では出力結果が異なってきます。

後者の例では、b要素は a要素の中に含まれています。要素の直後にテキストがおかれた場合は、親子関係に影響を与えません。なぜこれが重要か、次にもっと複雑な例を示します。

この例は、Click here to continue という一文の here にのみリンクを指定したい場合です。
比較の為に、 p の後に子要素演算子を使用しない場合はこうなります。


以上、Emmet での HTMLマークアップの書き方でした。次回はCSSコーディングでの Emmet の書き方を勉強していきます。