スタイルシート
| HTML |
|---|
 |
スタイルシート (英語: style sheet) とは、構造化文書などにおける表示形式を制御するしくみ。見栄えと構造を分離するという目的で提唱された。HTML、XML、SGMLといったマークアップ文書や、officeソフトにおいて広く使用されている。
Web上で広く使われているHTML文書にスタイルシートを適用する場合には、一般的にCascading Style Sheets（CSS）が利用される。CSSが圧倒的に普及しているので、単にスタイルシートといえばCSSを指すことがある。
スタイルシート言語
[編集]スタイルシート言語（英語: style sheet language）とは、構造化文書の見た目を記述するコンピュータ言語。構造化文書とは、節や段落が明確に定義・分類された文書である。内容が明確に分類されているので、その文書を表示するプログラムは任意の表示スタイルを設定できる。広く使われているスタイルシート言語としてはCSSがあり、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; 拡張可能スタイルシート言語)
非標準
[編集]- JSS（JavaScript style sheets、Netscape Navigator 4.x系列のみ対応）
オフィスソフトにおけるスタイルシート
[編集]現状市場に出回っているほとんどのオフィスソフトには「スタイル機能」と呼ばれるスタイルシートが実装されている。この、スタイル機能は通常オフィスソフトにおいて非常に重要な機能であり、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 Håkon Wium Lie
- Simply JavaScript: The Three Layers of the Web
- CSS Zen Garden: XHTMLソースを変えずに新たなページレイアウトを生成しようとしているサイト。様々なレイアウトとそのCSSソースが参照できる。
- Revealed - Our HTML and CSS Codes - cameraontheroad.com: 新たにスタイルシートを使おうとしているサイトに有効な例を提示。各種リソースへのリンクもある。
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
