このキーワード
友達に教える
URLをコピー

Cascading_Style_Sheetsとは?

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),
HTML


各種項目

比較
  • マークアップ言語
  • HTML
  • XHTML


Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート)とは、HTMLXML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造体裁分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。

CSSは、1994年WWW生誕の地であるCERNに勤務するホーコン・ウィウム・リー氏により提唱された。

記述

スタイルの情報は読み込む内容(作成者スタイルシート)やユーザーエージェントの設定(ユーザースタイルシート)の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 }

と等価である。;は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。そのため、必ずしも宣言に;をつけるのを強制するものではない。

セレクタは、実装レベルの高いブラウザならばどの属性であってもCSSを適用することが可能であり、この場合IDに関する属性セレクタであるので、#idは[id="id"]と等価である。セレクタの簡単なマッチングが可能である。 そのほかHTMLタグに対する適用、文書構造からみた子・兄妹構造へ適用するセレクタ、更にはリンクや動的な表現・言語に関する疑似クラス(:link、:hover、:lang)などがある。

優先順位

CSSは必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。その結果は、以下のような条件により算出される。

記載可能な方法の詳細は次の通りで、一般的に優先される順位で並び替えている(CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4)。

  1. ユーザスタイルシート中で最重要指定された宣言 - ユーザーエージェントの設定のスタイルの中で!importantを宣言に付加する
  2. 作成者スタイルシート中で最重要指定された宣言 - 作成者が内容に付随させたスタイル中で!importantを宣言に付加する。
  3. 作成者スタイルシート中の通常の宣言
  4. ユーザースタイルシート中の通常の宣言
  5. デフォルトスタイルシートの宣言

作成者スタイルシートの記述方法による優先順位は以下の通り。

  1. 特定の要素にスタイルを記述する
  2. HTMLやXMLのヘッダ部にそのページ全体を対象にスタイルを定義する
  3. CSSのみを記述した外部ファイルを用意し、HTMLファイルのヘッダ部からリンクを張ってスタイルを参照させる


勧告等

CSSの仕様はレベルという段階をもち、2011年11月段階で、Level 1 から Level 4 までの仕様が公開されている。

Cascading Style Sheets, level 1 (CSS1), 勧告 1996年12月

ボックスモデルの参考図

マージン

ボーダー

パディング

内容

パディング

ボーダー

マージン

ボックスにwidth属性を設定したとき、W3C のボックスのモデルでは内容の横幅であると解釈される。そしてパディングとボーダー分の横幅は要素の横幅に追加される。

他方マイクロソフトのボックスのモデルでは width 属性は内容の横幅とパディングとボーダー分を足したもの、即ち要素全ての横幅になる。そのためInternet Explorer5.5以下と6.0以上、およびInternet Explorer以外のWebブラウザでの表示の違いを近付けるためには、パディングとボーダーを0にする、もしくはCSSハックを使う必要がある。

Internet Explorer 6 では DOCTYPE が正確ならば標準準拠モードに移行出来る(ただXMLやXHTMLの場合、XML宣言を仕様通り書くと過去互換モードでレンダリングされるバグがある)。

Cascading Style Sheets, level 2 (CSS2), 勧告 1998年5月

CSS2 は CSS1 の上位互換。幾つかの概念の追加・拡大・改訂が行われた。

具体的には表示媒体(モニターや TV、紙媒体など)によって自動的にスタイルシートを変更できるようにし、それに附随して音声ブラウザへの対応、印刷媒体への対応が行われ、フォントなどの表示機能の拡張や、ボックスの概念の修正などが行われた。

但し、2002年頃以降に発表されたCSS対応UAで、これを仕様と見なしているものは存在せず、実質的に、CSS2.1に仕様としての役割を委ねた形になっている。CSS2勧告の仕様書にアクセスすると、CSS2は管理されておらず、仕様の参照や実装はCSS 2.1を基にせよと奨励する注意書きがある。

Cascading Style Sheets, level 2 revision 1 (CSS 2.1), 勧告 2011年6月

CSS2の改訂版。CSS2仕様書の定義が不明瞭であったことから各ユーザーエージェントのCSS2実装に非互換が生じたことから、曖昧な記述を明確にするといった改訂が行われた。また、text-shadowプロパティのように、CSS2で策定されていながら長い間実装が行われなかったもの、displayプロパティのrun-in値のように、複数のユーザーエージェントで相互運用性を確保できなかった機能は削除されている。それらはCSS3以降のレベルで定義され直すことになる。

CSSの実装に際してベンダは、2002年頃からCSS2.1を基本仕様と見なしている。

Cascading Style Sheets, level 3 (CSS3)

