(Translated by https://www.hiragana.jp/)
Cascading Style Sheets - Wikipedia コンテンツにスキップ

Cascading Style Sheets

出典しゅってん: フリー百科ひゃっか事典じてん『ウィキペディア（Wikipedia）』
ウィキペディア ウィキペディアにおける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),
HTML
各種かくしゅ項目こうもく
比較ひかく

Cascading Style Sheets（カスケーディング・スタイル・シーツ）は、HTMLやXMLの要素ようそをどのように修飾しゅうしょく（表示ひょうじ）するかを指示しじするスタイルシート言語げんごである。World Wide Web Consortium (W3C) がとりまとめ勧告かんこくする、文書ぶんしょの構造こうぞうと体裁ていさいを分離ぶんりさせるという理念りねんを実現じつげんするために提唱ていしょうされた。略称りゃくしょうは、CSS。

CSSはHTMLで表現ひょうげん可能かのうと考かんがえられるデザインの大だい部分ぶぶんを実現じつげんできる要素ようそを取とり入いれつつ、新あらたなデザイン機能きのうを備そなえる。以下いかの点てんを特徴とくちょうとする。

  • ページを表示ひょうじするメディアに合あわせてスタイルシートを切きり替かえることで、メディアごとに表示ひょうじを変化へんかさせることができる。
  • ユーザーエージェント（多おおくの場合ばあいウェブブラウザ）、ウェブサイト制作せいさく者しゃ、ユーザがそれぞれ定義ていぎしたCSSのもたらす効果こうかを重かさね合あわせる（カスケードする）ことができる[注釈ちゅうしゃく 1]。

CSSは、1994年ねんにホーコン・ウィウム・リーによって開発かいはつされた。

記述きじゅつ

[編集へんしゅう]

スタイルの情報じょうほうは読よみ込こむ内容ないよう（作成さくせい者しゃスタイルシート）やユーザーエージェントの設定せってい（ユーザースタイルシート）の2か所しょに記載きさいできる。ユーザーエージェントも独自どくじのスタイル（デフォルトスタイルシート）を持もっている。

作成さくせい者しゃスタイルシートはマークアップ文書ぶんしょの中なかに直接ちょくせつ記述きじゅつするか、別べつ文書ぶんしょとして読よみ込こませる形かたちで利用りようされる。CSS の利便りべん性せいを最大限さいだいげん発揮はっきするために、別べつ文書ぶんしょとして読よみ込こませる事ことが推奨すいしょうされている。

記述きじゅつ方法ほうほう

[編集へんしゅう]

ここでは CSS Level 2 について説明せつめいする。CSS の文法ぶんぽうは異ことなるレベル間あいだでも後方こうほう互換ごかん性せいを持もつように設計せっけいされており、例たとえば CSS Level 1 で書かかれたスタイルシートを CSS Level 2 として扱あつかうことも可能かのうである（ただし一部いちぶに解釈かいしゃくの相違そういなどに伴ともなう非ひ互換ごかん部分ぶぶんも存在そんざいする）。CSS では要素ようそにスタイルを与あたえるため、次つぎのような仕様しようが定さだめられている。

以下いかのCSS断片だんぺんを例れいにとる。 

