.

【第53回】

スタイルシートと着せ替え制服

（04/02/02）

めも理と窓太 登場人物紹介

　窓の杜高校、超パソコン部の部室。

　あらあら、めも理ちゃん。今日はパソコンの前で目を凝らしているようです。

　一体、何があったのでしょう？

見づらい

うーん、このWebページの配色は見づらいわね。

どうしたんですか、めも理ちゃん。

今、見ているWebページの文字が、白色の背景に灰色で書かれていて、とても読みにくいのよ。

それじゃあ、“スタイルシート”を変えればいいじゃないですか。

スタイルシート？　何それ。

あれ、めも理ちゃんはスタイルシートを知らなかったのですか。

知らないわよ。ちょっと待って、どうせ辞書を引けとか言うんでしょう。えーと、スタイルは様式で、シートは敷布。つまり、様式敷布というわけね。 　……どういう意味なの？

スタイルシートは、辞書を引いても出てこないかもしれませんね。Webページのスタイルシートは、Webページの制服のようなものです。

制服って、学生服とか、看護婦の制服とか、スチュワーデスの制服とか、シスターの制服とか？

そうです。

うーん、じゃあ、Webページが制服を着替えたりできるわけ？　窓太の言っていることは、よく分からないわね。

それじゃあ、細かく解説することにしましょう。

---

スタイルシート

めも理と窓太の4コマまんが 「着せ替え制服」

そもそもスタイルシートって何なの？

スタイルシートは、文書の見た目を定義する雛型（書式の型）のことです。

見た目を定義？

そうです。例えばめも理ちゃんは今、この学校の生徒に見えますよね。

どこから見てもそうじゃないの？

めも理ちゃんがこの学校の生徒に見えるのは、この学校の制服を着ているからです。

うーん、そうなのかなあ。

そうですよ。例えば、めも理ちゃんが看護婦の白衣を着ていたらどう見えます？

そうね、看護婦に見えるわね。

じゃあ、スチュワーデスの格好なら？

スチュワーデスに見えるんじゃないの。

そうですよね。めも理ちゃんという内容は変わらないけど、制服を変えることで、見た目が変わりますよね。 　逆にいうと、学生や看護婦、スチュワーデスといった職業は、その制服を見ると一目瞭然ですよね。

言われてみればそうかもね。まあ、同じ職業の人は、同じ見た目のほうが周りの人にとっては分かりやすくていいんじゃないの？

そうです。スタイルシートはこういった制服のように、見た目を同じ見え方にするためのものなのです。 　それじゃあ、ここからWebページのスタイルシートについて話をしていきますね。Webページのスタイルシートで変えることのできる見た目には、文字のサイズや色、背景の色や画像、文字のレイアウトなどがあります。

へー、見た目といってもいろいろあるんだ。

ありますよ。例えば、めも理ちゃんがWebページを見ていて、同じサイトなのに1ページずつ全部文字の色やサイズ、背景の色、レイアウトといった見た目が違っていたら見にくいですよね。

うわっ、見づらそう。どうせなら、同じ見た目で統一しておいてほしいわね。

ええ、全ページ違う見た目だと、まるで私服で学校に来ているような状態ですよね。 　みんなばらばらの服を着ていると、学校にいても、この学校の生徒なのかどうか分かりません。先生も、いちいち生徒に、この学校の生徒なのかを確認してまわるのは大変です。そこで、制服を作ってみんな同じかっこうになってもらえば、手間を省くことができます。 　Webページも同じで、同じジャンルや同じ場所に置いている文書は見た目が揃っていると読みやすいですよね。そこで制服のような、見た目を揃えられるスタイルシートを用意すると便利なのです。

へー、スタイルシートって、Webページの制服だったんだ。

そうです。例えば伝票は伝票の見た目に、レポートはレポートの見た目に、小説は小説の見た目になっていたほうが見やすいです。スタイルシートはこういった見た目を決める、Webページの制服なのです。

全校生徒がスチュワーデスの制服を着たら、みんながスチュワーデスに見えるように、スタイルシートを変更したら、Webページ見た目が一気に変わったりするの？

はい、変わりますよ。Webページのスタイルシートを利用すれば、Webページの見た目を簡単に変更することができます。 　Webページでは、個々のHTMLファイル内に直接スタイルシートを書き込むこともできますし、文章と見た目を別のファイルに分けて作ることもできます。そして、いくつかのHTMLファイルのスタイルシートを、共通のファイルにしておくこともできます。 　この共通のスタイルシートのファイルは、インターネット上に置いてURLで指定し、本文の入ったHTMLと合体させて表示することもできますし、ローカルに置いてWebブラウザーで指定し、インターネット上にある本文の入ったHTMLと強制的に合体させて表示することもできます。 　人間の制服を決めるように、スタイルシートで強制的にWebページの見た目を同じにすることができます。Webサイトによっては、見た目を全部スタイルシートで統一していたりしますよ。

じゃあ、WebサイトのWebページの見た目が同じときは、全部スタイルシートが使われているということなの？

そういうわけではないです。Webページでスタイルシートが設定できるようになったのは、Webページが世の中に普及して、ある程度経ったあとでしたから。そのため、スタイルシートを使わずに、見た目を揃えているページも多いですよ。

なるほど、じゃあさっき窓太が言っていたWebブラウザーからスタイルシートを変えるのってどうすればいいの？　Webブラウザーから、強制的にスタイルシートを変更できるのよね？

できますよ。実は「Interner Explorer」では、自分でWebページのスタイルシートを設定する機能があるのです。

へー、初耳だわ。

それじゃあ、使い方を説明しますね。 　ツールバーメニューの［ツール］－［インターネットオプション］で、［全般］タブを選択して［ユーザー補助］ボタンを押して下さい。自分でスタイルシートを設定することができるようになっていますよ。

スタイルシート設定前のIEの表示


スタイルシートの設定（使用したスタイルシート）


スタイルシート設定後のIEの表示

あっ、本当だ。知らなかったわ。

---

体操服

ねえ、窓太。制服はあんまり簡単に着替えられないほうがいいと思うのよ。

どうしたんですかめも理ちゃん。

今日、体育の時間、体操服を忘れたの。そうしたら、制服のまま立っていなさいと怒られたのよ。体操服も制服の一種でしょう。制服なんて、いつもの学生服だけでいいのに。

まあ、学生服で運動をするわけにもいかないですからね。めも理ちゃんが体操服を忘れなければいいだけですよ。

うぐぅ、正論過ぎて反論できないわ。

---

今回出てきた用語の解説

【スタイルシート】　文書の見た目を定義する雛形。今回はWebページに限定して解説しているが、Webページ以外にもスタイルシートは存在する。
　Webページでは、HTMLファイルにスタイルシートを直接埋め込んだり、インターネット上やローカルに置かれた外部のファイルを参照して、Webブラウザー側で本文の書かれたHTMLと合体させて表示することもできる。

（クロノス・クラウン：柳井 政和）