HTMLのhead内の面倒なコードはEmmetを使って鬼速でコーディングすべき

HTMLページを新規で作成する場合、最上位に書くのはheadタグですが、記述すべき量は多くて時間がかかります。HTMLコードを短いコードで記述可能なEmmetを使えば、ドキュメント宣言、meta:viewport等のhead部分に必要なコードを効率よく記述できます。

なお、基本的なEmmetの書き方については、geechs magazineの「学生だって覚えたい!Emmet(省略記法)で鬼速コーディング」が分かりやすいので参照ください。


headタグ内に必要なタグをまとめて指定する

Emmetでは、ドキュメント宣言やtitlemeta等、HTMLの最初に書くコードをまとめて指定できます。面白いことに、!」一つで展開可能です。


Emmet

!



展開後のHTML

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>


doctypehtmlmeta:charsetmeta:viewportの他、IEのレンダリングモードを最新にする<meta http-equiv="X-UA-Compatible" content="ie=edge">も設定されています。この機能をTwitterで紹介したところ、反響がありました。

展開は快感なので、知らなかった方は是非試してみてください。


XHTMLの場合

HTML5ではなくXHTMLやHTML4でheadをまとめて指定したい場合は、次のように記述します。


Emmet(XHTML)

html:xt



Emmet(HTML4)

html:4t


例えばXHTMLの方は展開する次のようになります。


XHTML用Emmetの展開後

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>


次のセクションからは、個別にhead内の指定をする方法を紹介します。


metaタグのviewport指定

レスポンシブwebデザインが主流になった現在、metaタグのviewport指定が必要なケースは多いです。Emmetでは次のように記述できます。


Emmet

meta:vp


展開後のHTMLコードには、widthinitial-scale等、viewportに必要なコードが記述されます。


展開後のHTML

<meta name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


ドキュメント宣言の展開

doctypeのみを展開したい場合は、!!!と記述します。


Emmet

!!!



展開後のHTML

<!doctype html>


XHTMLやHTML4の面倒なドキュメント宣言も短いEmmetで展開可能。今はHTML5が主流ですが、レギュレーションの関係で古い宣言が必要な場合もあるでしょう。

例えばXHTMLは次のとおり。


XHTMLのドキュメント宣言

!!!xt



展開後のHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML4は次のとおりです。


HTML4のドキュメント宣言

!!!4s



展開後のHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



HTMLのheadで消耗するのはもう辞めよう

Emmetを使えばHTMLのheadの内容を一瞬で記述できます。決まりきったコードはEmmetで処理してしまい、空いた時間で我々はコンテンツの作り込みに時間を割きましょう。