CSS対応で内容と見栄えを分離

スタイルシート機能を活用して、サイト全体での今後のメンテナンス性を向上させるように直しました。それと同時に、行間を広く設定して読みやすくもしました。ただし、スタイルシート機能に対応していないブラウザでの見栄えは、残念ながら切り捨てることにしました。長い目で見ればベストな決断だと思います。

●CSS1に対応させてメンテナンス性を向上

　サイト全体を、スタイルシート機能のCSS1（Cascading Style Sheets, level 1）に対応させました。CSS1を用いると、ページの内容と見栄えをかなり分離できます。それによって、見え方の統一が容易になると同時に、見栄え変更の手間を大幅に軽減可能です。
　CSS1をサポートしているブラウザは、Netscape Navigatorならバージョン4.0以降、Internet Explorerならバージョン3.0以降です。これらのブラウザで見ると、定義したスタイル設定が使われ、文章が読みやすく表示されるはずです。CSS1ではテキストの行間が指定でき、本サイトでは全ページに設定してあるからです。
　ただし、問題も数多くあります。CSS1対応のブラウザであっても、CSS1で規定されている機能の一部しかサポートされていないのです。また、バグも結構残っているようです。これらの原因により、見栄えを相当に良くすることは難しいのが現状です。それでも、今後のメンテナンスを考えれば、今から対応させておいたほうがよいと判断しました。幸いなことに、我サイトはデザインを重視していません。その代わりに、アクセスの軽快さとテキストの読みやすさに重点を置いています。だから現状の対応度でも何とかなり、安心して切り替えられます。
　ブラウザの問題は、今後のバージョンアップによって改善されるでしょう。ブラウザ側の対応度が向上するにしたがって、ウェブページ作成者もCSS1対応のメリットが大きくなります。

●CSS1未対応ブラウザでの見栄えは気にせず

　CSS1を本格的に取り入れるにあたって非常に悩んだのは、CSS1に対応していないブラウザでの見栄えです。最初の段階では、対応していないブラウザでも整って見えるように、TABLEタグで全体を囲んでいました。しかし、このような構造で作ると、内容とは関係のないタグが増えてしまいます。また、見栄えの変更でも大きな制約を残します。それでは本来の目的から遠ざかるので、思い切って決断し、CSS1に未対応のブラウザでの見栄えを、まったくとは言いませんが、あまり考えないことにしました。
　対応していないブラウザで見栄えが悪いといっても、内容が読めないわけではありません。すべてのテキストが表示され、リンクによるページ移動も可能です。しかし、テキストのサイズや色が、スタイルシートで設定したものとは異なります。ブラウザのデフォルトの表示に近くなり、行間が詰まって見えます。テキストはかなり読みづらいでしょう。
　ブラウザとOSの組み合わせを何種類か試した結果、もっとも美しく表示したのが、Mac OSとNetscape Navigatorの組み合わせです。Mac OSの標準の日本語フォントは、MS-Windowsに比べて美しく、読みやすさも相当に上です。この辺の違いは、アップル社が文字の読みやすさなどを重視している結果です。
　Netscape Navigatorのほうは、BODYタグでWIDTH属性が使えるなど、ページ全体を整形する機能に多く対応しています。加えて、見出しと段落の間隔が丁度良く、全体として整って見えます。これが、現状ではベストの組み合わせでしょう。
　最悪なのは、MS-Windows（95およびNT4 Workstation）上のInternet Explorer 3.0でした。段落の前側に大きな空間が入るなど、バグと思われるような表示になります。Internet Explorerは、バージョン3.0も4.0もBODYタグでWIDTH属性が使えません。このブラウザで本サイトを見る場合、少しでも読みやすく表示したいなら、ウィンドウの横幅をあまり広げないようにします。

●同じ種類の設定は一カ所の変更で済むように

　せっかくCSS1に対応するなら、全ページの設定を一発で変更できるように作るのがベストです。というわけで、スタイルシートの設定値は、各ページ内のHTMLに入れず、独立したフィルとして持たせて参照する形にしました。それも１つのファイルを参照するのではなく、表紙ページ用、コーナー扉ページ用、詳細ページ用と、独立した３つのファイルに分けてあります。各ページでは、所属するグループ用の設定ファイルを参照しています。
　こうして作れば、同じ役割の設定を一発で変えられます。ページの種類別にファイルを分けたので、別な種類のページに影響を与えることはありません。種類ごとに、最適な設定値を指定できます。もちろん、どの種類でも、該当する全ページの設定を一カ所の変更で済ませられます。
　段落（Pタグ）用スタイル設定などは、目的別に複数の設定値を使い分けています。一般の本文用の段落では、中見出しよりも全体を字下げして表示します。他に、TABLEタグ内の文字用、要点メッセージ用なども、別々のスタイルとして指定するわけです。これらの設定は、PタグのCLASSとして用意し、段落ごとに該当するCLASSを指定します。この設定値も前述の設定ファイルに含めたので、全体を一発で変えられます。
　以上の内容は、CSS1の基本的な機能を普通に使っただけです。雑誌やウェブ上の資料を読めば、誰でも簡単に作れるでしょう。ただし、一番大切なのは、Pタグなどを役割別に分けることです。たとえばHRタグなら、一般的な区切り線のほかに、両端が短い区切り線をCLASS="SUB"として作成します。こうすると、どの程度短くするかのかは、スタイル定義ファイルを変更するだけで、複数ページが一発で切り替わります。短い線を"SUB"と命名したのは、一般的な区切りよりも弱い区切りだからです。このように、同じタグでも役割別に分ける点が、CSS1を上手に使いこなすポイントといえるでしょう。
　ブラウザ側のCSS1対応度が向上すると、もっと凝った設定が可能になる予定です。そうなることを祈りながら、気長に待ち続けます。とりあえず、メンテナンス性だけは格段に良くなりました。