2017年10月15日バックアップの旧・時代おくれです現行サイトはこちら

（7a）：『時代おくれ』的記述の根拠

2003年7月18日作成／2003年12月22日更新／2加筆

ここは、ある問題をせっかく解決しても時間が経つと記述の根拠がわからなくなる、ひどい場合には何を解決したのかわからなくなり、記述が元に戻ってしまうのを防ぐ『根拠の備忘録』です。

HTML3.2的記述方法からHTML4.0で禁止されずに（非推奨でも）生き残り、かつ3.2以前の旧版ブラウザ、音声ブラウザやテキストブラウザでも再現可能な極限られたタグのみ使用しています。その使用方法も規則に従ったオーソドックスなもので、あっと驚くスーパーテクニックはありません（その逆はあるぞぉ ^_^;）。

想定しているブラウザは32Bit版のNN1以降、IE3以降、Opera6以降、w3mおよび音声ブラウザです。

なお、ソースの（私が作成する場合の）記述順という大変不思議な配列になっておりますm(__)m。

<!DOCTYPE>と<lang>

これを正しく宣言するのが基本中の基本、出発点です。これを明示しないとW3CのValidationサービスも受けられません、論外とはねられます。

『時代おくれ』はフレーム無し、非推奨要素使いまくり(^_^;)なのでドキュメントタイプ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">、言語 <html lang="ja">となります。なお、<!DOCTYPE>は大文字・小文字も影響するので、解説書などから正確に書き写す必要があります。

新しいブラウザはドキュメントタイプ典拠の有無で『新しい（正確な）記述向きの標準モード』と『古い（間違った ^_^;）記述向きの後方互換モード』を切り替えます。概して標準モードはHTML解釈が厳格ですが、厳格すぎてW3CのValidationサービスに適合していても表示に問題が生じる場合（新エンジンのバグ？）があります。

NN7の標準モードはカラーコードの#や値の単位のpxなどの省略を認めませんが、これは、省略する側も悪いような気がします。しかし、IE6とOpera7の標準モードでは<center>が<table>内部に干渉し個別セルでも有効になってしまい、さらにOpera7は<hr>の位置指定にも失敗します。こちらはページ全体をセンタリングしている『時代おくれ』では被害甚大、かなり深刻な問題です(T_T)。なお、Opera7最新ビルドでは改善されたと言う情報があります（未確認）。

非推奨記述も併用するTransitionalの場合はドキュメントタイプの典拠（http://www.w3.org/TR/html4/loose.dtd）を省略し、意識的に後方互換モードにする方が安全です。この章のブラウザの挙動に関する記述も、特に断りがない限り『後方互換モード』が前提です。

<meta>

charsetの省略やx-sjisの使用を薦める文章を見かけますが、それはNN2がシェアを確保していた当時の文字化け対策です。charsetの省略やx-sjisの使用はHTML記述の妥当性を損ない弊害が予想されますから、NN2でも閲覧可能にしたいのであればiso-2022-jpを使用するほうが安全です（（5）：iso-2022-jpによる提供（暫定））。

NN2全盛時のページは当時を知る資料であり、記録として保存する値打ちがあります。しかし、十分に新しいページで『理由も示さず、Windows環境＝ Shift_JISであることの確認もせず、charsetにはx-sjisを指定する』と解説されている事があります。掻き集めた情報の真偽新旧を吟味せずに盗用、いやいや出典無しで転載するのが一番の問題なのですが、参考にしたサイトに作成年月日がなかった可能性があります。ページに作成年月日を明示しておけば、そのページが保存（放置 ^_^;）された場合の資料価値はより高まり、情報の混乱も防ぐ事ができます。

Up	CSS／記述場所と制御項目

カスケーディング・スタイル・シート、CSSは文書の体裁を定義するもので、（1）別ファイルに記述しヘッダー内でそのファイルを指定、（2）ヘッダー内に記述、そして（3）インラインスタイル要素として文章中に直接記述の3通りの記述方法があります。 CSS自体が表示されてしまうなど、ヘッダー内に記述すると非対応ブラウザでCSS記述が原因の整形失敗が起こる場合があります。だからと言って、すべてインラインで指定するのは『クラシックな記述』に比べ文字数が多くて大変だと言う事から、原則的に外部ファイルで指定し、個別に変更したい部分だけインラインで指定します（普通はそうだ ^_^;）。

