スタイルシート(Style Sheet)とは

スタイルシート (Style Sheet)とは、ドキュメント(文書)において表示形式を制御する概念を指します。
見栄えと構造を分離するという目的で提唱され、HTMLやXML、SGMLといったマークアップ文書、オフィスソフトにおいて現在でも広く使用されています。
Web上で広く使われているHTML文書にスタイルシートを適用させる場合、一般的にCSS(Cascading Style Sheets)が利用されます。CSSが圧倒的な普及度を誇っているため、スタイルシートといえばCSSを指すことが多く、一般的だといえます。

スタイルシート言語

スタイルシート言語とは、構造化文書の見た目を記述するコンピュータ言語です。構造化文書とは、節や段落が明確に定義・分類された文書です。内容が明確に分類されているので、その文書を表示するプログラムは任意の表示スタイルを設定できます。広く使われているスタイルシート言語としては CSS(Cascading Style Sheets)があり、HTML、XHTML、SVG、XUL、その他のマークアップ言語で書かれた文書のスタイルを指定するのに使われます。構造化文書の利点の一つとして、内容を様々な状況で再利用でき、様々な方法で表示可能という点が挙げられます。構造化文書の論理構造に異なるスタイルシートを付与することで、異なる表示が得られます。
構造化文書の内容を表示するには、スタイル的規則、例えば色やフォントやレイアウトなどの規則が適用されなければなりません。このスタイル的規則を集めたものがスタイルシートです。編集者や印刷業者は昔から、文書の形でスタイルシートのような情報(見た目、スペリング、句読点の一貫性などの規則)を扱ってきました。電子出版においては、スタイルシート言語はスペリングや句読点よりも見た目に関する規則を扱うものとして使われます。

構成要素

構造化文書を表示するには、スタイルシート言語の表現能力を必要とします。スタイルシート言語には以下のような機能要素があります。
文法
機械が理解できる形で表現しなければならないため、厳密な文法が必要とされます。例えば、
h1 { font-size: 1.5em }
はCSSの文法で書かれた単純なスタイルシートです。
セレクタ
セレクタとは、どの要素がそのスタイル規則によって影響されるかを指定するものです。文書の構造とスタイルシート内のスタイル規則の接着剤の役割を担います。上記の例では、"h1" セレクタによって h1 要素が指定されています。文脈やプロパティや内容を考慮した複雑な要素選択を行うセレクタもあります。
プロパティ
スタイルシート言語には、要素を表示する際の変化を与えるプロパティの概念が備わっています。上記の例ではCSSの "font-size" プロパティが使われています。一般的なスタイルシート言語には約50のプロパティがあります。
値と単位
プロパティに対してある値を指定することで要素の表示を変化させます。値には、文字列、キーワード、数、数と単位識別子の組合せなどがあります。また、値としてリストや既出の値を使った式も指定できます。スタイルシートでの典型的な値の例として「長さ」の値 "1.5em" は、数(1.5)と単位(em)から構成されています。"em" はCSSでは周辺のテキストのフォントサイズを意味します。典型的なスタイルシート言語には約10種類の単位が使えます。
値伝播機構
全要素について、全プロパティの値を明示的に指定しなくて済むように、スタイルシート言語には値を自動的に伝播させる機構が備わっています。値伝播によってスタイルシートが冗長でなくなり、短くなります。上記の例では、フォントサイズだけが指定されています。他の属性の値は値伝播機構によってそれ以前の設定がそのまま使われます。
書式モデル
全てのスタイルシート言語には何らかの書式モデルがサポートされています。多くのスタイルシート言語には視覚的書式モデルがあり、最終的な表示がどのようなレイアウトになるかを指定できます。例えば、CSS書式モデルはブロックレベル要素(例えば "h1")が親要素の幅を満たすよう拡張することを指定します。スタイルシート言語によっては、音声的書式モデルを持つものもあります。

スタイルシートの言語の一覧

スタイルシートにはコンピュータ言語によって記述されるものがあります。そのような言語をスタイルシート言語と呼びます。

標準

■CSS (Cascading Style Sheets)
■DSSSL (Document Style Semantics and Specification Language; 文書スタイル意味指定言語)
■XSL (Extensible Stylesheet Language; 拡張可能スタイルシート言語)
・XSLT (XSL Transformations)
・XSL-FO (Extensible Stylesheet Language Formatting Objects)

非標準

■JSS(JavaScript Style Sheets、Netscape Navigator 4.x系列のみ対応)

オフィスソフトにおけるスタイルシート

現状市場に出回っているほとんどのオフィスソフトには「スタイル機能」と呼ばれるスタイルシートが実装されています。この、スタイル機能は通常オフィスソフトにおいて非常に重要な機能であり、Microsoft Wordのようにスタイル機能が使いこなせないとレイアウトをとることが極めて難しくなるソフトも存在します。
なお、現在ではスタイルシートと言えばスタイルシート言語をさすことが多いですが、スタイルシートはそもそも英文ワードプロセッサのレイアウト方法として提唱された方式であり、オフィスソフトにおけるスタイルシートのほうが歴史は古いです。

Webにおけるスタイルシート

ウェブデザインにおいては、HTMLやXHTMLといったマークアップ言語で意味論的内容と構造を記述し、表示形式(スタイル)はスタイルシートに記述します。スタイルシートはマークアップ言語で書かれたファイルとは別ファイルであり、CSSやXSLといったスタイルシート言語で書かれます。

