この記事は、2003年11月10ー17日まで、道具としてのパソコンに書いた記事に加筆、修正を加えたものです。なお、筆者が使っている、Macintosh OSX用のソフトに限定して紹介しています。
パソコンの液晶画面をジッと見つめることは、かなり目の負担になります。年齢によるものかもしれませんが、最近、特に目の疲労を感じ、作業の効率にも大きく影響しています。
WWWでは、閲覧者の身体的特徴になるべく影響されずに情報を受け渡しするために標準化の規格が定められています。ページの見え方が、ウエブページと作成者の個性や主張の一部であることは認めますが、情報の本質は、フォントの色や大きさ、背景の柄とは何ら関係ないのです。ところが、色々な制約や好みを反映して、一部の人にきわめて見づらいウエブページが存在します。閲覧者の様々な身体的特徴に配慮が不足しているウエブページデザインは、結果的に、読み取るのが困難なために情報が正しく伝わらなかったり、ひいては、閲覧者の健康を害する可能性さえ孕んでいます。
閲覧者の好みや、身体的な制約を解消する手段として、ブラウザの設定で、ユーザーが自らの望むようにウエブページの表示を調節する術についてまとめました。
機嫌良くウエブページを閲覧し、リンクを辿っているうちに、妙に見づらいページに出くわすことがあると思います。
実際に眺めているのは、ブラウザ画面の表示で、ページ作成者が何らかの意図を持ってレイアウト・デザインしています。閲覧者は眺めながらその意図がくみ取れない場合、見づらく感じるのです。また、大きな画面や、特定のフォントなど、限られた環境で見易いページも多々あります。わざと見づらくしているようなページもありますが。
これらの中で、見栄に基づく部分は、いくらかの知識があれば克服できるかもしれません。
主に、作成者のページデザインやレイアウトが原因で見づらいページを、ちょっとした工夫で見易くすることが出来ます。
その前に、閲覧者の環境とウエブページの見え方についてまとめておきます。
閲覧者の環境に十分配慮されたページでは、これらの閲覧環境に要求される条件が緩い。しかし、作成者はしばしば、自分の環境を標準と考え、それ以上の閲覧環境を要求するページを作ることがある。作成者側は、可能な限り、閲覧者の環境に左右されにくいページ構成となるように注意を払うべきである。
閲覧者にとって、これらの閲覧環境を整えることはコスト面の問題もあるし、ハード、ソフト共に日進月歩という状況であるから、何処で折り合いを付けるかは、閲覧者が自分の責任で決めることである。
私なりの基準は、
これらの閲覧環境を整えた上で、閲覧者が設定可能な部分は以下の三点となる。
ブラウザ表示を環境設定で調節する方法とユーザースタイルシートの利用法についてまとめます。
いつも参考にさせてもらっているいくつかのサイトから、ウエブページのフォントサイズに関する資料。
フォントサイズをどうするか。これは文書の構成と密接に関わります。新聞記事には、見出し、要約、小見出し、本文と並んでいます。筆者の署名や脚注が添えられることもあります。読者が理解しやすい様に、各々の構成要素を並べて、なおかつ、文書の各部分を明確に区別出来るように、フォントを変えることは有効です。例えば、見出しは目立つ場所に、大きなゴシックフォントで。本文と思って読んでいたら、実は要約だった、などと云うことがないように、要約部分はそれと分かるように囲むとか。しかし、結局は、本文を読ませるためにそれ以外の構成成分は添えられるわけなので、あくまで基準は本文になるべきです。
従って、文書のフォントサイズは、本文を100%、1emとして、それ以外の部分を相対指定（本文のフォントサイズに対して％、あるいはemで）し、文書全体のバランスを取るのが筋だと思います。
この話題は、以下のサイトに取り上げられていたもの。元々は、hatena::agendaの10月25日以降の記事。（hatena::agendaの過去ログ）特に、ねこめしにっきには、これに関する関連文書の一覧もあり、参考になります。
実際には、ウエブサイトの作成者が、本文中のテキストを小さめに指定するケースが、往々にしてあるようです。単純に思いこみや無知が原因で、そうする場合が多いと思います。一年前には、私も<font size="2">とか、やっていました。どうしてそうしていたか、思い出してみると、とりあえず、自分のホームページを自分の思ったようにレイアウトしたい、と云う発想があって、画像を埋め込んで、テーブルを使ってレイアウトしようとした場合、フォントが小さい方が融通が利くのです。その際に、作成者（一年前の私）は、閲覧者が私のデザイン上の意図を無条件に受け入れてくれていると、勝手に思いこんでいました。そして、小さめの文字の方がなんだか格好良いとか、ちょっと薄目の色を使うとクールに見える、というか、自分の印象に残っているクールなページがそうなっていたと云うこと。この二つが絡み合って、ページのデザインの重要な部分として、文字サイズを小さめにしていたのです。多くの場合、閲覧者がどうやってウエブページを見ているかまで、思い及んでいません。
特に、私の場合は、マックを使ってでウエブページを作り、マック用ブラウザで表示確認、閲覧していましたので、他の大多数（ウインドウズユーザー）の閲覧環境といくらか異なっていたわけす。また、ブラウザはフォントサイズを指定できるので、あるフォントサイズが、ちょうど良いか、許容しがたいほど大きいか、小さすぎて読めないか、と云う判断は、各自によって異なるのです。幸い、私は当初、Internet ExplorerのMacバージョンを使っていて、ブラウザにフォントサイズを調節するボタンを付ける方法を知っていたので、ブラウザ表示のフォントサイズが好みに合わなければ、フォントサイズを段階的に調節していました。だから、他の閲覧者も、見て変だと思ったらフォントサイズを調節してくれるだろう、と思っていました。しかし、問題はそれほど簡単ではなく、以下の理由で、自分の意図したレイアウトは決してその通りは伝わらないと思います。
この問題、つまり、閲覧環境の違いによってウエブページの見え方が違う、と云うことに気が付いたとき、問題は、深刻に思えました。そういうときに、ウエブ標準、HTML+CSSに出会ったのです。とりあえず、正しく記載して、あとは、閲覧者に任せる。自分の意図通りでないとすれば、それは閲覧者の責任なわけで、閲覧者が満足すればそれで良い、と云う発想で。気分はかなり楽になりました。
その方法として、普遍的なルールに忠実なHTMLを作り、見栄を調節したい場合は、外部スタイルシートを使うという方法です。もちろん、テーブルレイアウトなどは使いません。そうすることによって、作成者側にもたらされるメリットは、
悩みが減るということです。
マックOSX用の主要なブラウザソフトで、ウエブページの見え方を調節する方法をまとめます。ウインドウズユーザーで、マックのことはまるで分からない、と云う方には、いくらか参考にしていただけるのではないかと思います。
についてまとめています。
因みに、スタイルシートを使うと、
「フォントサイズが
px 値で指定されてると WinIE で文字サイズメニューから大きさを変えられない」
と云うことになるそうです。要するに、ウインドウズのエクスプローラでは完全にフォントサイズ固定ができる（！）と云うことらしいです。知りませんでした。
このごろのマック用デフォルトブラウザ。きれいで素早い表示がウリ。タブブラウザです。リファラーの自称名はMozillaです。
大変シンプルな環境設定。十分かと言われると、少々足りない気もする。画像非表示でAltが表示されないのは大変拙いのではないか？アップルを信用して下さい、と云うことだろうか。
基本的には同じ筈。Mozillaは私のメインブラウザ。
ドキュメントで他のフォントを使用できるようにする：このチェックボックスをオンにすると、ユーザの設定ではなく、Web ページのフォントとサイズ設定が使用されます。
一応、正規ユーザーであります。機能てんこ盛り。マックバージョンを使っている人は滅多に居ないみたいです。リファラーの自称名は、デフォルトでOpera。しかし、初期設定でMozillaやIEとして認識させることが出来ます。特徴は、作成者モードとユーザーモードの切り替え機能。デフォルトの設定では、「ウエブ作成者の提供する設定を無視するモード」と、「ユーザーの設定を無視するモード」、と云う感じで、メニューの日本語は妙です。以下、テキストの表示について、まとめます。
いやいや、なかなか大変な作業。しかし、自分が如何にブラウザの設定について無知であったか思い知らされる。というか、サファリの環境設定が単純すぎる、と云う気がしないでもなく。もう少し続きます。
最近になって、ver7.50が登場しました。まだ使いこなせていませんが、そのうちに追記しようと思います。
OSX専用のMozillaブラウザ。リファラーの自称名はMozillaです。
スタイルシートの適用を切ることは出来ない。ユーザースタイルシートを選択することも出来ない。
Caminoを終了し、cssファイルをホーム/Library/Application Support/Camino/chromeに「userContent.css」という名前で入れる事で有効になります。
とのことです。ネットスケープと同じやり方です。（Caminoを使おう：ユーザーCSS）
これも、ver 0.8が登場しています。
これも、マックOSX専用ブラウザ。タブを使えないことを除くと、なかなか良いです。サファリのお気に入りを読み込める、唯一のブラウザです。リファラーの自称名はデフォルトでOmniWebですが、色々選べる。ウインドウズの振りをすることも出来るようです。
マック専用、ドイツ製ブラウザ。スタイルシートに対応し切れていない。タブ機能が付いた。リファラーの自称名はデフォルトではNetscape 4となる模様。他のブラウザになりすますことが出来る。もちろん、iCabを名乗ることも出来る。スタイルシートの表示が全然ダメ。
自分でも、ユーザースタイルシートを使ってみようか、と思い、まとめを作ったのですが、それぞれのブラウザソフトで、ずいぶんと扱いが違います。単純に、ユーザースタイルシートを指定しただけでは、どうにもならないように思う。そもそも、私がユーザースタイルシートに対して持っていたイメージと、なんだか違います。
とりあえず、ユーザースタイルシートとはどういうものなのかを、改めて勉強（と云うと、少々大げさだが）しなくては。少なくとも、具体的なイメージ、ユーザースタイルシートで何が出来るか、を、出来るだけ正確に把握しておく必要がありそう。
と云うわけで、頼りになるサイト、Personnelの、「ユーザースタイルシートのススメ」を、じっくり読み返してみることにします。ついでに、google検索（ユーザースタイルシート）。
それにしても、次々と新バージョンが出る。なかなか最新の情報を集めるのが楽ではありません。
ユーザースタイルシートを使ってみようと、色々調べてみたわけです。スタイルシート適用法はそれほど難しいことはありません。早速やってみました。繰り返しっぽくなりますが一応まとめておきます。
とりあえず、自前のスタイルシートを使って、試してみたのですが、全く思い通りにはなりません。なかなか手強そうです。
うまくいかないのは何故か。ユーザースタイルシートを設定すると、元の表示がほとんどそのまま残り、ユーザースタイルシートの設定が部分的に被ったように表示されます。ちょっと資料を当たってみますと、スタイルシートの優先順位について。
とあります。資料は、Web Designing 2002年２月号、大藤幹さんの記事です。
さらに、スタイルが競合する場合の優先順は高い順に
となる、とのこと。つまり、単純に、ユーザースタイルシートを指定した場合、
の三つによってスタイルが指定されることになり、指定が重なる部分は上記の優先順で、重ならない部分はそれらの折衷で表示されると云うわけです。
これで分かったことは、つまり、ユーザースタイルシートのみに依存して、思い通りに表示させるには、制作者指定スタイルシートと、ブラウザデフォルトスタイルシートの指定の全てに優先するような、完全なスタイルシート（HTMLの全ての要素をセレクタにして、宣言に!importantを付ける）を用意しなくてはならない、ということです。
まず、ユーザースタイルシートを用意する際の問題点と感じるところ。
上記、「ユーザースタイルシートのススメ」の中で、そふぃあさんが、同様の点を指摘しています。
誰にでも作れるので、自分で作ってみるのもいいかも知れませんが、適当に作ってしまうと閲覧するサイトのスタイルシートと競合してしまって、逆に読みにくくなることがあります。デザインのバランスも崩れて不快です。それで、結局使わない方が面倒がなくてよいというオチになることがあります。自作なさるなら徹底的に変えるか、ワンポイントを修正するものが良いかと思われます。
（強調は引用者による）
そして、実際に、使ってみて感じる問題点に、触れておきます。
自分でも、ユーザースタイルシートを使ってみようか、と思い、まとめを作ったのですが、それぞれのブラウザソフトで、ずいぶんと扱いが違います。単純に、ユーザースタイルシートを指定しただけでは、どうにもならないことは明白。
初めは、どうしてうまくいかないのか、逆に、そふぃあさんの作ったたスタイルシートがどうしてうまくいくのか分からず、CSSファイルのソースを見てみると、ほとんどの行に、!important と、書き込んであった。そうか、そういえば優先順位があったなぁ、と、調べなおした次第。
いつまで経っても素人領域にいる私ですが、素朴に思うのは、
と、云うような感想。
こんな便利な仕組みがあるんだから、環境設定の隅っこに埋もれさせるのはもったいない。と、思う反面、ユーザースタイルシートの使用が一般的に普及して、様々な既製スタイルシートを使うのが流行り出すと、ケータイの着メロみたいなことになるかも。シャレとしか思えない様な、とても実用的でないような、ただ、単に笑えるだけ、のスタイルシートが流行ったりしたら、それはそれで嫌と思う。
まぁ、別に、どう見られようと構いやしないけれど。
oyanews/homep/usrstylsheet