通常、CSSの場所指定を間違えても『存在しない』ので単純に無視されるだけですが、割当てられたディレクトリの上位階層などアクセス権のおよばない場所を指定してしまうと、NN4ではHTML本文もNot Foundとなってしまうので、要注意です（って、こんなマヌケは他にいないだろう T_T）。

NN4とIE3で障害を起こす項目を排除するのは当然、非対応ブラウザと可能な限り共通の表示を得るために他の手段で実現可能な項目も除外、CSSで指定するのは<ul>、<ol>、 <dl>および<p>の行間調整、<p>の文頭字下げ、<h1～6>のマージン調整、およびリンクの下線制御の4項目に限定します。

IE3.0xは複数指定された最後の外部CSSファイルのみ読み込むので、空のダミーを置くなどすれば適用の有無を含めCSSを使い分ける事が可能と言う記述を見かけます。しかし実験の結果、16Bit版IE3.02a（2916）は複数の外部CSSファイルを正しく読み込み、32Bit版3.02（4.70.1300）はダミーファイルを無視、最後の有効なファイルを読み込みました（逆なら都合よかったのですが・・・次章参照）。従って、この方法で確実にIE3.0xを振り分ける事は出来ません。あるビルドでは正しいのだと思いますが、一般化され方々で見かけるのは、みんなで広げよう無検証転載の輪！と言うことでしょうか(^_^;)。

未確認ですが、CSSを記述する際に:（コロン）と値の間を半角スペースで区切らないと、うまく機能しないブラウザ（バージョン）があるらしいです。W3CのCSSチェックでは、スペースの有無に関係無く適合になるので、用心のためスペースで区切ります。

CSS／行間調整

行間調整は{line-height: 175%}の様に％で指定します。

32Bit版IE3では％以外で行間を指定した場合、16ビット版ではpc以外で指定した場合にpxとして処理され、行がダブって判読不能になります。しかし、読み易さに直接かかわる行間調整を止めるわけには行きませんから、当然、相対指定である％を採用です。

仕様が逆なら抜け道があったのですが、前章で示した様に外部CSSを分割する事で16Bit版IE3を別扱いする事はできませんから、必然的に『時代おくれ』は16Bit版IE3では閲覧不可となりますm(__)m。

Macintosh版NN1の行間はゆったりしており特に問題はありませんが、なぜかWindows版 NN2と3（たぶん1も）では行間が異様に狭く、非常に読み辛いです。残念ながらCSS以外に調整方法はなく、だからと言って、かつて流行したNN行間対策、<br>を挿入し１行おきに文章を書くテクニックの害悪は言うまでもありません。今のところ救済策を思いつきませんので、仕様と諦めてもらいます。

本当は<ul>、<ol>、<dl>と<p>に加え<table>の行間調整も行いたいのですが、IE3で判読不能になるので見送りです。どの単位で指定しても、表の下部のほとんどが表示されません。ついでに言うとNN4も可読性を損なうほどではありませんが、対応不良です。

CSS／文頭字下げ

文頭字下げは{text-indent: 2pc}の様にpc（パイカ文字サイズ基準）で指定します。

