スタイルシートとは? わかりやすく解説

スタイル‐シート【style sheet】


スタイルシート

【英】style sheet

スタイルシートとは、フォント種類文字大きさ、色、行間の幅、修飾など、文書見栄えデザイン関す情報ひとまとめにした、文書雛形のことである。ワープロソフトでの文書作成伝票などの定型文作成HTMLXMLといったマークアップ言語などにおいて利用される一般的にはWebページ作成するときに利用されるカスケーディングスタイルシートCSS)のことだけを指すことも多い。代表的なものとしては、CSSJSSXSLXSLTXSL-FOなどがある。

オフィスソフトのほかの用語一覧
ワープロソフト:  修正記録  白抜き文字  書式  スタイルシート  スタイル  縦中横  タブとリーダー

<style> 〜 </style> スタイルシート

HTML仕様 : HTML4.01Strict

属性機能と値   DTD ※
type MIMEタイプ: スタイルシートの MIMEタイプ指定する
media メディアタイプ: スタイルシートが出力対象とするメディア指定する
カンマ区切ることで複数メディア列記するともできる
デフォルト値は 「screenとなっている

スタイルシートを組み込みます。head要素 内でのみ記述可能で、複数のスタイルシートの定義が可能です。

※ DTD表記
◎: HTML4.01Strictで定義されている必須の属性と値
○: HTML4.01Strictで定義されている属性と値
▽: HTML4.01Transitionalの属性と値(非推奨

スタイルシート

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2025/01/24 10:10 UTC 版)

スタイルシート英語: style sheet)とは、構造化文書などにおける表示形式を制御するしくみである。見栄えと構造を分離するという目的で提唱された。HTMLXMLSGMLといったマークアップ文書や、オフィススイートなどにおいて広く使用されている。

構造化文書とは、節や段落が明確に定義・分類された文書である。内容が明確に分類されているので、その文書を表示するプログラムは任意の表示スタイルを設定することができる。

構造化文書の見た目を記述するコンピュータ言語のことを、スタイルシート言語英語: style sheet language)という。スタイルシート言語の例としては、Cascading Style Sheets(CSS)、Document Style Semantics and Specification Language(DSSSL)、Extensible Stylesheet Language(XSL)、JavaScript Style Sheets(JSS)などが挙げられる。

World Wide Web上で広く使われているHTML文書にスタイルシートを適用する場合には、一般的にCSSが利用される。CSSが圧倒的に普及しているので[要出典]、単にスタイルシート言語といえばCSSを指すことがある[要出典]

スタイルシート言語

広く使われているスタイルシート言語としてはCSSがあり、HTML、XHTML、SVGXUL、その他のマークアップ言語で書かれた文書のスタイルを指定するのに使われる。構造化文書の利点の一つとして、内容を様々な状況で再利用でき、様々な方法で表示可能という点が挙げられる。構造化文書の論理構造に異なるスタイルシートを付与することで、異なる表示が得られる。

構造化文書の内容を表示するには、スタイル的規則、例えば色やフォントやレイアウトなどの規則が適用されなければならない。このスタイル的規則を集めたものがスタイルシートである。編集者や印刷業者は昔から、文書の形でスタイルシートのような情報(見た目、スペリング、句読点の一貫性などの規則)を扱ってきた。電子出版においては、スタイルシート言語はスペリングや句読点よりも見た目に関する規則を扱うものとして使われる。

構成要素

構造化文書を表示するには、スタイルシート言語の表現能力を必要とする。スタイルシート言語には以下のような機能要素がある。

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

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

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

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

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

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

スタイルシートの特徴

利点

スタイルと中身を分離することで、様々な利点が生じるが、それが現実的となったのはウェブブラウザでのCSS実装が強化された最近のことである[要出典][いつ?]

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

実用上の問題

XHTML、XSL、CSS といった現状の仕様とそのソフトウェアツールでの実装は、やっと成熟段階に至ったレベルである[要出典]。従って、このような内容とスタイルの分離をしようとしたときに、いくつかの実用的問題が生じることがある。

