現状市場に出回っているほとんどのオフィスソフトには「スタイル機能」と呼ばれるスタイルシートが実装されている。この、スタイル機能は通常オフィスソフトにおいて非常に重要な機能であり、Microsoft Wordのようにスタイル機能が使いこなせないとレイアウトをとることが極めて難しくなるソフトも存在する。

なお、現在ではスタイルシートと言えばスタイルシート言語をさすことが多いが、スタイルシートはそもそも英文ワードプロセッサのレイアウト方法として提唱された方式であり、オフィスソフトにおけるスタイルシートのほうが歴史は古い。
Webにおけるスタイルシート

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

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

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

関連項目

関心の分離

外部リンク

⇒Cascading Style Sheets PhD thesis, by Hakon Wium Lie

⇒Simply JavaScript: The Three Layers of the Web

⇒CSS Zen Garden: XHTMLソースを変えずに新たなページレイアウトを生成しようとしているサイト。様々なレイアウトとそのCSSソースが参照できる。

⇒Revealed - Our HTML and CSS Codes - cameraontheroad.com: 新たにスタイルシートを使おうとしているサイトに有効な例を提示。各種リソースへのリンクもある。
.mw-parser-output .asbox{position:relative;overflow:hidden}.mw-parser-output .asbox table{background:transparent}.mw-parser-output .asbox p{margin:0}.mw-parser-output .asbox p+p{margin-top:0.25em}.mw-parser-output .asbox{font-size:90%}.mw-parser-output .asbox-note{font-size:90%}.mw-parser-output .asbox .navbar{position:absolute;top:-0.90em;right:1em;display:none}

この項目は、コンピュータに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。


表示

編集