誰が考えても１em（１文字）指定がよいに決まっていますが、emで字下げを指定するとIE3ではピクセルとして処理されてしまい、うまく機能しません。％指定の場合はIE3も含めすべてのCSS対応ブラウザで機能しますが、絶対値固定となってしまいます。pc指定もパイカサイズを基準とする絶対値指定ですが、なぜかNN4では表示する文字のサイズで調整されてしまいます(^^ゞ。pc指定であれば、このNNのバグ、いやいや、数少ないメリットを生かす事ができます。もちろん、他のブラウザでは本物の絶対値固定ですから、大きな文字の字下げ幅を考慮して2pcを指定します。

なお、通常考えられない値であり実害はなさそうですが、字下げ幅に75%などの極端な値を指定すると、IE4は整形に失敗、NN4は下げ幅が不正確になります。50%以下であれば問題ありません。ちなみに、Operaは100%までは『１行ずらし』できっちり対応しますが、100%を越えると整形できなくなりますって、言掛かりでしょう。

少なくとも後方互換モードの場合、『逆字下げ（マイナス指定）』は飛び出した文字が消えてしまうなど深刻な障害が起こるので禁止します。実際に逆字下げを使用しているサイトがあるので、対応ブラウザ（整形可能な環境）は存在すると思いますが、私はまだ『正しく整形できるブラウザ』を確認していません。

意味段落中の強制改行、形式段落は日本語では普通の形式であり、改行するが行送りはしたくない場面があります。しかし、{text-indent}は文頭のみ有効で、段落途中で強制改行<br>しても適用されません。意味段落<p>内部に<字下げ設定したdiv>を形式段落として配置する方法は、Operaが<p>の行送りに失敗する事で挫折しました。日本語的には改行した上に行が空くと意味段落と言う事になってしまいますが、ここで頑張って解決しても、CSS非対応ブラウザでは読み難いベタ長文になってしまうので、我慢しましょう。もともと欧文用の規則です (T_T)。

非対応ブラウザに配慮してCSSではなく（連続した複数）スペースの挿入で調整する方法もあります。私も最初そうしていましたが、スペースも空白と言う文字情報ですから無闇に挿入してはいけないと感じるようになり、また、おそらく正しい解釈で最近のブラウザが文頭のスペースを無視するのでCSSによる字下げに切り替えました。非対応ブラウザはNN1～3と言う事になりますが、そのWindows版では行間も空かず長文は非常に苦痛ですから、1段落が長くならないように文章を工夫する必用があります。

CSS／<h1～6>のマージン調整

ほとんどのブラウザで見出し<h>は行送りされますが、私はその間延びした画面が大キライ、これまで<h>を使用しなかった理由です。と言うわけで、この項目はアクセシビリティとは無関係、私の趣味の問題です(^_^;)。

<h>の行送りは（正しい作法ではないかもしれませんが）ボックス要素の{margin}で制御可能です。そこで、見出し<h>の行送りは{margin: 0em}として断固阻止！です。なんですが、CSS非対応のNN1～3はもちろん、NN4からも無視され制御不能です。

ほとんどのブラウザでは<h>の行送りを下部のマージンに加えるようですが、IE3には下部のマージンが存在せず、<h>のボックス外に本当に1行挿入している様です。そのため{margin}は左右と上にのみ有効で、肝心の下側は制御不能で行送りは止められませんが、IE3の場合余り気になりません（その理由は『<h1～6>／<table>による装飾』の項目参照）。

ボックス要素には他に{padding}と{border}が有りますが、NN4は{border}を指定すると他の要素で指定した修飾が飛ぶなど、整形が怪しくなります。

CSS／リンクの下線制御

まずリンクの下線消しですが、純粋に体裁上の問題であり、しかも不用意に下線を消してしまうと、状況によってはリンクである事が分らなくなります。『リンクの下線消し』は、本来行なうべきではありません。だったら消すな、と言う話になる訳ですが・・・これは私の趣味の問題で、あの、その・・・<table>と組み合わせてボタン的に表示された『表紙にもどる』や『閲覧・書き込み』など下線が無くてもリンクである事が明らか、かつ罫線と下線が引っ付いて見苦しい状況に限っています(^_^;)。

例外的指定ですから外部ファイルではなく、インラインスタイル指定<a href="" style="text-decoration: none">で下線を消しています。このリンクの下線消しはNN4、IE3共に有効です。

次に、リンク色の部分的変更ですが、Operaのリンクの下線色には注意が必要です。背景色の都合でリンク色を部分的に変える場合、Operaは <font color="カラーコード">でリンク文字の色を変えても下線色が変わりません。標準のリンク色ではコントラストが失われるから色を変えようとしているわけで、下線が見えなくなってしまいます。インラインスタイル指定の場合は3ブラウザともに下線色も同時に指定可能ですが、CSS非対応ブラウザでリンクそのものが隠し文字になってしまいます。

そこで、背景色の都合で部分的にリンク色を変更する場合は<a href="" style="color: カラーコード"><font color="カラーコード">のように2重に指定します。って、現実に救済されるのはNN2と3だけだったりする・・・面倒くさい(^_^;)。

次章（7b）に続く

←前

次→

↑目次

表紙に戻る