テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）: 小粋空間

Top ＞お知らせ＞ blog ＞テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）

テンプレートをカスタマイズする場合のポイント（HTMLマークアップ編）

Posted at May 2,2006 1:32 AM
Tag：[HTML, Template]

テンプレートをカスタマイズされるユーザの方から「表示がくずれるのですが」という質問を頂くことがあります。その方々のページを Another HTML-lint gateway で検証すると、HTMLマークアップの誤り、つまりタグの過不足から表示が崩れるケースが少なくありません。おそらくテンプレートをカスタマイズされた時に、タグを書きすぎたり、あるいは書き足りなかったりするのではないでしょうか。

ちなみにその時の Aother HTML-lint gateway のエラーは

7: line xx: </tagA> は xx行目の <tagB> と重なり合っているようです。 → 解説 70

または

7: line xx: </tagA> に対応する開始タグ <tagB> が見つかりません。 → 解説 69

となります（他のエラーも同時に出る可能性があります）。

以下、HTMLマークアップの基本と、上記のエラーが発生した場合の解析方法、およびテンプレートのカスタマイズでHTMLマークアップを失敗しない方法について説明します。なおHTMLエディタを利用されていれば上記のようなエラーは発生しないと思いますので、ここでは手書きでテンプレートをカスタマイズされる場合を想定しています。

１．HTMLマークアップの基本

HTMLは、あるタグの開始・終了と他のタグの開始・終了が重なってはいけないというルールになっています（終了タグは省略可能な場合がありますがここでは終了タグの記述を前提にしています）。XHTMLでは終了タグを省略することができません（空要素のタグは />で閉じます）。
下記に一番簡単な例を示します。誤ってマークアップしたタグを赤で示します。

正しい例

<head>
</head>
<body>
</html>

正しくない例

<head>
<body>
</head>
</body>

お分かりの通り、head 終了タグの前に body タグが挿入されているのが誤りです。これがいわゆる「タグが重複している」という状態です。

上記はタグが兄弟関係の場合ですが、親子関係、いわゆる入れ子にする場合も同様です。
下記に html 要素を加えた例を示します。

正しい例

<html>
    <head>
    </head>
    <body>
    </body>
</html>

正しくない例

<html>
    <head>
    </head>
    <body>
</html>
</body>

body 終了タグは html 終了タグの前に書かなければいけません。

２．エラーが発生した場合の解析方法

実際にはテンプレート上は複数のタグが記述されているので、一旦エラーが発生すると解析が困難な場合があります。Aother HTML-lint gateway のエラーから被疑箇所をすぐに発見できればよいのですが、そうでない場合、HTMLの構造を簡単にすることをお勧めします。

その方法のひとつとして、正常にマークアップされているタグを取り除いていきます。入れ子（インデント）になっている場合はインデントの一番深いところに書かれたタグから取り除くと良いでしょう。

ということで、デフォルトテンプレートのエントリー部分を例に「インデントの一番深いところに書かれたタグから取り除く」の意味について説明します。
下記のようにマークアップされている場合、最初に取り除くタグは赤色の投稿者情報部分です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div>

この2つの span タグと a タグが「インデントの一番深いところ（自分のタグの中に別のタグが書かれていない）」となります。重なりあっていないことも確認してから削除します（ここでは赤色→青色で示します）。

次に取り除くのはエントリー本文と投稿者情報を括っている p タグ（赤色）です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div>

次に取り除くのはエントリー本文を括っている div タグ（赤色）です。

<div class="entry" id="entry-20"> 
   <h3 class="entry-header">test</h3> 
   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
      </p> 
      </div> 
   </div> 
</div>

このようにして開始タグと終了タグをみつけて、その中に他のタグが紛れ込んでいなければ削除していきます。そしてこの作業を繰り返していけばどこかでタグの過不足がみつかる、という訳です。
この作業を行う場合、必ず現在使用されているテンプレートのバックアップをどこかに保存しておいてください。

なおエントリーの本文に誤りがあるとテンプレート自体を修正してもエラーは解消されません。その場合はエントリーのタグをチェックするか、エラーとなったページを別のファイル名で保存し、それをダウンロードして上記の方法で正常なタグを削除していきます。

またタグの過不足で表示が崩れないケースもありますので、上記の作業を行う前に Aother HTML-lint gateway でチェックしましょう。

３．マークアップを間違えない方法

一言で申し上げると「いかにわかりやすく書くか」に尽きます。この方法はプログラムを書く時のお作法に非常に似ています。

タグにインデントをつける

２項の例でもお分かりの通り、タグの中に別のタグを書く場合、インデントをつけて右寄り（2?4カラム程度）に書きます。これを行うことでタグの親子関係と開始・終了タグの関係が明確になります。タグが兄弟関係（head と body 等）の場合は同一のインデントします。

開始タグと終了タグをペアで書く

上から順番に書くという方法は、終了タグを書き忘れる結果を招きます。あるタグの開始タグを書いたら必ず終了タグを同時に書き、それからその中に新たなタグを書くようにしましょう。HTMLでは前述の通り終了タグが省略可能な要素がありますが、XHTMLの仕様にもとづいて記述することを推奨します。

タグにコメントをつける

簡単な構造であれば不要ですが、例えば div タグが何重にもインデントになってしまうとタグの対応が分かりにくくなります。こういう場合は終了タグに開始タグの id 属性や class 属性をコメントとして記します。
２項のリストの場合であれば下記の青色のようなコメントをつけると分かりやすくなるでしょう。

   <div class="entry-content"> 
      <div class="entry-body"> 
      <p>test</p> 
      <p class="entry-footer"> 
         <span class="post-footers">投稿者: Melody 日時: 23:37</span> <span class="separator">|</span> <a class="permalink" href="http://.../hogehoge.html">パーマリンク</a> 
         | <a href="http://.../hogehoge.html#comments">コメント (0)</a> 
         | <a href="http://.../hogehoge.html#trackback">トラックバック (0)</a> 
      </p> 
      </div> 
      <!-- /entry-body -->
   </div> 
   <!-- /entry-content -->
</div> 
<!-- /entry -->

ただしインデントを付与したりコメントを書くと、ファイルサイズをその分増大させることになります。書きすぎないようご注意ください。

Posted by yujiro このページの先頭に戻る

小粋空間 - a cheap joke and a play on words site