スタイルシートの特徴

利点

スタイルと中身を分離することで、様々な利点が生じますが、それが現実的となったのはWebブラウザでのCSS実装が強化された最近のことです。
性能
一般にスタイルシートを使ったサイトの方がそうでないサイトよりも表示が速いです。ブラウザの実装にもよりますが、HTMLの仕様として更新のないファイルはブラウザのキャッシュを使用することになっていますので、スタイルシートがファイルに分離されている場合は各ページの読み込みは高速化されます。
保守性
全ての表示スタイルを1つのファイルに保持することで、保守時間が大幅に削減され、保守時に人間が間違う可能性も削減されます。例えば、あるサイトのコンテンツを作成した後でフォントの色を #3667CA (ウェブセーフカラーでない色)にしなければならなくなったとします。スタイルシートを使っていない場合、その面倒な修正作業を全ページについて行わなければならず、間違いが混入しやすくなります。CSSを正しく使っていれば、1つのCSSファイルのたった6文字を修正するだけで済みます。また、(X)HTMLページの可読性がよくなり、表示の一貫性が保たれるという利点もあります。
アクセス容易性
CSSを使ったサイトは、異なるブラウザ(Internet Explorer、Mozilla Firefox、Opera、Safariなど)で同じ表示になるよう調整することが容易です。 CSSを使ったサイトのブラウザでの表示は、例えばLynx (ウェブブラウザ)のようなグラフィックスを表示できない古い(CSSを解釈できない)ブラウザでも可能です(CSSを無視して可能な範囲で表示される)。古いバージョンのCSSしか解釈できない場合も、その範囲でのみ表示可能です。このため、様々な機能レベルのユーザーエージェントがサイトのコンテンツにアクセス可能となっています。例えば点字ディスプレイを使ったブラウザは、ほとんどのレイアウト情報を無視しますが、それでもユーザーは全ページのコンテンツにアクセス可能です。
カスタマイズ
ページのレイアウト情報がコンテンツと分離されることで、そのレイアウト情報を無視して表示させても、内容を読むことができます。また、サイト側が複数のスタイルシートを提供し、コンテンツに影響を与えずに見た目を完全に変えることも可能です。最近のWebブラウザはユーザーが独自のスタイルシートを定義できるようになっており、サイト作成者のレイアウト規則を上書きすることもできます。例えば、アクセスした全てのページでハイパーリンクを太字で表示させるといったことが可能です。
一貫性
マークアップ言語で書かれたファイルは、著者が伝えようとしている意味だけを含んでいるため、その様々な要素のスタイルは非常に一貫しています。例えば、見出し、強調テキスト、リスト、数式などといった要素は外部のスタイルシートによって、一貫したスタイルを適用されます。著者は合成時のスタイルプロパティを気にする必要はありません。見た目の詳細は実際に表示されるときに決定されます。
利殖性
見た目の詳細が実際に表示されるときに決定されるということは、新たな媒体に新たなスタイルシートを用意すれば、同じコンテンツを修正することなくその新しい媒体でも再利用できることを意味します。注意深く制作されたWebページは、新たなスタイルシートを適用することで、ヘッダやフッタ、ページ番号、目次などを備えた容易に印刷可能な本にすることもできます。

実用上の問題

XHTML、XSL、CSS といった現状の仕様とそのソフトウェアツールでの実装は、やっと成熟段階に至ったレベルです。従って、このような内容とスタイルの分離をしようとしたときに、いくつかの実用的問題が生じることがあります。
意味論的語彙の欠如
HTML には意味論的要素の語彙(例えば、段落、引用、強調など)が限られています。HTMLから拡張可能なXHTMLへの移行により、より豊富な意味論的語彙の採用が促進され、スタイルシートでの対応も促進されると考えられます。例えば、Ruby Annotation、MathML、XForms、XFrames といった拡張によって新たな要素が文書に使われるようになれば、それらのスタイルを指定できるようスタイルシート言語も拡張されるでしょう。しかし、現状ではスタイルシート言語がサポートしていない要素については、作者が場当たり的にセレクタを追加生成しなくてはなりません。
複雑な配置
複雑な配置をスタイルシート側で制御しようとしても、ブラウザが対応していない場合があります。
解析/生成ツール以外での採用が少ない
スタイルシートの仕様は完成されつつありますが、ソフトウェアツール側での対応は遅いです。主なWeb開発ツールはいまだに表示とコンテンツの混合型モデルを採用しています。

サイトチューニング

サイトを運営している方で検索エンジン最適化を意識している方は、サイトのチューニングを行っていると言われています。
サイトのチューニングとは、サイトの構造やテキスト、サイト内リンクやHTMLファイルなどを検索エンジンにクロールしやすくしてあげることを言い、そのような施策をおこなうことによって検索エンジンから高く評価してもらえるようにすることをいいます。

スタイルシート関連タグ

Cascading Style Sheets、関心の分離、Extensible Stylesheet Language、コンピュータ言語、HyperText Markup Language、Extensible HyperText Markup Language、マークアップ言語、Mathematical Markup Language、Document Style Semantics and Specification Language、XSL Formatting Objects、ユーザーエージェント、Standard Generalized Markup Language、XSL Transformations、ウェブデザイン、XUL、可読性、Lynx (ウェブブラウザ)、Scalable Vector Graphics、Opera、Extensible Markup Language、Safari、World Wide Web、Mozilla Firefox、Internet Explorer、ウェブブラウザ、英語