ＩＥ などのウェブ・ブラウザでユーザー スタイル シートという機能を使うとウェブサイトの見た目を自由に変えることができます。ここではその使い方を説明したいと思います。

簡単なスタイルシートのサンプルを用意したので、以下の二つのファイルをダウンロードして保存しておいてください。

まずは、スタイルシートの設定されていないシンプルなウェブページを開いてみます。次のサンプルのページを ＩＥ で開いてみてください。

サンプル（「開く」をクリック）

見た目はだいたい次の画像のような感じになっていると思います。（画像をクリックすると拡大して表示します。）

フォント（書体）は ＩＥ の初期設定のまま「ＭＳ Ｐゴシック」で、文字のサイズは大きめにしてあります。この文章の「ＭＳＮビデオアワード」という文字の部分には強調のタグ（strong）が設定されているのですが、サイズを大きくした「ＭＳ Ｐゴシック」は全ての文字が太字になってしまうので、強調された文字と区別が付かなくなっています。これでは強調のタグを使った意味がありません。

そこで、フォントを「ＭＳ 明朝」に変えてみます。ＩＥ のメニューからインターネット オプションを選択して

フォントの設定をします。

Ｗｅｂ ページ フォントという部分で「ＭＳ 明朝」を選択して ＯＫ を押します。

するとページは以下のように表示されます。（画像をクリックすると拡大して表示します。）

これで強調のタグを設定した部分が太字で表示され、他の部分と区別が付きやすくなりました。しかし、もう少しはっきり区別を付けたいですね。行間も狭くて読みづらいかもしれません。また、「ＭＳ 明朝」は等幅フォントなので漢字やひらがなは読みやすくなるのですが、英数字の部分はプロポーショナルフォントの方がきれいに見えるかもしれません。（「文章の整形 (４) - プロポーションは美しくとも…」という記事もご覧ください。）

そこで、ユーザー スタイルシートを使って見た目をさらに改善してみましょう。

インターネット オプションのユーザー補助を開きます。

ここに「ユーザー スタイル シート」という項目があります。

チェックを入れてから参照ボタンを押して、はじめに保存しておいたスタイルシートのファイルを選択します。

ここでは一つ目の〝user-ie1.css〟を選択して開いてください。ＯＫ を押してダイアログを閉じると以下のように表示が変ります。（画像をクリックすると拡大して表示します。）

強調のタグを設定した部分はフォントが丸ゴシック体に変ってさらに区別が付きやすくなりました。行間も広くなっています。英数字の部分には欧文フォントが適用され、さらに漢字やひらがなとの間にわずかながらスペースが入っています。かなり読みやすくなったのではないでしょうか。

さらに、ユーザースタイルシートを二つ目の〝user-ie2.css〟に変えてみると、見た目は以下のようになります。（画像をクリックすると拡大して表示します。）

ページの左右に余白が入り、引用のタグが設定された部分が四角い枠に囲まれました。各行は均等割り付けされ、行末がそろってきれいになりました。

最初のページに比べるとずいぶんと見た目が変っていますが、元のページには一切変更を加えていません。ユーザー スタイルシートを設定するだけでここまで見た目を変えることができるのです。スタイルシートの知識さえあれば、もっといろんなことができます。興味がある人は勉強してみてください。

ここで使用した二つのスタイルシートはサンプルとして用意したものですが、このままでも十分実用的に使えるように作ってあります。普段のウェブサイト閲覧用に使用していただいて構いません。

二つ目の〝user-ie2.css〟の方は記述がやや複雑なので、ウェブサイトによってはレイアウトが崩れたりすることもありますが、左右に余白がなくて読みづらいサイトなどで使うと、見た目が大幅に改善すると思います。

通常は〝user-ie1.css〟を設定しておいて、読みづらいページを開いた場合に〝user-ie2.css〟に切り替えるというような使い方が良いでしょう。

そして、青空文庫を読む時には〝aozora.css〟に切り替えるというわけです。