実験室:CSSを使ってみる
今回はCSS(Cascading Style Sheets)を使った実験をしてみたいと思います。
CSSを使うからといって、デザインリッチな方向にサイト全体を持っていこうとするのではありません。行送りや表示文字ポイントなどを指定して、HTML文書の視認性をどれだけ改善できるのかを確認するのが目的です。特に当研究所の研究発表は、オンラインで読んでいただくには文字が多く、読みにくいと思うからです。
ご注意(1997.12.02)
このHTMLファイルはNetscape Communicator(Navigator) 4.0 for Windowsに最適化されています。Netscape Communicator(Navigator) 4.0 for Macintoshをお使いのかたは、こちらをご覧ください。
また、Microsoft InternetExplorer 3.0でご覧いただくと、見出しの後の空きが大きくなるなど、制作意図通りに表示されないことがあります。あらかじめご了承ください。
CSSとは?
CSSとは、Cascading Style Sheetsの略で、大雑把に言えば、HTMLで表示を詳細にコントロールするための決まりごとです。
フォントの指定、文字サイズや行送りの指定、さらに段落後のアキなど、詳細な指定ができます。
いままで「文字が読みにくいから」とHTMLでマニュアル制作を避けていたとしたら、CSSを使わない手はないでしょう。
また、スタイルシートだけをまとめて1つのファイルとして置いておき、他のHTML文書からスタイルを参照させるという使いかたもできます。こうしておくことで、スタイルシートが記載されているファイルだけを変更することで、リンクしているHTML文書のスタイルを一度に変更するということができるようになります。Webマスターが泣いて喜ぶような機能ですね。
CSSのメリットとしては、以上のような視認性の改善とスタイルシートの統一管理が挙げられます。
CSSをマニュアルで利用するメリットとしては、HTML文書につきまとう視認性の悪さを改善できることがまず挙げられます。
特に、HTML文書をWindows環境で読ませたい場合に威力を発揮すると思われます。というのも、Windowsの日本語表示は、行送りが初期設定ではほとんどとられていないため、とにかく読みにくいからです。まさか英語版の行送りをそのまま使っているのではないだろうな?と思ってしまうような見にくさです。
CSSに対応しているWebブラウザが限られているというのがネックですが、プリインストールされているパソコンのマニュアルなど、ユーザーが使用するWebブラウザが確定しているような環境であれば、CSSを使ったHTMLマニュアルというのもなかなか面白いと思われます。
現状のWebブラウザがサポートしているCSSは、CSS Level1です。Level 2以降の仕様もW3Cで検討中のようです。
CSS Lelel1の仕様を確認したいかたは、こちらをご覧ください(英語です)。
どんなふうに見えますか?
ところで、CSSに対応しているWebブラウザを使わないと、CSSで設定した内容は反映されません。
当研究所で把握している範囲では、CSSに対応しているWebブラウザは以下の通りです。
- Netscape Navigator 4.0以降
- Microsoft Internet Explorer 3.0以降
今これらのWebブラウザでご覧になっている皆様、いかがでしょう。
今までの当研究所のページと比べて、かなり見やすくなっているのではないかと思います。え?、あまり変わらないばかりか、かえって見にくくなっているって? それは失礼しました。今後の参考にさせていただきます。
参考までに、本文がサイズ10.5pt/行送り200%、小見出しが14ptです。小見出しの色も、CSSで指定しています。
CSS部分のHTMLのソースについては、この文書のHTMLソースをご覧ください。
今回はCSSの実験ということで追加してみました。
「CSSくらい知っているよ」というかたには目新しい情報ではないですね。
PDFでも良いのですが、視覚障害者用の読み上げソフトの存在なども考慮に入れると、HTML文書を使ったヘルプに増えていって欲しいと思います。
バイナリ文書では、テキスト部分だけを自動で読み上げるというわけにはいきません。
ASCIIテキストベースのHTML文書は、こういうときに便利ですよね。
そうは言っても、HTMLのヘルプの導入にあたっては、視認性の改善が重要視されるものと思われます。やはり現状のHTMLの表現力をみると、よほど特殊な組みかたをしないかぎり表現、視認性の改善は困難ですし、特殊な組みかたをしたソースは修正、展開することが非常に困難です。
以上のような状況を考慮に入れると、CSSに積極的に取り組んでみる価値は多いにある、と言えるのではないかと思います。
今回の内容に関してだけでなく、見栄えに関するご意見、ご質問なども歓迎いたします。それでは今回はこのへんで。
|