スタイルシートという言葉を良く聞くようになりました。このスタイルシートって何でしょう。簡単に言うとページのデザインを指示する方法です。例えばこのページ、日本語を表示すると行間が狭くて長い文章は読みづらいのですが、このページはスタイルシートで十分行間をとっていますので読みやすいでしょう。
HTML4.0以降では、「WebPageの見栄え(プレゼンテーション)はスタイルシートで定義すること」となっています。この説明では理解しずらいので具体的な例で示すと。
WebPageの製作で、HTML(Hyper Text Markup Language)は、そのページの文章の意味的な構造を示すことだけに専念して、見栄えはスタイルシートに任せなさい。」ということです。
まず、このページのソースを見てください。とてもシンプルな事がわかるでしょう。
スタイルシートはHTMLのマーク付けを簡素化し、またHTMLをプレゼンテーションの負担から大きく解放する。スタイルシートは、著者とユーザに対し、フォント情報、配置、色等の文書のプレゼンテーションを制御する手段を提供する。
従来は、タグでプレゼンテーション(見栄え)をも表現しようとしたため、タグが複雑になるばかりか、「プレゼンテーションのためにそのタグの意味さえ無視した」ページ作りが行われるようになりました。
プレゼンテーションをスタイルシートにまかせる事で、タグはプレゼンテーションから開放され本来の文章構造にだけ従えばよくなるため、ページ作りはとても楽になります。
また、プレゼンテーションの開発も、スタイルシートだけなので、製作はむろん変更も極めて容易になります。
ディスプレイで見るだけでなく、印刷して利用される事も考慮してページをデザインするのは大変ですが、これを分離できます。試しにこのページを印刷してみてください。
このしくみは、なにも印刷だけではなくWebページを表示するすべての端末に対して設定する事が可能です。ちなみに、出力先として次のものが想定されています。なお、ここをクリックするとテキストベースのブラウザ[Lynx]でこのページを見た場合のウィンドウショットが表示されます。
Cascading Style Sheets, level 2(CSS2)Specification
- all
- 全デバイスにあてはまる。
- aural
- スピーチシンセサイザを想定している。詳細は[19 音声スタイルシート]を参照のこと。
- braille
- 点字の触感をフィードバックするデバイスを想定している。
- embossed
- 点字のページを出力するプリンタを想定している。
- handheld
- ポータブルの低性能デバイスを想定している。（典型的なものには、小さな画面、モノクロ画面、周波帯域幅の制約を持つデバイスなどがある）
- ページ付きの不透明な物質への印刷や、印刷プレビューモードの画面表示を想定している。ページ媒体固有の整形モデルについては[13 ページ媒体]を参照のこと。
- projection
- 映写機や透明板への印刷など、投影による表現を想定している。ページ媒体固有の整形モデルについては[13 ページ媒体]を参照のこと。
- screen
- 主にカラーのコンピュータ画面を想定している。
- tty
- グリッド線の矩形領域に納まる、固定ピッチ文字を使用する媒体を想定している。具体的にはテレタイプ、ターミナル、或いはディスプレイ性能の限られたポータブルデバイスなどを想定している。文書作成者は、この媒体型において画素単位pxを用いるべきではない。
- tv
- テレビ型のデバイスを想定している。（低解像度、色付き、且つスクロールに制限がある画面。音声も使用可能）
- 媒体の名称に大小文字の区別はない。
見栄えをスタイルシートに任せる事で、ページをどのようなデザインで見るかを、複数のスタイルシート［代替スタイルシート(Alternate StyleSheet)］を用意しておく事で、ユーザー側に選択させる事ができるようになります。
・・コントラストが低かったり、文字と同系色の背景を使っていたり、文字が小さかったり（たとえばこのページでスタイルシートを「パステル」や「春用」を選択してみてください。）・・・こんな自己満足のサイトが多くて・・そんなデザインをしたい場合には、ぜひ代替スタイルシートを用意していただきたいものです。
代替スタイルシートは、ＩＥをのぞく多くのブラウザが対応しています。参照：【代替スタイルシートに対応しているブラウザ】
なお、このサイトでは、ＩＥでも代替スタイルシートが利用できるようにちょっとした工夫がしてあります。詳しくは次のページで説明します。