HTMLに関する役に立たない覚書き

• ブラウザによって（同じブラウザでもバージョンによって）HTMLの解釈（＝表示法）が異なるというのは実に鬱陶しい。ネスケ４で表示確認しながらページを作っていて、一段落したところでMSIE3でブラウズしてみると、あまりの違いに愕然とすることが多々ある。
  
  
• HTMLというのは文書の論理構造を記述するものであって、「表現」「表示」「レイアウト」にこだわるならHTMLのタグではなくスタイルシートで指定するのが「清く正しいHTML作法」である。が、現時点ではスタイルシートを使ってもブラウザによって挙動がマチマチという状況に変わりはない。メジャーな２大ブラウザでなるべく表示の差異を無くそうとすると、後ろめたいものを感じつつＴＡＢＬＥタグやＢＬＯＣＫＱＵＯＴＥ、ＰＲＥ等々をレイアウト指定用に使うことになってしまう。食い違いをなくすためにテキストまで含めて全ページを画像にするわけにもいかないしねえ。ＷＥＢ上にはテキストを１行単位でｇｉｆファイルに変換して、それをびっちり貼りつけて文章を構成している豪快なページも存在するが（笑）。
  
  
• あれこれやっているうち気づいたことをここに書き留めておく。以下のメモはHTMLのポリシーから外れた将来性の無い「小細工」にすぎない。あまり深入りしてはいけない（自戒）。
  
  
• 「ネスケ」はNetscape Communicator(Navigator) for Windows95/NT（４は Ver.4.0x、１は Ver.1.x）、
  　「MSIE」はMicrosoft Internet Explorer for Windows（３は Ver.3.0x）。
  　なぜ検証対象がネスケ Ver.4.xではなくVer.4.0xなのか、についての説明は割愛。
  
  

小細工のための下準備〜特殊文字について

※

上ではブラウザによって表示できるものとできないものがある、Mnemonicでは表示されるがDecimalではだめなものがある……という書き方をしたが、実はこれは不正確な記述である。表示がマチマチになる本質的原因は、このページが文字コードとしてＳ−ＪＩＳ（CHARSET=x-sjis）を指定していることにある。欧文用の文字コード（例えば「ISO-8859-1」）を指定すれば、ネスケ４でもMSIE3でも、またMnemonicもDecimalも、すべて正しく表示される。日本語は化けて読めなくなっちゃうけど（笑）。

欧文ページでの表示を見るにはここをクリック……なるほど、欧文ページではネスケ４でも©は丸付きＣで表示されるのか。

なお、ネスケ１の場合、読み込んだページのＭＥＴＡタグによる指定よりブラウザのデフォルト・エンコードが優先されるらしく、欧文ページを読んでも日本語が表示され特殊記号は表示されない。逆に言うと、Ｓ−ＪＩＳ指定のしてあるこのページであっても、オプションでデフォルトをＬａｔｉｎ１に変えれば、日本語が化ける代わりに特殊記号が表示される（ただし、＆ｃｏｐｙ、＆ｒｅｇとヨーロッパ系特殊文字のみ）。

以上、欧文でページを作る人のための豆知識でした。(^^;)

というのは冗談。日本語ページでも有効な、Mnemonicを使った小技がある。で、　⇒次項

半角スペースと＆ｎｂｓｐ；

• ＆ｎｂｓｐ；は半角スペースを意味するMnemonicだが、ブラウザの表示上は半角スペースとは異なる解釈をされるケースがある。例えば、フォントによっては半角スペースでは字間が詰まりすぎるので字間を空けたいが、複数の半角スペースを入れても無効になる……という場合、＆ｎｂｓｐ；を入れると明示的に字間を空けることができる（こともある）。
  
