快適なウェブページ閲覧のために

概要

目次

用語解説

スタイルシート
 スタイルシートとはHTMLページの見栄えを調整する設定で、「デフォルトスタイルシート」 「製作者スタイルシート」「ユーザースタイルシート」 の三種類に分けられます。
 「デフォルト〜」は、ブラウザに初めから設定されたスタイルシートで、IEなら、 「未クリックのリンクは青、既クリックのリンクは紫」「blockquoteタグで囲まれた(引用された)箇所の左右に余白が できる」などはこれによるものです。(正確に言うとこの設定も一部変えられるのですが、本稿の趣旨とは無関係であるため、 扱いません。)
 そして、「製作者〜」はそのウェブページの製作者によって設定されたスタイルシート、「ユーザー〜」は 各閲覧者がサイトを閲覧する際に用いるスタイルシートです。
 製作者スタイルシートを使用しない方法については 製作者スタイルシートの無効化を、 ユーザースタイルシートを使う方法については、ユーザースタイルシートの導入を ご覧下さい。
 (ユーザースタイルシートについて更に知りたい方には、 「ユーザースタイルシートのススメ - Personnel」が、 スタイルシートそのものについて知りたい方には 「ごく簡単なHTMLの説明」、 「K@tsukun's PAGE!」など が参考になるかと思います。)
ブックマークレット
 ブラウザのURL欄には通常はURLを入力しますが、ここにJavaScriptを入力することでブラウザに様々な機能を 持たせることができます。このような働きをするJavaScriptをブックマークレットといいます。 正確には、ブックマークレットは以下のような方法で使うことができます。
  1. URLの代わりにブックマークレットをIEの「お気に入り」に登録し、ブックマークレットを使いたいページを開いた状態で その「お気に入り」を開く。(このページにあるようなリンクになっているブックマークレットをお気に入りに登録 するには、リンクを右クリックして「お気に入りに追加」を選んでください)
  2. ブックマークレットを使いたいページを開いた状態でURL欄にブックマークレットを入力し、キーボードのEnterキーを押す。
  3. ブックマークレットへのリンクをクリックする。(そのページにブックマークレットへのリンクがある場合のみ)
 ブックマークレットを使ったページを元の状態で閲覧したい場合は、基本的にリロードすれば大丈夫です。 尚、ブックマークレットは既に述べたようにJavaScriptの一種であり、JavaScriptオフの状態では使用できません。
 (ブックマークレットについて更に知りたい方には 「JAVASCRIPT::BOOKMARKLET」が参考になるかと思います。 このページで紹介したブックマークレットの多くは、こちらからコピーさせて頂きました。)
JavaScriptオフ
 ブラウザの「ツール」→「インターネットオプション」→「セキュリティ」→ 「レベルのカスタマイズ」とクリックし、(多分上から8番目の)「アクティブスクリプト」の「無効にする」にチェックを入れて「OK」 と設定することでJavaScriptを切ることができます。以後、新たに設定し直すまでオフのままです。
 尚、JavaScriptは様々なページで利用されており、この設定にすることでそのようなページの閲覧に不都合が発生する 可能性もあります。
 また、一時的にブックマークレットでJavaScriptを切ることも可能です。但し、ブックマークレットの性質上、 この操作では本稿で紹介するような問題はあまり解決できないでしょう。
AcitveXオフ
 ブラウザの「ツール」→「インターネットオプション」→「セキュリティ」→ 「レベルのカスタマイズ」とクリックし、(多分1番上の)「AcitveXコントロールとプラグインの実行」の「無効にする」に チェックを入れて「OK」と設定することでAcitveXを切ることができます。以後、新たに設定し直すまでオフのままです。
 尚、この設定にすると、様々なウェブページで利用されているFlashが無効化されるため、 そのようなページの閲覧に不都合が発生する可能性もあります。
色の無効化
 ブラウザの「ツール」→「インターネットオプション」→「ユーザー補助」→「Webページで指定された色を 使用しない」にチェックを入れて「OK」と設定することで、製作者スタイルシートとユーザースタイルシートの 内の、色および背景画像に関する設定がすべて無効化されます。以後、新たに設定し直すまでオフのままです。
 どんな配色のページも格段に見やすくなるはずですが、配色が極端に単調になるため、各サイトの見栄えなどは あまり楽しめないかも知れません。
 また、一時的にブックマークレットで色を無効化することも可能です。但し、どういうわけかこの操作では 配色が変化しないサイトが結構あります。スクリプトで生成されるページは特にその確率が高いようですが、 原因は分かりません。(正確に言うならこのブックマークレットはJavaScriptによってユーザースタイルシート を適用するもので、ユーザースタイルシートゆえの制約を受けます。)
選択
 マウスの左ボタンを押したままカーソルを移動させると、その範囲内にあった文や画像の配色が 変わります。これが「選択」です。尚、キーボードの「Ctrl」キーを押しながら「A」キーを押すことで そのページの全文を選択することもできます。

見づらい要因とその解決法

フォントサイズが小さすぎる/大きすぎる
 ブラウザの「表示」→「文字のサイズ」で最大から最小まで自由に選ぶことができます。 また、ホイールマウスをご利用なら、キーボードの「Ctrl」キーを押しながらホイールを回転させることで同じ 効果が得られます。(これらの方法でフォントサイズの設定を変えると、以後見るページにも その設定が適用されてしまうので、適宜元に戻した方がよいでしょう。)
 上記の操作によっても文字サイズが変わらない場合、それはスタイルシートによってそのように指定されています (これを一般に「フォントサイズ固定」と言います)。 この指定を解除するには、製作者スタイルシートの無効化が必要です。 「ツール」→「インターネットオプション」→「ユーザー補助」とクリックし、 「Webページで指定されたフォントサイズを使用しない」にチェックを入れて「OK」で、フォントサイズの固定が解除されるので、 後は上記の方法で自由に文字サイズを変えることができます。
 また、ユーザースタイルシートで
*{font-size:100% !important;}
h1,h1 *{font-size:28px !important;}
h2,h2 *{font-size:24px !important;}
h3,h3 *{font-size:20px !important;}
h4,h4 *{font-size:18px !important;}
h5,h6,h5 *,h6 *{font-size:16px !important;}
等と指定しておくことでも、フォントサイズの固定が解除できます。 (数値を変えれば文字サイズが変わるので、お好みの数値を設定しておきましょう。ちなみにh1がそのページの 第一レベルの見出しで、以後h2 h3……と下がるにつれて見出しのレベルが下がっていきます。)
 これらの方法なら、全てのサイトを一定の好みの文字サイズで閲覧でき、いちいち文字サイズを変更する必要はなくりなます。
 尚、上記の方法で小さい文字を大きくすると、極端に行間が狭くなり、文字と文字が重なり合ってしまうことがたまにあります。 こういう場合については、行間が狭くて読みにくいをご覧下さい。
 そして最後に、 ブックマークレットを使ってページを拡大する方法、 同じく縮小する方法もあります。 この方法なら、文字はおろか画像まで拡大/縮小できます。
音楽が勝手に流れる
 私の知る限りではウェブページで自動的に流れる音楽の止め方は五種類(1〜5とする)あり、 そしてそれらへの対応によって音楽の再生方式は大きく四種類(A〜Dとする)に分けることができます。
 そして、下図が再生方式とその止め方の対応図です(「○」ならその止め方が有効ということ)。
再生方式 止め方(1) 止め方(2) 止め方(3) 止め方(4) 止め方(5)
× ×
× × ×
× × ×
× × × ×
 残念ながら(?)、設定では音楽が流れるのを完全に予防することはできず、場合によっては流れ始めてから止める 以外ないようです。無論、スピーカーを切っておけば話は別ですが……。ちなみに、実際のところは、 自動的に流れる音楽の多くは(5)で止まるように思います。
 尚、「B」の再生方式には、「QuickTime」 などのプレイヤーをインストールしていない場合には音楽が流れないものがあります。音楽がどうしても気になる方は、 これらをダウンロードしない/アンインストールするのも一つの手かも知れません。
(※この項ついては、閲覧者ごとの環境による違いが特に大きいかと思います。 不足や間違い等がございましたら、ご指摘頂けると有難いです。)
背景色/背景画像と文字色が近く読みにくい
 最も簡単な対処法は、問題の箇所を選択することです。 また、色の無効化製作者スタイルシートの無効化によっても対処できます。
 ユーザースタイルシートを使った方法は少し複雑です。例えば
*{
 color:#000 !important;
 background-color:transparent !important;
 background-image:none !important;
}
body{ background-color:#fff !important;}
としておけばどのページも白地に黒文字で表示させることができるのですが、この設定のみを使うとどの部分がリンクか分からない未クリックのリンクと既クリックのリンクの文字色が同じで区別がつかない、という 問題が発生する可能性が高いので、注意が必要です。それらの対処については、それぞれリンク先をご覧下さい。
どの部分がリンクか分からない
 この見難さは大概、二つの要因が重なることによって発生します。 一つは、リンクに通常付く下線が非表示に設定されていること。 もう一つは、リンクの文字色が通常の文字色と変わらない色に設定されていることです。
 逆に言えば、この問題は製作者スタイルシートの無効化(若しくは色の無効化)で、 この二つの要因のいずれかを打ち消すことで解決します。 この場合には、ユーザースタイルシートで下線を表示させることをお勧めします。
a:link,a:visited,a:active,a:hover{text-decoration:underline !important;}
と指定しましょう。
 また、そういった設定をせずとも、この問題はキーボードの「Tab」キーを使うことによってもある程度解決します。 「Tab」キーを押す度にそのページの新たなリンクにフォーカスが合いますので、後はクリックするか 「Enter」キーを押しましょう。余談ですが、この「Tab」キーは、ある種の隠しリンクを探すのにも有効です。
未クリックのリンクと既クリックのリンクの文字色が同じで区別がつかない
 この対策は色の無効化が最も簡単かと思います。 また、製作者スタイルシートの無効化でも解決可能です。
 尚、ユーザースタイルシートを使った解決方法としては、背景色/背景画像と文字色が近く読みにくいで 紹介した方法で背景色を指定し、その上でその背景色上で見やすい文字色を「未」と「既」、それぞれで指定することに なります。例えば、
a:link {color:#0000ff !important;}
a:visited {color:#800080 !important;}
のように。
行間が狭くて読みにくい
 ユーザースタイルシートで
*{line-height:1.5 !important;}
と指定しましょう(数値を変えれば行間が変わりますので、お好みの数値を設定しておきましょう)。
 また、フォントサイズが小さすぎる/大きすぎるで説明した手順で文字が重なってしまった場合は、 他にも製作者スタイルシートの無効化によって解決することも可能です。
 尚、たま〜に、行間の設定を変えても別の行同士が重なり合ったままの場合があります。 また、そもそも、閲覧者が何も設定を変えていなくても初めから別の行同士や、あるいは表や画像などが重なり合っている場合もあります。 これは製作者スタイルシートのposition指定によるもので、 マウスストーカーが出てきて鬱陶しいで紹介するユーザースタイルシートや、 やはり製作者スタイルシートの無効化によって解決可能です。
マウスカーソルの形が変えられていて鬱陶しい
 ユーザースタイルシートで
*{cursor:auto !important;}
と指定しましょう。
 また、製作者スタイルシートの無効化によって解決することも可能です。
マウスストーカーが出てきて鬱陶しい
 ユーザースタイルシートで
*{position:static !important;}
と指定しましょう。また、製作者スタイルシートの無効化によって解決することも可能です。 但しこれらの設定を行うと、そのページの設定によっては、 代わりに画面隅に動かないマウストーカーが表示されることがあります。 タイプによっては、これがマウスに付きまとわれるよりはるかに鬱陶しくなる場合もあるので一応覚えておいて下さい。 (尚、これらの設定にすると一部のサイトのレイアウトが大きく変わって見えることがあります。)
 また、JavaScriptオフを行えば、マウスストーカーを完全に消すことができます。
新しく開くウインドウが小さ過ぎる/大きすぎる・ウインドウサイズが勝手に変わる
 タブブラウザを使うことで、常に一定のサイズのウインドウを開くことができます。詳しくはタブブラウザの導入をご覧下さい。
 また、ウインドウサイズが勝手に変わるのはJavaScriptオフでも無効化できます。
ポップアップ広告が出てきて目障り
 ポップアップ広告を防ぐツールは幾つかありますが、最も簡便なの は「Googleツールバー」かと思います。また、タブブラウザにも高いポップアップ広告抑止機能があります。詳しくはタブブラウザの導入をご覧下さい。
 尚、JavaScriptオフでも無効化できます。 他にも「Proxomitron」を使えば ポップアップはおろかページ内の広告バナーまで防いでくれますが、少々設定が難しいように思います。
リンク先のページを同じウインドウで/別のウインドウで開きたい
 別のウインドウで開くよう設定されたリンクを同じウインドウで開きたい場合には、 そのリンクをブラウザ上部のURL欄にドラッグ&ドロップしましょう。 逆の場合には、キーボードの「Shift」キーを押しながらリンクをクリックするか、 リンクを右クリックして「新しいウィンドウで開く」を選択します。
URLがリンクになっていないので、開くのが面倒
 例えば“http://www.google.co.jp/”や、hを抜いて“ttp://www.google.co.jp/”のように、 リンクではないURLを提示された場合、URLを選択し、ブラウザ上部のURL欄に ドラッグ&ドロップすれば簡単にそのページを開くことができます。 (尚、この時選択するのは、URL全体でも、“//”以降の部分でもどちらでも大丈夫です。上の例なら、 “http://www.google.co.jp/”でも“www.google.co.jp/”でも構いません。) 訂正:通常のWin-IE環境では上記の操作はできないようです。 そういう環境ではURLを選択してコピーし、URL欄に貼り付けるという手順を追うしかないと思われます。
 また、「ちょこっと強制リンク」をインストールすることで、 リンクではないURLも強制的にリンクにすることができます。
スクロールバーが表示されず、画面をスクロールさせることができない
 スクロールバーが表示されない設定には三種類あり、少し対処法が違うのですが、 まずはマウスで画面の一部を選択し、選択する範囲をどんどん広げていけば スクロールするはずで、これが最も簡単な対処法かと思います(場合によっては、やりにくい場合がありますが)。
 また、ユーザースタイルシートで
*{overflow:scroll !important;}
と設定するという方法や、表示されていない部分にリンクやボタンがある場合はキーボードの「Tab」キーを何回か 押すという方法もあるのですが、これらのやり方には確実性がありません。
スクロールバーの色がみにくい
 ユーザースタイルシートで
body{
 scrollbar-3dlight-color :#ffffff !important;
 scrollbar-track-color:#f0ffe0 !important;
 scrollbar-arrow-color :#0000ff !important;
 scrollbar-base-color :#e0e0e0 !important;
 scrollbar-darkshadow-color :#888888 !important;
 scrollbar-face-color :#d0d0e0 !important;
 scrollbar-highlight-color :#f0f0f0 !important;
 scrollbar-shadow-color :#444444 !important;
}
と指定しましょう(数値を変えれば色が変わりますので、お好みの数値を設定しておきましょう)。
 (尚、時たまこの設定を無視するページがあります。スクリプトで生成させるページがそうなりやすいようですが、 原因は分かりません。 そういう場合はデフォルトのスクロールバーが表示されるので、いずれにせよ見難いことはないと思います。)
 また、製作者スタイルシートの無効化によって解決することも可能です。
(※尚、このスクロールバーの色を変えるユーザースタイルシートは基本的にIEでしか使えません。 そもそもスクロールバーの色を変えるスタイルシートそのものがIEの独自システムだからです。)

ツール等の導入

製作者スタイルシートの無効化
 ウェブページ作成者は、恐らく多くの場合閲覧者への配慮からスタイルシートを設定し、 見栄えを調節しようとするのでしょうが、残念ながら必ずしもそのスタイルシートが閲覧者にとって見やすいものであるとは 限りません。そこで閲覧者には、スタイルシートを無効化するという選択肢があります。
 通常、IEでは「色」「フォントスタイル」「フォントサイズ」以外、 ウェブページ製作者の指定したスタイルシートを無効化することはできませんが、いくつかの方法でそれが可能になります。
 (尚、「色」と「フォントサイズ」の設定の解除方法については、それぞ れ色の無効化フォントサイズが小さすぎる/大きすぎるで解説した通りです。 但し、これらの設定では、製作者スタイルシートのみならず製作者のHTMLによる設定およびユーザースタイルシートの 設定も解除されます。)
ユーザースタイルシートを導入し、製作者スタイルシートを上書きする
 閲覧者がユーザースタイルシートを使うことで、製作者の用意したあらゆるスタイルシートを上書きし、 事実上無効化できます。(実際にはあらゆる要素を上書きするユーザースタイルシートを作るのは かなり大変なのですが、そういうスタイルシートを配布されているサイトもあります。)
 実際のところはあらゆる要素を上書きする必要はないので、比較的見難い設定をしているサイトが多い要素についてのみ 自分で設定すればよいはずです。
 ユーザースタイルシートの導入方法は、ユーザースタイルシートの導入をご覧下さい。
 (尚、ユーザースタイルシートは、製作者スタイルシートと製作者のHTMLによる設定の両方を上書きできます。)
それ以外の方法で製作者スタイルシートを無効化する
 最も簡単な方法は、スタイルシートを切るブックマークレット を使うことかと思います。
 また、「IEMoz ウェブページのCSSを無効にする方法 - Personnel」で紹介されているツールや設定で製作者スタイルシートを切ることができます。
 その他にも、「CSS: 「ス切リボ」」や、タブブラウザ「ぶら。」 にもスタイルシートオフ機能が搭載されています。
 (尚、ここで挙げた方法だと、製作者スタイルシートは無効化されますが、製作者のHTMLによる 設定やユーザースタイルシートは無効化されません。また、同じくここで挙げた方法だと、 ページ単位でスタイルシートのオフを指定する――つまり、スタイルシートを切りたいページを一度普通に開いた後で 切る――ことになります。あと、これらの方法でスタイルシートを切った場合、リロードすれば元通りになります。)
ユーザースタイルシートの導入
 ユーザースタイルシートを使うことによって、全てのサイトをより見やすい形で閲覧することができます。
  1. スタイルシートを記述したファイルをメモ帳等で作り、拡張子を.cssにして保存する。
  2. ブラウザの「ツール」→「インターネットオプション」→「ユーザー補助」とクリックする。
  3. 「自分のスタイルシートでドキュメントの書式を設定する」にチェックを入れ、 その下の欄に今作ったcssファイルを指定して「OK」。
 この設定を行うことで、自分で作ったスタイルシートで各ウェブページを閲覧できるようになり、 以後、新たに設定し直すまで、表示される全てのページに指定したスタイルシートが適用されます。
 これによって「このサイト、文字サイズが小さ過ぎ!」等といったストレスからは開放されますが、 指定するスタイルシートによっては、サイトのデザインが変わって(崩れて)見える可能性もあります。 詳しくは、ユーザースタイルシートの導入のデメリットをご覧下さい。
 スタイルシートの導入方法についてより詳しい説明をご希望の方は、「H-man AND NOW(ユーザースタイルシートから始めるCSS)」を ご覧下さい。
 (尚、ブックマークレットによって一時的にユーザースタイルシートを適用することも可能で、 このページでは色の無効化で紹介したものがそれに当たります。)
タブブラウザの導入
 タブブラウザとは、タブを使用してウインドウを切り替えるブラウザの総称です。 大変に便利で、特に複数のウェブサイトの閲覧に素晴らしい威力を発揮します。 現在はNetscapeやOperaなどを含む多くのブラウザで採用されているシステムなのですが、 IEは残念ながらタブブラウザではありません。
 そこで、皆さんにもタブブラウザのご利用をお勧めしたいと思います。 フリーで配布されているものが多数あり、使用も簡単ですので、是非ご利用下さい。タブブラウザの機能などの解説は、 「タブブラウザ推奨委員会」が詳しいので、 ご参照下さい。

上記設定のデメリット

 本稿で特に頻繁に紹介した「見づらい・不便である」(と言われることの多い)要素を排除する方法 は、JavaScriptオフタブブラウザの導入ユーザースタイルシートの導入(による製作者スタイルシートの無効化) かと思います。実際にこれらを完璧に用いれば、上で挙げた殆どの要素で 困ることはなくなるです。

 では、これらの設定やツールを常に用いておけば、各サイトの閲覧は格段に楽に・快適になるのでしょうか? 残念ながら、 必ずしもそうとは限りません。何故なら、これらの手段には多くの場合、メリットとデメリットがあるからです。 閲覧者は結局は、各々メリットとデメリットを勘案し、ある設定は普段から適用しておき、 ある設定は見づらいページを見ようとする時にのみ適用する、といった判断を下すことになるしょう。
 そこでここでは、これらの設定等を常時適用しておくことのデメリット等について述べたいと思います。

JavaScriptオフのデメリット
 先にも述べたように、JavaScriptは少なからぬウェブページで利用されており、 オフにすればそういうサイトの閲覧に支障が出る可能性があります。また、ブックマークレットが使えません。
タブブラウザの導入のデメリット
 デメリットは殆どありません。 私としては、ネットに接続する度に友人のサイトをいくつか見て、たまに検索もしたりする…… といった程度にネットに親しんでいる人なら、充分に導入する価値があるかと思います。
 強いて言うなら、稀に一部企業の企業の提供するサービスが使えない点(例えば 「ウイルスバスターオンラインスキャン」)、 IEで使えるツールの一部が使えない点(本稿で紹介した「ちょこっと強制リンク」や 「CSS: 「ス切リボ」」もその一つ)はデメリットと言えるかも知れません。
ユーザースタイルシートの導入のデメリット
 本稿で挙げた内、 どの部分がリンクか分からない行間が狭くて読みにくいマウスカーソルの形が変えられていて鬱陶しいスクロールバーの色がみにくいで紹介した設定にはデメリットは殆どなく、 普段から見やすい設定のユーザースタイルシートを適用しておいても全く問題ないと思います。
 但し、製作者がどんな見栄えを希望していたのかが気になる閲覧者にとっては、 これらの設定がデメリットとなる可能性もあるかも知れません。
 フォントサイズが小さすぎる/大きすぎるで紹介した設定には、 多少のデメリットがあります。そのページが適切なHTMLで記述されていなかった場合には 「どの部分が見出しか」等が分かり難くなってしまう場合があるからです。 また、各ページの見た目の印象が元のページとはある程度変わってしまう場合が少なくないことは、 ウェブページ製作者の希望に敏感な閲覧者にとっては重大なデメリットと言えるかも知れません。
 各サイト毎にばらばらであろうフォントサイズで悩まなくてすむようになるのは、かなり大きなメリットかと思います。 ただ、このメリットがこれが同時に生むデメリットよりも大きいかは、結局は人による部分が大きそうです。
 未クリックのリンクと既クリックのリンクの文字色が同じで区別がつかない背景色/背景画像と文字色が近く読みにくい を常時適用させておくユーザースタイルシートで解決することには、比較的大きなデメリットがあります。 何故なら、これをすれば全てのサイトを同じ背景色、文字色で見ることになり、 閲覧するサイトのデザインを画一的にすることになるからです。 (これらは、色の無効化でも同じです)。
 また、色やワンポイントの画像によって見出し等を目立たせているサイトの場合、それが失われ、 多少見難くなる恐れもあります。(但し、適切なHTMLで記述されたサイトなら、しっかりとユーザースタイルシートを 設定すればあまりそのようなデメリットは生じないはずです。)
 個人的には、リンクの文字色の区別がつくようになることは、かなり大きなメリットかと思いますし、 各サイトを画一的なデザインで閲覧できることそれ自体がメリットだという人もいるでしょう。 ……が、この設定を採るかどうかは、やはり「人による」かと思います。
 そして、マウスストーカーが出てきて鬱陶しいで紹介した設定は、 一部のサイトのレイアウトを大きく変える場合があります。実際に この設定が役に立つサイトはあまり多くないはずなので、この設定には問題が大きいと言えるかも知れません。

最後に


※本稿の情報に間違い等ございましたら、ご連絡頂ければ幸いです。

(2003/11/24公開、2004/8/21最終更新)

戻る