意味論的語彙の欠如
HTML には意味論的要素の語彙(例えば、段落、引用、強調など)が限られている。HTMLから拡張可能なXHTMLへの移行により、より豊富な意味論的語彙の採用が促進され、スタイルシートでの対応も促進されると考えられる。例えば、振り仮名の表記[1]MathMLXFormsXFrames といった拡張によって新たな要素が文書に使われるようになれば、それらのスタイルを指定できるようスタイルシート言語も拡張されるだろう。しかし、現状ではスタイルシート言語がサポートしていない要素については、作者が場当たり的にセレクタを追加生成しなくてはならない。
複雑な配置
複雑な配置をスタイルシート側で制御しようとしても、ブラウザが対応していない場合がある。
解析/生成ツール以外での採用が少ない
スタイルシートの仕様は完成されつつあるが、ソフトウェアツール側での対応は遅い。主なウェブ開発ツールはいまだに表示とコンテンツの混合型モデルを採用している。

脚注

  1. ^ 振り仮名の表記の詳細な仕様については外部リンクRuby Annotationも併せて参照。

関連項目

外部リンク


スタイルシート

出典:『Wiktionary』 (2021/07/08 10:29 UTC 版)

語源

名詞

スタイル シート

  1. コンピューター文書で、レイアウト制御する書式

関連語


「スタイルシート」の例文・使い方・用例・文例

  • 彼がスタイルシートを使っている
Weblio日本語例文用例辞書はプログラムで機械的に例文を生成しているため、不適切な項目が含まれていることもあります。ご了承くださいませ。



固有名詞の分類


英和和英テキスト翻訳>> Weblio翻訳
英語⇒日本語日本語⇒英語
  

辞書ショートカット

すべての辞書の索引

「スタイルシート」の関連用語

スタイルシートのお隣キーワード
検索ランキング

   

英語⇒日本語
日本語⇒英語
   



スタイルシートのページの著作権
Weblio 辞書 情報提供元は 参加元一覧 にて確認できます。

   
デジタル大辞泉デジタル大辞泉
(C)Shogakukan Inc.
株式会社 小学館
IT用語辞典バイナリIT用語辞典バイナリ
Copyright © 2005-2025 Weblio 辞書 IT用語辞典バイナリさくいん。 この記事は、IT用語辞典バイナリの【スタイルシート】の記事を利用しております。
WEB for beginnerWEB for beginner
Copyright (C) 2002~2025 banban@scollabo.com
ウィキペディアウィキペディア
All text is available under the terms of the GNU Free Documentation License.
この記事は、ウィキペディアのスタイルシート (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。
Text is available under Creative Commons Attribution-ShareAlike (CC-BY-SA) and/or GNU Free Documentation License (GFDL).
Weblioに掲載されている「Wiktionary日本語版(日本語カテゴリ)」の記事は、Wiktionaryのスタイルシート (改訂履歴)の記事を複製、再配布したものにあたり、Creative Commons Attribution-ShareAlike (CC-BY-SA)もしくはGNU Free Documentation Licenseというライセンスの下で提供されています。
Tanaka Corpusのコンテンツは、特に明示されている場合を除いて、次のライセンスに従います:
 Creative Commons Attribution (CC-BY) 2.0 France.
この対訳データはCreative Commons Attribution 3.0 Unportedでライセンスされています。
浜島書店 Catch a Wave
Copyright © 1995-2025 Hamajima Shoten, Publishers. All rights reserved.
株式会社ベネッセコーポレーション株式会社ベネッセコーポレーション
Copyright © Benesse Holdings, Inc. All rights reserved.
研究社研究社
Copyright (c) 1995-2025 Kenkyusha Co., Ltd. All rights reserved.
日本語WordNet日本語WordNet
日本語ワードネット1.1版 (C) 情報通信研究機構, 2009-2010 License All rights reserved.
WordNet 3.0 Copyright 2006 by Princeton University. All rights reserved. License
日外アソシエーツ株式会社日外アソシエーツ株式会社
Copyright (C) 1994- Nichigai Associates, Inc., All rights reserved.
「斎藤和英大辞典」斎藤秀三郎著、日外アソシエーツ辞書編集部編
EDRDGEDRDG
This page uses the JMdict dictionary files. These files are the property of the Electronic Dictionary Research and Development Group, and are used in conformance with the Group's licence.

©2025 GRAS Group, Inc.RSS