HTMLページを新規で作成する場合、最上位に書くのはheadタグですが、記述すべき量は多くて時間がかかります。HTMLコードを短いコードで記述可能なEmmetを使えば、ドキュメント宣言、meta:viewport等のhead部分に必要なコードを効率よく記述できます。
なお、基本的なEmmetの書き方については、geechs magazineの「学生だって覚えたい！Emmet(省略記法)で鬼速コーディング」が分かりやすいので参照ください。
headタグ内に必要なタグをまとめて指定する
Emmetでは、ドキュメント宣言やtitle、meta等、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>
doctype、html、meta:charset、meta:viewportの他、IEのレンダリングモードを最新にする<meta http-equiv="X-UA-Compatible" content="ie=edge">も設定されています。この機能をTwitterで紹介したところ、反響がありました。
展開は快感なので、知らなかった方は是非試してみてください。
doctype・html・head・body等のHTMLを最初に書くときに使うコードを「!」一つで生成するEmmet先生は、もっとフロントエンド界で知られるべきだと思う。#Emmet pic.twitter.com/9boWCYfC0W
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) July 8, 2016
XHTMLの場合
HTML5ではなくXHTMLやHTML4でheadをまとめて指定したい場合は、次のように記述します。
html:xt
html:4t
例えばXHTMLの方は展開する次のようになります。
<!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では次のように記述できます。
meta:vp
展開後のHTMLコードには、width、initial-scale等、viewportに必要なコードが記述されます。
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
ドキュメント宣言の展開
doctypeのみを展開したい場合は、!!!と記述します。
!!!
<!doctype html>
XHTMLやHTML4の面倒なドキュメント宣言も短いEmmetで展開可能。今はHTML5が主流ですが、レギュレーションの関係で古い宣言が必要な場合もあるでしょう。
例えばXHTMLは次のとおり。
!!!xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML4は次のとおりです。
!!!4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTMLのheadで消耗するのはもう辞めよう
Emmetを使えばHTMLのheadの内容を一瞬で記述できます。決まりきったコードはEmmetで処理してしまい、空いた時間で我々はコンテンツの作り込みに時間を割きましょう。