CSS3以降ではCSS 2.1を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2018年7月現在で勧告されているモジュールは以下の通り。

Summary of main module-specifications
Module Specification title Status Date
css3-background | CSS Backgrounds and Borders Module Level 3 | Candidate Rec. | 000000002017-10-01-00002017年10月
css3-box | CSS basic box model | Working Draft, | 000000002018-07-01-00002018年7月
css-cascade-3 | CSS Cascading and Inheritance Level 3 | Candidate Rec. | 000000002016-05-01-00002016年5月
css3-color | CSS Color Module Level 3 | Recommendation | 000000002018-06-01-00002018年6月
css3-content | CSS3 Generated and Replaced Content Module | Working Draft | 000000002016-06-01-00002016年6月
css-fonts-3 | CSS Fonts Module Level 3 | Candidate Rec. | 000000002018-06-01-00002018年6月
css3-gcpm | CSS Generated Content for Paged Media Module | Working Draft | 000000002014-05-01-00002014年5月
css3-layout | CSS Template Layout Module | Note | 000000002015-03-01-00002015年3月
css3-mediaqueries | Media Queries | Recommendation | 000000002012-06-01-00002012年6月
mediaqueries-4 | Media Queries Level 4 | Candidate Rec. | 000000002017-09-01-00002017年9月
css3-multicol | Multi-column Layout Module Level 1 | Working Draft | 000000002018-05-01-00002018年5月
css3-page | CSS Paged Media Module Level 3 | Working Draft | 000000002013-03-01-00002013年3月
selectors-3 | Selectors Level 3 | Candidate Rec. | 000000002018-01-01-00002018年1月
selectors-4 | Selectors Level 4 | Working Draft | 000000002018-02-01-00002018年2月
css3-ui | CSS Basic User Interface Module Level 3 (CSS3 UI) | Recommendation | 000000002018-06-01-00002018年6月

Cascading Style Sheets, Level 4 (CSS4)

 | 
この節の加筆が望まれています。

CSS4はモジュール化されたため、単一の統合された仕様は存在せず、「Level 4」モジュールの総称となる。

Level 4モジュールで追加される機能は、Level 3モジュールで未定義だった新しい機能のほか、草案に一度含まれながら、相互運用性を十分に確保出来ず仕様から省かれた機能からなる。

未だに勧告候補に至っていないLevel 3モジュールが存在する中、既にLevel 4モジュールの公開草案がいくつか公開されている。

脚注

注釈

  1. ^ ただし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし、実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。

出典

  1. ^ JIS X 4168:2004「段階スタイルシート 水準1 (CSS1)」
  2. ^ en:Internet Explorer box model bug
  3. ^ §2.1 CSS Levels, 『CSS Snapshot 2015』 W3C
  4. ^ All CSS specifications”. W3.org (2014年5月22日). 2014年5月30日閲覧。

関連項目

外部リンク

 | 
この節の外部リンクはウィキペディアの方針やガイドラインに違反しているおそれがあります。過度または不適切な外部リンクを整理し、有用なリンクを脚注で参照するよう記事の改善にご協力ください。

World Wide Web Consortium
製品・標準 | 
推奨 | 

勧告候補 | 
  • Web Workers

作業草稿 | 

覚書 | 

方針 | 

発案 | 

廃止 | 


団体 | 
  • World Wide Web Foundation
  • SVG Working Group
  • WebOnt
  • W3C Device Description Working Group
  • WHATWG

ソフトウェア | 

関連会議 | 
  • IW3C2
  • World Wide Web Conference
  • WWW1



・・・・・・・・・・・・・・・・・・
出典:wikipedia
2020/04/04 05:22

HAPPY Wikipedia

あなたの考える「Cascading_Style_S…」の意味を投稿しよう
「Cascading_Style_Sheets」のコンテンツはまだ投稿されていません。
全部読む・投稿 

Cascading_Style_Sheetsスレッド一覧

・・・・・・・・・・・・・・・・・・
「Cascading_Style_Sheets」のスレッドを作成する
Cascading_Style_Sheetsの」
友達を探す
掲示板を探す
このページ
友達に教える
URLをコピー

注目のキーワード

錦織圭/北島康介/2014_FIFAワールドカップ・アジア予選/サッカー日本女子代表/消費税/東京スカイツリー/ダルビッシュ有/イチロー/香川真司/野田内閣/復興庁/石川遼/HKT48/AKB48/ワールド・ベースボール・クラシック日本代表/黒田博樹/尖閣諸島/バレンタインデー/ONE_PIECE

キーワードで探す

 
友達を探す
掲示板を探す
ハッピーWiki
ハッピーメール
ハッピーランド
HAPPY NEWS
2010Happy Mail