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で処理してしまい、空いた時間で我々はコンテンツの作り込みに時間を割きましょう。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.