Dreamweaverのテンプレート 〜 3:「head」と名付けた編集可能領域の挙動が怪しい件 〜
Dreamweaver（以下DW）のテンプレートで、編集領域に「head」という名前を付けると何だか怪しい挙動をするみたいです。検証したのはDreamweaver8。
テンプレートをネストさせると、特定の条件でアホになるみたい。
なお、エントリのパーマリンクからお越しの皆様へ。現在、はてダではスーパーPRE記法の中にHTMLコメントを入れると何故か表示されない不具合があるようです。日付のページからだとちゃんと表示されるので、ソース内のHTMLコメントが表示されない場合は2008/09/21のページへどうぞ。
■デフォルト
まず、DWがひな形として持ってるデフォルトのテンプレート。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head> <body> </body> </html>
これを基に子テンプレートを作ります。開いて保存するだけ。すると、こんな感じに。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/default.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="head" --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- InstanceEndEditable --> </head> <body> </body> <!-- InstanceEnd --></html>
編集可能領域「head」の中に、また「head」って領域が勝手にできてます。
■「head」をbody内に移動
試しに、編集可能領域「head」をHTMLのbody要素の中に移動してみます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/body.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- InstanceEndEditable --> </head> <body> <!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable --> </body> <!-- InstanceEnd --></html>
ここから子テンプレートを作ると…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/body.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- InstanceEndEditable --> </head> <body> <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --> </body> <!-- InstanceEnd --></html>
至ってふつう。head要素の中にあった時は、勝手に編集領域が二重になったのに。
■headとbodyの間に編集可能領域を作る
head要素内とbody要素内で挙動が違ったので、headとbodyの間に編集可能領域を置いてみた。実際には使う機会はないだろうけど、実験として。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- TemplateEndEditable --> </head> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <body> </body> </html>
すると、こうなる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> </head><!-- InstanceBegin template="/Templates/between.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- InstanceEndEditable --> </head> <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --> <body> </body> <!-- InstanceEnd --></html>
なんかもういい感じにHTMLが崩壊して、コメントできない。
■領域名を変更
「head」という領域名が特殊なんじゃないかと思って、名前を変えてみた。場所はデフォルトと同じ、head要素内。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/chname.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="dochead" --> <!-- InstanceEndEditable --> </head> <body> </body> <!-- InstanceEnd --></html>
今度は、こうなる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/chname.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="dochead" --><!-- InstanceEndEditable --> </head> <body> </body> <!-- InstanceEnd --></html>
何も変なことになってない。やっぱり編集可能領域の名前に「head」を使うとおかしなことになるのかな…
■名前変更 + headとbodyの間に配置
ついでに、名前を「dochead」にした状態でheadとbodyの間に置いてみた。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- TemplateEndEditable --> </head> <!-- TemplateBeginEditable name="dochead" --> <!-- TemplateEndEditable --> <body> </body> </html>
すると今度は、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> </head><!-- InstanceBegin template="/Templates/chname.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>無題ドキュメント</title> <!-- InstanceEndEditable --> </head> <!-- InstanceBeginEditable name="dochead" --><!-- InstanceEndEditable --> <body> </body> <!-- InstanceEnd --></html>
ちょwwwww
先ほどの結果と照らし合わせてみると、どうやら「headとbodyの間に編集可能領域を置くと、html要素の直後に勝手にhead要素とheadという編集可能領域を作る」という仕様になっている模様。意味が分かりません。
HTMLの仕様として、「コメントを置ける正しい場所」の定義を少し調べてみたけど資料が見当たらず。もしかすると、headもしくはbodyの中にしか書けないのかも知れないけど、テンプレートの制御システムとしてはおかしいだろ、これ。
■まとめ
- 編集可能領域の名前に「head」を使うのは危険
- headとbodyの間に編集可能領域を置くとおかしなことになる
最近のバージョンだと直ってたりするんですかね。
