窓の杜Logo

バックナンバー
・ 2006年5月 ・
最終回:めも理、2年生に進級!? (06/05/15)
・ 2006年4月 ・
第152回:NTPサーバーと電話の時報 (06/04/24)
第151回:アプリケーションの強制終了とサッカーのレッドカード (06/04/17)
第150回:サードパーティと車の改造 (06/04/10)
第149回:送るメニューとスタントマン (06/04/03)
・ 2006年3月 ・
第148回:ダウンロードのレジュームと長編マンガの読書 (06/03/27)
第147回:プレイリストとお菓子のレシピ (06/03/20)
第146回:ホットスポットと宅配便 (06/03/13)
第145回:ファイルの関連付けと専門医 (06/03/06)
・ 2006年2月 ・
第144回:SpeedStepとめも理のマラソン (06/02/27)
第143回:CC、BCCとクラス会の案内状 (06/02/20)
第142回:トラックバックと掲載誌の贈呈 (06/02/13)
第141回:ブログと首相の記者会見 (06/02/06)
・ 2006年1月 ・
第140回:ハッシュ値と人間の指紋 (06/01/30)
第139回:ヒューリスティックエンジンと実験室 (06/01/23)
第138回:ネットバンキングとラーメンの出前 (06/01/16)
・ 2005年12月 ・
第137回:グループウェアと職員室 (05/12/19)
第136回:モーフィングとお餅 (05/12/12)
第135回:GIFアニメーションとパラパラマンガ (05/12/05)
・ 2005年11月 ・
第134回:アスキーアートとビーズ細工 (05/11/28)
第133回:相対パスと上の階 (05/11/21)
第132回:アドミニストレーターと賃貸マンションの管理人 (05/11/14)
第131回:デスクトップ検索と専属探偵 (05/11/07)
・ 2005年10月 ・
第130回:パターンファイルと犯罪捜査 (05/10/31)
第129回:仮想メモリとコインロッカー (05/10/24)
第128回:アフィリエイトと販売代理店 (05/10/17)
第127回:アカデミックパッケージと子供料金 (05/10/03)
・ 2005年9月 ・
第126回:ブルースクリーンと朝礼の貧血 (05/09/26)
第125回:スタンバイとビデオの一時停止 (05/09/12)
第124回:ソースコードとペーパークラフト (05/09/05)
・ 2005年8月 ・
第123回:WYSIWYGとレストラン入り口の食品サンプル (05/08/29)
第122回:NASと庭の納屋 (05/08/22)
第121回:アルゴリズムとプラモデルの組み立て説明書 (05/08/08)
第120回:ストリーミングと電話の問い合わせ (05/08/01)
・ 2005年7月 ・
第119回:RAWデータと映画の原作 (05/07/25)
第118回:OCRと教科書の朗読 (05/07/11)
第117回:ベリファイと時間割の確認 (05/07/04)
・ 2005年6月 ・
第116回:マルチモニターと机の合体 (05/06/27)
第115回:ポートと駅の北口 (05/06/20)
第114回:ポップアップと漫画のフキダシ (05/06/13)
第113回:SNSと同窓会のお知らせ (05/06/06)
・ 2005年5月 ・
第112回:代打のバッターと仮想プリンター (05/05/30)
第111回:ルアー釣りとフィッシング詐欺 (05/05/23)
第110回:楽器屋さんと統合アーカイバプロジェクト (05/05/16)
第109回:手抜き感想文とテンプレート (05/05/09)
・ 2005年4月 ・
第108回:ダンボール箱とメディア (05/04/25)
第107回:詰め込みメモとCSV形式 (05/04/18)
第106回:車の免許とタイムスタンプ (05/04/11)
第105回:借りっぱなしの本とWebブラウザーのキャッシュ (05/04/04)
・ 2005年3月 ・
第104回:クロスサイトスクリプティングとかご抜け詐欺 (05/03/28)
第103回:GREPとアンケート調査 (05/03/14)
第102回:タスクトレイと腕時計 (05/03/07)
・ 2005年2月 ・
第101回:QRコードと学校の下駄箱 (05/02/28)
第100回:100回記念企画 窓の杜編集部に行ってみよう!(実写版) (05/02/21)
第99回:ログと学級日誌 (05/02/14)
第98回:マウスジェスチャーと変身ヒーロー (05/02/07)
・ 2005年1月 ・
第97回:Webメールと美人秘書 (05/01/31)
第96回:ごみ箱のデータと学食の下膳台 (05/01/24)
第95回:IMEと執事と国語辞典 (05/01/17)
・ 2004年12月 ・
第94回:エンコード、デコードとカップラーメン (04/12/20)
第93回:ポリゴンとお風呂のタイル (04/12/13)
第92回:RSSと電車の吊り広告 (04/12/06)
・ 2004年11月 ・
第91回:ファイヤーウォールと空港の持ち物検査 (04/11/29)
第90回:スパイウェア、アドウェアと盗聴器 (04/11/22)
第89回:デフォルトとご飯の大盛り (04/11/15)
第88回:PDFと設計図 (04/11/08)
第87回:タブレットとスケッチブック (04/11/01)
・ 2004年10月 ・
第86回:IEコンポーネントとスポンジケーキ (04/10/25)
第85回:共有フォルダと部室の雑誌置き場 (04/10/18)
第84回:スキャンディスクとダムの検査 (04/10/04)
・ 2004年9月 ・
第83回:デバイスのドライバーと車の運転手 (04/09/27)
第82回:サービスパックと家のリフォーム (04/09/13)
第81回:FAQとトイレの張り紙 (04/09/06)
・ 2004年8月 ・
第80回:黒板消し落としとブラクラ (04/08/30)
第79回:予防接種とWindows Update (04/08/23)
第78回:十徳ナイフとファンクション・キー (04/08/09)
第77回:狐や狸と差出人詐称ウイルスメール (04/08/02)
・ 2004年7月 ・
第76回:穴埋め問題とオートコンプリート (04/07/26)
第75回:内線電話とLAN (04/07/12)
第74回:めも理の将棋とアンドゥー (04/07/05)
・ 2004年6月 ・
第73回:始業の準備とスタートアップ (04/06/28)
第72回:バリアフリーとアンチエイリアス (04/06/21)
第71回:太陽と月とRGBとCMYK (04/06/14)
第70回:カタカナ言葉と通信の暗号化 (04/06/07)
 

これ以前の連載一覧
.
めも理と窓太のパソコン講座

【第53回】

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

(04/02/02)

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

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

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

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

見づらい

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

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

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

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

めも理  スタイルシート? 何それ。

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

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

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

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

窓太  そうです。

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

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


スタイルシート

4コマまんが
めも理と窓太の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と合体させて表示することもできる。


クロノス・クラウン:柳井 政和


トップページへ
めも理と窓太のパソコン講座 INDEX
Copyright (c) 2004 Impress Corporation All rights reserved.
編集部への連絡は mado-no-mori-info@impress.co.jp まで