Learning site for website creation

Emmet
最終更新日から1年以上経過しています

Emmetの<!doctype html>を<!DOCTYPE html>に変更:Dreamweaver CS6

  • 投稿日:2014年10月08日

Emmetで「html:5」を展開すると下記のようなソースコードになります。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

HTMLで記述する場合「<!doctype html>」の「doctype」は大文字でも小文字でも構わないのですが、XHTMLで記述する場合は「doctype」を大文字で記述し「<!DOCTYPE html>」とする必要があります。
汎用性の高い「<!DOCTYPE html>」に変更します。

以下の場所にある「snippets.js」をテキストエディタで開きます。

C:\Users\(ユーザ名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Commands\Emmet

WS986

変更前

  "html": {
    "filters": "html",
    "profile": "html",
    "snippets": {
      "!!!":    "<!doctype html>",
      "!!!4t":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">",
      "!!!4s":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">",
      "!!!xt":  "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
      "!!!xs":  "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">",
      "!!!xxs": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">",

      "c": "<!-- |${child} -->",
      "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->",
      "cc:ie": "<!--[if IE]>\n\t${child}|\n<![endif]-->",
      "cc:noie": "<!--[if !IE]><!-->\n\t${child}|\n<!--<![endif]-->"
    },

変更後

  "html": {
    "filters": "html",
    "profile": "html",
    "snippets": {
      "!!!":    "<!DOCTYPE html>",
      "!!!4t":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">",
      "!!!4s":  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">",
      "!!!xt":  "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
      "!!!xs":  "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">",
      "!!!xxs": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">",

      "c": "<!-- |${child} -->",
      "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->",
      "cc:ie": "<!--[if IE]>\n\t${child}|\n<![endif]-->",
      "cc:noie": "<!--[if !IE]><!-->\n\t${child}|\n<!--<![endif]-->"
    },

Dreamweaverを再起動した後、「html:5」を展開すると下記のようなソースコードになり、「<!DOCTYPE html>」に変更されています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>