• 字間を空けるためには全角スペースを使うという手もあるけど……なんかダサい。一応、比較のために挙げておくが。
  
  
  1. This is a pen.  （単語間は半角スペース１つ）
  2. This is a pen.  （単語間は半角スペース３つ）
  3. This   is   a   pen.（単語間は＆ｎｂｓｐ；３つ）
  4. This　is　a　pen.  （単語間は全角スペース１つ）
  5. This　　is　　a　　pen.  （単語間は全角スペース２つ）
  
  
  
• （余談。Win32版Opera 6は全角スペースを無視する。上の4.、5.のように文字の間に全角スペースがある場合は半角スペース１個に置換される。結果、上の1.、2.、4.、5. は、Opera 6ではすべて同じ表示になる。
  2001-12-21追記）
  
  
• ＴＡＢＬＥ内で使った場合、半角スペースと＆ｎｂｓｐ；の違いはより明確になる。　⇒次項

テーブルに空白のセルを作る

テスト1 <TD></TD> テスト2 <TD><BR></TD> テスト3 <TD>半角スペース</TD> テスト4   <TD>＆ｎｂｓｐ；</TD>

　　　ＴＡＢＬＥ背景色＝青、ＴＲ背景色＝灰色、ＴＤ背景色＝赤

• ネスケ４では、
  1. 半角スペースで作った空白のセルは何も表示されず、１セル分の空白となる（テスト１と同じ）。
  2. ＆ｎｂｓｐ；で作った空白セルはＴＤあるいはＴＲで指定した背景色を持つ空欄となる（４）。その意味では２の<BR>と同じだが、セルの幅が<BR>より２ピクセル程度広くなる。
     
  
  
• ＭＳＩＥ３では、
  1. 半角スペースで作った空白のセルは１ピクセル幅の空欄？になる（３）（１の空白と同じ）。
     （ＭＳＩＥ４では、空白（１）と半角スペース（３）では半角１文字幅の空欄が表示される。2000-01-17 追記）
     
  2. ＆ｎｂｓｐ；で作った空白セルは全角１文字程度の幅の空欄となる（ネスケ４とほぼ同じ）。<BR>でも空欄が表示されるが、セルの幅は＆ｎｂｓｐ；の半分になる。
     
  
  
• 上でＴＡＢＬＥ背景色＝青としているが、このページをネスケ４で見た場合、意味がわからないと思う。これについては　⇒次項
  

BGCOLOR指定をTABLE,TR,TDの各タグに入れた場合の違い

TABLE=BLUE TR=GRAY TD=RED TD=無指定 TABLE=BLUE TR=GRAY TD=無指定 TD=無指定 TABLE=BLUE TR=無指定 TD=RED TD=無指定 TABLE=BLUE TR=無指定 TD=無指定 TD=無指定 TABLE=無指定 TR=GRAY TD=RED TD=無指定 TABLE=無指定 TR=GRAY TD=無指定 TD=無指定 TABLE=無指定 TR=無指定 TD=RED TD=無指定 TABLE=無指定 TR=無指定 TD=無指定 TD=無指定

• ネスケ４ではＴＲ、ＴＤ、共に背景色指定していない場合にのみＴＡＢＬＥで指定した背景色がセルに現われる。
  
• ネスケ４とMSIE3でなるべく表示が一致するページ作りを目指すなら背景色はＴＲかＴＤで指定するようにし、ＴＡＢＬＥでの背景色指定は使わない方が無難。
  

清く正しいHTML作法へのリンク

• HTML 4.0仕様書邦訳計画  〜なんたって仕様書だからね、これ以上正しいものはない。
• とほほのＷＷＷ入門  〜勉強になる。
• 極悪HTML研究所  〜このサイト自体は極悪だが、ここのリンク集から「清く正しいHTML作法」を啓蒙するサイト方面に行けたはず（うろ覚え）。
  うろ覚え、とエクスキューズしたまま放置ってのもナニなんでジャンプしてみたら、引越ししてたよ。ジオシティーズに（笑）。（←なぜ笑う）