p#id { color: #ff3300 }
  • { から } までの部分ぶぶんを宣言せんげんブロックという
  • p#id をセレクタ（選択せんたく子こ）といい、スタイルが適用てきようされる対象たいしょうをしめす
  • 宣言せんげんブロックとセレクタを合あわせて規則きそく集合しゅうごうという
  • color: #ff3300 部分ぶぶんを宣言せんげんという
  • 宣言せんげんの内うち、: より前まえ（上うえ例れいでは 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 は必かならずしも一ひとつのところで一意いちいに指定していできず、そのため指定してい内容ないようの衝突しょうとつを避さけるために優先ゆうせん順位じゅんいがユーザーエージェントによって計算けいさんされる。その結果けっかは、以下いかのような条件じょうけんにより算出さんしゅつされる。

  • 作成さくせい者しゃスタイルシートはユーザースタイルシートより優先ゆうせんされる
  • デフォルトスタイルシートは他たのスタイルシートを優先ゆうせんする
  • 最さい重要じゅうよう指定していされている宣言せんげんはユーザースタイルシートが作成さくせい者しゃスタイルシートより優先ゆうせんされる（CSS1 では逆ぎゃく）
  • 外部がいぶから読よみ込こんだものは読よみ込こんだ先さきとまとめて扱あつかう
  • 詳細しょうさい度どによって整理せいりする
    • そのセレクタ内ないで指定してい先さきを一意いちいに決きめられるもの（ID の類るい）が多おおい方ほうを優先ゆうせんする
    • ID の類るいによる優先ゆうせん順位じゅんいが同おなじ場合ばあいは、属性ぞくせいや擬似ぎじクラスの数かずが多おおい方ほうを優先ゆうせんする
    • それでも優先ゆうせん順位じゅんいが決きまらない場合ばあいは、要素ようその数かずが多おおい方ほうを優先ゆうせんする
  • これでもまだ優先ゆうせん順位じゅんいが同一どういつの場合ばあい、作成さくせい者しゃスタイルシートにおいて以下いかの順じゅんで優先ゆうせんする
    1. インラインのもの
    2. 外部がいぶからのもの
  • HTML の align 属性ぞくせいなど、CSS 以外いがいによるスタイルの指定していは、それと等価とうかな CSS によるスタイル指定していが製作せいさく者しゃスタイルシートの先頭せんとうにあるものとして扱あつかう。ただし、これらの詳細しょうさい度どは最もっとも低ひくいものとする（CSS1 においては要素ようそ名めいによる指定していを一ひとつだけ含ふくむセレクタと同おなじ詳細しょうさい度ど）

記載きさい可能かのうな方法ほうほうの詳細しょうさいは次つぎの通とおりで、一般いっぱん的てきに優先ゆうせんされる順位じゅんいで並ならべ替かえている（CSS2で最さい重要じゅうよう指定していの優先ゆうせん順位じゅんいの仕様しようが変更へんこうされている、勧告かんこく6章しょう4）。

  1. ユーザスタイルシート中ちゅうで最さい重要じゅうよう指定していされた宣言せんげん - ユーザーエージェントの設定せっていのスタイルの中なかで !important を宣言せんげんに付加ふかする
  2. 作成さくせい者しゃスタイルシート中ちゅうで最さい重要じゅうよう指定していされた宣言せんげん - 作成さくせい者しゃが内容ないように付随ふずいさせたスタイル中ちゅうで !important を宣言せんげんに付加ふかする。
  3. 作成さくせい者しゃスタイルシート中ちゅうの通常つうじょうの宣言せんげん
  4. ユーザースタイルシート中ちゅうの通常つうじょうの宣言せんげん
  5. デフォルトスタイルシートの宣言せんげん

作成さくせい者しゃスタイルシートの記述きじゅつ方法ほうほうによる優先ゆうせん順位じゅんいは以下いかの通とおり。

  1. 特定とくていの要素ようそにスタイルを記述きじゅつする
  2. HTML や XML のヘッダ部ぶにそのページ全体ぜんたいを対象たいしょうにスタイルを定義ていぎする
  3. CSS のみを記述きじゅつした外部がいぶファイルを用意よういし、HTML ファイルのヘッダ部ぶからリンクを張はってスタイルを参照さんしょうさせる

継承けいしょう

[編集へんしゅう]

継承けいしょう（けいしょう、英えい: Inheritance）は親おや要素ようそから子こ要素ようそへのプロパティ値ち伝播でんぱである[1]。

CSS の継承けいしょう機能きのうにより効率こうりつ的てきかつ意味いみ論ろんに沿そったスタイル付づけが可能かのうになる。例たとえばホームページ内ないに <article><h2><div> の3階層かいそう構造こうぞうからなるミニ記事きじを書かく場合ばあいを考かんがえる。ミニ記事きじを周まわりから区切くぎるために背景はいけい色しょくを <article style="background: #a9a9a9;"> で指定していする場合ばあい、意図いととしてはミニ記事きじ全体ぜんたいすなわち <article>以下いか全ぜん要素ようその背景はいけいが変かわってほしい。CSS は継承けいしょうによりこれを実現じつげんする。すなわち、子こ要素ようそに背景はいけい色しょくを指定していしない（<article style="background: #a9a9a9;"><h2><div>）場合ばあいでも自動的じどうてきに親おや要素ようそのプロパティが子こ要素ようそへ引ひき継つがれ、ミニ記事きじ全体ぜんたいの背景はいけいが変かわる。継承けいしょうがない場合ばあい、ミニ記事きじの <h2> ヘッダー部ぶが白しろ背景はいけいのままになってしまう。

