HTML5化

従来(HTML4.01)のページをHTML5化するに際して、面倒なのがトップページ(index.html)である。一応は今はHTML5になっている。
他の平板的なデータページとは違う方法を使っている点がいくつかあるので他のページのように簡単にはいかない。
  1. HTML5ではtableタグをレイアウトに使わせない仕様になっているが、このページのレイアウトにはtableタグを(しかもネストで)多数使っている。
    しかし、td要素のcolspanとrowspan(その行を含めた数を指定)の属性は使えるが、それ以外の従来の属性は使えない。

  2. HTML5ではコンテンツ・アイテム間にスペースが自動的に入ってくるので従来よりも縦長で冗長になる。
    特に、画像の下にスペースが入る点は従来とは逆の発想が必要になる。スペーサーでドット単位で調整することができない
    また、従来は画像の下や作画段階で画像の下にわざわざ無用のスペースを入れていたこともあった。これは以後は無意味である。


  3. メニューなどの部分でheightを指定している場合は従来より +6 ほど大きくする必要がある。指先化に合わせた改悪の結果である。

  4. レイアウトに使っていたスペーサーは基本的には不要である。
    <tr><td><img src="img/spacer.gif" width="10" height="5"></td></tr>
    これは原則削除する。「height="1"」にしても同じである。この数値で調節できない。
- 2014/07/03-




HTMLはページ内のデータの構造の記述だけになる。ページの外観に関する部分(色やレイアウトなど)はカットされる。これらについての記述はスタイルシートを使うことになる。

Bタグは非推奨要素ではない。強調する場合はSTRONGタグでもよい。しかし、いずれも外観に関するタグだからいつ非推奨(廃棄)になるかもわからない。

HTML5で使用できる文字コード
UTF-8,Shift_JIS,EUC-JP,ISO-2022=JP
この文字列を指定する。文字は大文字でも小文字でもかまわない。

外部CSSファイル(*.css)に文字コードを指定する場合。
これは別に指定しなくてもよいが、書く場合はファイルの先頭に次の1行を置く。
@charset="UTF-8";


tableタグの書き換え例

以前はレイアウトにtableタグを使うのが普通だった。だからその残滓が今でもあちこちに残っている。特に昔作ったPerl/CGIやPHPにはまだ多く見られる。これもいずれCSSに変更していく必要がある。

下記はその書換の例である。


【CSS】
table {color:black;font-family:MS ゴシック,Osaka;font-size:11pt;line-height:100%;}

.tbtop {border-width:0;border-spacing:1;}
.tbtop td {padding:2px;}

.tbdat {width:100%;border-width:0;border-spacing:2;}
.tbdat td {padding:2px;}

.tbfoot {width:100%;border-width:0;border-spacing:0;}
.tbfoot td {padding:1px;}

td.w210 {width:210px;}
td.w110 {width:110px;}
td.w320 {width:320px;}
td.w180 {width:180px;}
td.w300 {width:300px;}

【旧】
<table width="$constTableSize" border="0" cellspacing="2" cellpadding="0">
【新】
<table class="tbtop">

【旧】
<td width="210"><img src="$gifTitle"></td>
【新】
<td class="w210"><img src="$gifTitle"></td>