ウィキペディアにおけるCSSの設定については、「Help:外装の詳細設定」をご覧ください。
Cascading Style Sheets
拡張子.css
MIMEタイプtext/css
開発者World Wide Web Consortium
種別スタイルシート
国際標準 ⇒CSS Level 1 (Recommendation),
⇒CSS Level 2 (Recommendation),
⇒CSS Level 2 Revision 1 (Recommendation),
⇒Selectors Level 3 (Recommendation),
⇒CSS Color Module Level 3 (Recommendation),
⇒CSS Namespaces Module Level 3 (Recommendation),
.mw-parser-output .sidebar{width:auto;float:right;clear:right;margin:0.5em 0 1em 1em;background:#f8f9fa;border:1px solid #aaa;padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:75%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:720px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}
HTML
各種項目
HTML
ダイナミックHTML
HTML5
audio要素
canvas要素
video要素
XHTML
Mobile Profile
C-HTML
HTML要素
HTMLフレーム
Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)は、HTMLやXMLの要素をどのように修飾(表示)するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する、文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。
CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。以下の点を特徴とする。
ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。
ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制作者、ユーザがそれぞれ定義した CSSのもたらす効果を重ね合わせる(カスケードする)ことができる[注釈 1]。
CSSは、1994年にWWW生誕の地である欧州原子核研究機構に勤務するホーコン・ウィウム・リーにより提唱された。 スタイルの情報は読み込む内容(作成者スタイルシート)やユーザーエージェントの設定(ユーザースタイルシート)の2か所に記載できる。ユーザーエージェントも独自のスタイル(デフォルトスタイルシート)を持っている。 作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSS の利便性を最大限発揮するために、別文書として読み込ませる事が推奨されている。 ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱うことも可能である(ただし一部に解釈の相違などに伴う非互換部分も存在する)。CSS では要素にスタイルを与えるため、次のような仕様が定められている。 以下のCSS断片を例にとる。p#id { color: #ff3300 } 上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位(HTML 文書においては要素、要素の親子関係、特定のクラス、ID など)に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ: 値」か、「空(何も記述しない)」のどちらかで構成され、プロパティ、: 、値の前後には空白文字(スペース、タブ、改行など)を自由に入れられ、また ; で区切ることにより宣言を並べて書くことができる。 上例は HTML 文書に適用する場合、「 id という ID を持った p 要素の文字色を赤 FF(=255) 、緑 33(=51) 、青 0 にせよ」という指定を意味する。color: #ff3300;width: 35%color: "#0033ff";width: '53%' このような宣言があったとき、後者二つは " や ' を付したために不正である。なぜなら、" や ' で囲ったものは文字列として扱われ、color プロパティが取りうる色の値( #rrggbb 、rgb([0-255], [0-255], [0-255]) 、または、 black や red などのキーワードなど)ではないからである。また、p#id { color: #ff3300 }p#id { font-size: 24px } は、p#id { color: #ff3300; font-size: 24px } と等価である。; は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。
記述
記述方法
{ から } までの部分を宣言ブロックという
p#id をセレクタ(選択子)といい、スタイルが適用される対象をしめす
宣言ブロックとセレクタを合わせて規則集合という
color: #ff3300 部分を宣言という
宣言の内、: より前(上例では color )をプロパティ(特性)という
宣言の内、: より後(上例では #ff3300 )を値という