勧告かんこく等とう

[編集へんしゅう]

CSS の仕様しようにはレベルという段階だんかいがあり、2011年ねん11月段階だんかいで、Level 1 から Level 4 までの仕様しようが公開こうかいされている。

Cascading Style Sheets, level 1 (CSS1), 勧告かんこく 1996年ねん12月

[編集へんしゅう]

ボックスモデルの参考さんこう図ず

マージン

ボーダー

パディング

内容ないよう

パディング

ボーダー

マージン

ボックスに width 属性ぞくせいを設定せっていしたとき、W3C のボックスのモデルでは内容ないようの横よこ幅はばであると解釈かいしゃくされる。そしてパディングとボーダー分ぶんの横よこ幅はばは要素ようその横よこ幅はばに追加ついかされる。

他方たほうマイクロソフトのボックスのモデルでは width 属性ぞくせいは内容ないようの横よこ幅はばとパディングとボーダー分ぶんを足たしたもの、すなわち要素ようそ全すべての横よこ幅はばになる[2]。そのため Internet Explorer 5.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のロゴ

CSS3以降いこうではCSS 2.1を中核ちゅうかくとし、新あらたな機能きのうの追加ついかや改良かいりょうをモジュールとすることで実現じつげんするものとする[3]。ユーザーエージェントは各かくモジュールへ対応たいおうするか否ひかを自由じゆうに選択せんたくできるようになる他ほか、縦たて方向ほうこうの書しょ字じや、HTML以外いがいの規格きかくにまで関与かんよした内容ないようとなっている。2023年ねん11月がつ現在げんざいで勧告かんこくされているモジュールは以下いかの通とおり。

CSS3の主要しゅようモジュール仕様しよう書しょ[4]
モジュール 仕様しよう書しょタイトル 状態じょうたい 日付ひづけ
css3-background CSS Backgrounds and Borders Module Level 3  勧告かんこく候補こうほ草案そうあん 2023年ねん2月がつ
css-box-3 CSS Box Model Module Level 3 勧告かんこく 2023年ねん4月がつ
css-cascade-3 CSS Cascading and Inheritance Level 3  勧告かんこく 2021年ねん2月がつ
css-color-3 CSS Color Module Level 3 勧告かんこく 2022年ねん1月がつ
css3-content CSS Generated Content Module Level 3  草案そうあん 2019年ねん8月がつ
css-fonts-3 CSS Fonts Module Level 3 勧告かんこく 2018年ねん9月がつ
css3-gcpm CSS Generated Content for Paged Media Module 草案そうあん 2014年ねん5月がつ
css3-layout CSS Template Layout Module ノート 2015年ねん3月がつ
css3-mediaqueries  Media Queries 勧告かんこく 2012年ねん6月がつ
mediaqueries-4  Media Queries Level 4 勧告かんこく候補こうほ 2021年ねん12月
css3-multicol  Multi-column Layout Module Level 1 勧告かんこく候補こうほ 2021年ねん10月がつ
css3-page CSS Paged Media Module Level 3 草案そうあん（一部いちぶはcss3-breakへ） 2018年ねん10月がつ
css3-break CSS Fragmentation Module Level 3 勧告かんこく候補こうほ 2018年ねん12月
selectors-3 Selectors Level 3 勧告かんこく 2018年ねん11月
selectors-4 Selectors Level 4 草案そうあん 2022年ねん11月
css3-ui CSS Basic User Interface Module Level 3 (CSS3 UI) 勧告かんこく 2018年ねん6月がつ

Cascading Style Sheets, Level 4 (CSS4)以降いこう

[編集へんしゅう]

CSS4はモジュール化かされたため、単一たんいつの統合とうごうされた仕様しようは存在そんざいせず、「Level 4」モジュールの総称そうしょうとなる[3]。

Level 4 モジュールで追加ついかされる機能きのうは、Level 3 モジュールで未定義みていぎだった新あたらしい機能きのうのほか、草案そうあんに一度いちど含ふくまれながら、相互そうご運用うんよう性せいを十分じゅうぶんに確保かくほ出来できず仕様しようから省はぶかれた機能きのうからなる。

未いまだに勧告かんこく候補こうほに至いたっていないLevel 3モジュールが存在そんざいする中なか、勧告かんこく候補こうほになったLevel 4モジュール仕様しよう書しょはMedia Queries Level 4、CSS Conditional Rules Module Level 4などがある。このほか、Level 5、6のモジュール草案そうあんもCSS Color Module Level 5やCSS Cascading and Inheritance Level 6が公開こうかいされている。

CSS Snapshot

[編集へんしゅう]

CSS Snapshot はある時点じてんにおける各種かくしゅ CSS 仕様しよう書しょの状態じょうたいを集約しゅうやくした文書ぶんしょ (W3C Group Note) である[5]。

CCS 2.1 より後のちの CSS は単一たんいつ仕様しよう書しょではなく各かくモジュール仕様しよう書しょの総体そうたいにより定義ていぎされている。その副作用ふくさようとして CSS 全体ぜんたいの状況じょうきょうを俯瞰ふかんするのが難むずかしくなっていた。CSS snapshot はこれを解決かいけつするために W3C CSSWG が発行はっこうしている Group Note である。Group Note であり正式せいしきな W3C 勧告かんこくではないが、より機動きどう的てきに「CSS Snapshot 2023」といった形かたちでおおよそ年次ねんじ発行はっこうされている。

脚注きゃくちゅう

[編集へんしゅう]
[脚注きゃくちゅうの使つかい方かた]

注釈ちゅうしゃく

[編集へんしゅう]
  1. ^ ただし拡張かくちょう・修正しゅうせいの続つづいているCSS仕様しようの全すべてを完全かんぜんに実装じっそうしているユーザーエージェントは事実じじつ上じょう皆無かいむといってよく、実際じっさいシェアで多数たすうを占しめるユーザーエージェントは部分ぶぶん対応たいおうにすぎない。しかし実用じつよう上じょう支障ししょうのないレベルの実装じっそうはされてきており、なおかつ表現ひょうげんの互換ごかん性せいについても考慮こうりょされてきている。

出典しゅってん

[編集へんしゅう]
  1. ^ "Inheritance propagates property values from parent elements to their children." W3C CSSWG. (2022). CSS Cascading and Inheritance Level 4, W3C Candidate Recommendation Snapshot, 13 January 2022.
  2. ^ en:Internet Explorer box model bug
  3. ^ a b World Wide Web Consortium (14 February 2023). "2.4 CSS Levels". CSS Snapshot 2023 (英語えいご). 2023年ねん11月21日にち閲覧えつらん。
  4. ^ "All CSS specifications" (英語えいご). W3C. 6 September 2023. 2023年ねん10月がつ22日にち時点じてんのオリジナルよりアーカイブ。2023年ねん11月21日にち閲覧えつらん。
  5. ^ "CSS Snapshot 2023 ... This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023." CSSWG. (2023). CSS Snapshot 2023.

関連かんれん項目こうもく

[編集へんしゅう]

外部がいぶリンク

[編集へんしゅう]
ウィキブックスにCSS関連かんれんの解説かいせつ書しょ・教科書きょうかしょがあります。
スタブアイコン

この項目こうもくは、インターネットやウェブに関連かんれんした書かきかけの項目こうもくです。この項目こうもくを加筆かひつ・訂正ていせいなどしてくださる協力きょうりょく者しゃを求もとめています（PJ:コンピュータ/P:コンピュータ）。

W3C標準ひょうじゅん
製品せいひん・標準ひょうじゅん
推奨すいしょう
勧告かんこく候補こうほ
作業さぎょう草稿そうこう
覚書おぼえがき
方針ほうしん
発案はつあん
廃止はいし
団体だんたい
ソフトウェア
関連かんれん会議かいぎ
カテゴリ Category:W3C勧告かんこく
「https://ja.wikipedia.org/w/index.php?title=Cascading_Style_Sheets&oldid=103782470」から取得しゅとく