CSS
カスケードスタイルシート（CSS）
2024年12月からの公式ロゴ[ 1 ]
CSSソースコードの例
ファイル名拡張子
.css
インターネットメディアの種類
テキスト/CSS
統一型識別子（UTI）パブリック.css
開発者ワールドワイドウェブコンソーシアム（W3C）
初回リリース1996年12月17日 （1996年12月17日）
最新リリース
CSS 3は複数の独立したモジュールとして開発されています。定期的なスナップショットでその状況をまとめています。2023年12月7日 ( 2023-12-07 )
フォーマットの種類スタイルシート言語
コンテナ用HTML要素のスタイルルール
含まれるものHTMLドキュメント
オープンフォーマット?はい
Webサイトw3 .org /TR /CSS / #css

カスケードスタイルシート（CSS）は、 HTMLやXML （ SVG、MathML、XHTMLなどのXML方言を含む）などのマークアップ言語で書かれた文書の見た目やスタイルを指定するために使用されるスタイルシート言語です。[ 2 ] CSSは、HTMLやJavaScriptと並んで、ワールドワイドウェブの基礎となる技術です。[ 3 ]

CSSは、レイアウト、色、フォントなど、コンテンツとプレゼンテーションの分離を可能にするように設計されています。[ 4 ]この分離により、プレゼンテーションを気にせずにコンテンツを記述できるため、コンテンツのアクセシビリティが向上します。また、プレゼンテーション特性の指定において柔軟性と制御性が向上し、関連するCSSを別の.cssファイルに指定することで複数のWebページで書式を共有できるようになり、構造コンテンツの複雑さと繰り返しが軽減されます。さらに、.cssファイルをキャッシュできるため、ファイルとその書式を共有するページ間でのページ読み込み速度が向上します。

フォーマットとコンテンツを分離することで、同じマークアップページを、画面上、印刷、音声（音声ブラウザやスクリーンリーダー経由）、点字タッチデバイスなど、異なるレンダリング方法に応じて異なるスタイルで表示することが可能になります。CSSには、モバイルデバイスでコンテンツにアクセスした場合の代替フォーマットに関する規則も用意されています。[ 5 ]

カスケードという名称は、特定の要素に複数のプロパティ宣言が一致する場合に、どの宣言を適用するかを決定するための優先順位スキームに由来しています。このカスケード方式の優先順位スキームは予測可能です。

CSS仕様は、ワールド・ワイド・ウェブ・コンソーシアム（W3C）によって保守されています。インターネットメディアタイプ（MIMEタイプ）text/cssは、RFC 2318（1998年3月）によってCSSで使用するために登録されています。W3Cは、CSS文書のための無料のCSS検証サービスを運営しています。[ 6 ]

HTML に加えて、XHTML、プレーン XML、SVG、XULなどの他のマークアップ言語でも CSS の使用がサポートされています。 CSS はGTKウィジェットツールキットでも使用されています。

構文

CSS はシンプルな構文を持ち、多数の英語のキーワードを使用してさまざまなスタイル プロパティの名前を指定します。

スタイルシート

スタイルシートはルールのリストで構成されます。各ルールまたはルールセットは、1つ以上のセレクタと宣言ブロックで構成されます。

セレクタ

CSS では、セレクターは、マークアップ自体のタグと属性を一致させることによって、スタイルがマークアップのどの部分に適用されるかを宣言します。

セレクターの種類

セレクターは以下に適用できます。

  • 特定のタイプのすべての要素、例：第2レベルのヘッダーh2
  • 属性によって指定された要素、特に:
    • id : 文書内で一意の識別子。セレクタ言語ではハッシュプレフィックスで示される。例：#id
    • クラス: 文書内の複数の要素に注釈を付けることができる識別子。ドット接頭辞で表されます.classname。例: (「CSS クラス」というフレーズは時々使用されますが、誤った名称です。要素クラス ( HTML の class 属性で指定) は、ブラウザーの CSS サブシステムとは異なるマークアップ機能であり、関連する W3C/WHATWG 標準は文書スタイルに作用します。Webコンテンツ モデルの「クラス」システムの起源については、RDFとマイクロフォーマットを参照してください)
  • 要素は、ドキュメント ツリー内の他の要素に対する配置に応じて異なります。

クラスとIDは大文字と小文字が区別され、文字で始まり、英数字、ハイフン、アンダースコアを含めることができます。クラスは任意の要素の任意の数のインスタンスに適用できます。IDは1つの要素にのみ適用できます。

擬似クラス

疑似クラスは、ドキュメント ツリーに含まれていない情報に基づいた書式設定を許可するために CSS セレクターで使用されます。

広く使われている擬似クラスの例としては が挙げられます。これは、ユーザーが可視要素を「ポイント」した時（通常はマウスカーソルを要素の上に置く）にのみコンテンツを識別します。 またはのようにセレクタに追加されます。 :hovera:hover#elementid:hover

擬似クラスは、またはなどの文書要素を分類しますが、擬似要素は、またはなどの部分的な要素で構成される可能性のある選択を行います。[ 7 ]擬似要素に使用される二重コロン表記と擬似クラスに使用される単一コロン表記の違いに注意してください。 :link:visited::first-line::first-letter

コンビネータ

複数の単純セレクタをコンビネータで結合することで、要素を位置、要素タイプ、ID、クラス、またはそれらの組み合わせで指定することができます。[ 8 ]セレクタの順序は重要です。例えば、はdiv要素内にあるクラスmyClassのすべての要素に適用されますが、はmyClassの要素内にあるすべてのdiv要素に適用されます。これは、myClassのdiv要素に適用される などの連結識別子と混同しないでください。div.myClass{color:red;}.myClassdiv{color:red;}div.myClass{color:red;}

セレクタ構文の要約

次の表は、セレクタ構文の使用法とそれを導入したCSSのバージョンの概要を示しています。[ 9 ]

パターンマッチCSSレベルで 最初に定義された
EE型の要素1
E:linkターゲットがまだ訪問されていない (:link) か、すでに訪問されている (:visited) ハイパーリンクのソース アンカーである E 要素1
E:visited
E:active特定のユーザーアクション中のE要素1
E:hover2
E:focus
E::first-lineE要素の最初のフォーマットされた行1
E::first-letterE要素の最初のフォーマットされた文字1
.cclass="c" を持つすべての要素1
#myidid="myid" の要素1
E.warningクラスが「警告」であるE要素（文書言語によってクラスの決定方法が指定される）1
E#myidIDが「myid」に等しいE要素1
.c#myidclass="c" で ID が "myid" である要素1
EFE要素の子孫であるF要素1
*任意の要素2
E[foo]"foo"属性を持つE要素2
E[foo="bar"]「foo」属性値が「bar」と完全に等しいE要素2
E[foo~="bar"]E要素の「foo」属性値は空白で区切られた値のリストであり、そのうちの1つは「bar」と完全に等しい2
E[foo|="en"]E要素の「foo」属性には、左から「en」で始まるハイフンで区切られた値のリストが含まれます。2
E:first-childE要素、親の最初の子2
E:lang(fr)言語「fr」のE型の要素（文書言語によって言語の決定方法が指定されます）2
E::beforeE要素のコンテンツの前に生成されたコンテンツ2
E::afterE要素のコンテンツの後に生成されたコンテンツ2
E>FE要素の子であるF要素2
E+FF要素の直前にE要素がある2
E[foo^="bar"]「foo」属性値が文字列「bar」で始まるE要素3
E[foo$="bar"]「foo」属性値が文字列「bar」で終わるE要素3
E[foo*="bar"]「foo」属性値に部分文字列「bar」が含まれるE要素3
E:rootE要素、文書のルート3
E:nth-child(n)E要素、その親のn番目の子3
E:nth-last-child(n)E要素、親の最後の要素から数えてn番目の子3
E:nth-of-type(n)E要素、その型のn番目の兄弟3
E:nth-last-of-type(n)E要素、その型の最後の要素から数えてn番目の兄弟3
E:last-childE要素、親の最後の子3
E:first-of-typeE要素、その型の最初の兄弟3
E:last-of-typeE要素、そのタイプの最後の兄弟3
E:only-childE要素、親の唯一の子3
E:only-of-typeE要素、そのタイプの唯一の兄弟3
E:empty子要素を持たないE要素（テキストノードを含む）3
E:target参照URIのターゲットとなるE要素3
E:enabled有効になっているユーザーインターフェース要素E3
E:disabled無効になっているユーザーインターフェース要素E3
E:checkedチェックされたユーザーインターフェース要素E（ラジオボタンやチェックボックスなど）3
E:not(s)単純セレクタに一致しないE要素3
E~FE要素の前にあるF要素3
E:has(s)単純セレクタsに一致する要素を含むE要素4

宣言ブロック

宣言ブロックは、セミコロンで区切られた宣言{}のリストを囲む一対の中括弧（）で構成されます。[ 10 ]

宣言

各宣言自体は、プロパティ、コロン（:）および値で構成されます。可読性を高めるために、宣言ブロック、宣言、コロン、およびセミコロンの周囲に任意の空白文字を挿入することができます。[ 11 ]

プロパティ

プロパティはCSS標準で規定されています。各プロパティには、可能な値の集合があります。一部のプロパティはあらゆるタイプの要素に影響を与えますが、他のプロパティは特定の要素グループにのみ適用されます。[ 12 ] [ 13 ]

価値観

200px値は、「center」や「inherit」などのキーワード、または(200 ピクセル)、50vw(ビューポート幅の 50 パーセント)、80% (親要素の幅の 80 パーセント) などの数値になります。

色の値は、キーワード（例： " red"）、16進数値（例： 、略称：）、0～255のRGB値（例： ）、色とアルファ透明度の両方を指定するRGBA値（例： ）、またはHSL値またはHSLA値（例： 、 ）で指定できます。[ 14 ]#FF0000#F00rgb(255,0,0)rgba(255,0,0,0.8)hsl(0100%50%)hsl(0100%50%/0.8)

線形測定を表すゼロ以外の数値には、長さの単位を含める必要があります。長さの単位は、 または のように200px、アルファベットのコードまたは略語、50vwあるいは のように、パーセント記号です。センチメートル(センチメートル)、インチ(ミリメートル)、パイカ(パイカ)、ポイント(ポイント)など80%の一部の単位は絶対単位であり、レンダリングされる寸法はページの構造に依存しません。一方、エム( em ) 、エクセル( ex ) 、ピクセル(ピクセル)などの他の単位は相対単位であり、親要素のフォントサイズなどの要因がレンダリングされる測定値に影響を与える可能性があります。これらの 8 つの単位は CSS 1 [ 15 ]の機能であり、その後のすべての改訂で保持されています。提案されている CSS 値および単位モジュール レベル 3 が W3C 勧告として採用された場合、さらに、、、、、の7 つの長さの単位が提供されます。[ 16 ]cminmmpcptemexpxchQremvhvmaxvminvw

使用

CSSが登場する前は、HTMLドキュメントのほぼすべての表示属性はHTMLマークアップ内に含まれていました。つまり、フォント色、背景スタイル、要素の配置、境界線、サイズなど、すべての属性をHTML内で明示的に（多くの場合、繰り返し）記述する必要がありました。CSSの登場により、作成者はこれらの情報の多くを別のファイルであるスタイルシートに移すことができるため、HTMLが大幅に簡素化されました。さらに、レスポンシブWebページにアクセス可能なデバイスが増えるにつれて、さまざまな画面サイズやレイアウトが登場し始めています。デバイスサイズに合わせてWebサイトをカスタマイズするのはコストがかかり、ますます困難になっています。CSSのモジュール性により、サイト内のさまざまな部分、あるいは複数のサイト間でスタイルを再利用できるため、一貫性と効率性が向上します。

例えば、見出し（h1要素）、小見出し（要素h2）、さらに小見出し（要素）などは、HTMLを用いて構造的に定義されます。印刷物や画面上では、これらの要素のフォント、サイズ、色、強調表示h3の選択は、プレゼンテーション的な要素となります。

CSSが登場する以前は、例えばすべての見出しにこのようなタイポグラフィ特性を割り当てたい文書作成者はh2、その見出しの種類ごとにHTMLのプレゼンテーションマークアップを繰り返す必要がありました。これにより、文書はより複雑で大きくなり、エラーが発生しやすくなり、保守が困難になりました。CSSはプレゼンテーションと構造を分離することを可能にします。CSSは色、フォント、テキストの配置、サイズ、境界線、間隔、レイアウトなど、多くのタイポグラフィ特性を定義でき、画面表示と印刷表示で独立して定義できます。CSSは、音声テキストリーダーの読み上げ速度や強調など、視覚に訴えないスタイルも定義します。W3Cは現在、すべてのプレゼンテーションHTMLマークアップの使用を非推奨としています。 [ 17 ]

たとえば、CSS 以前の HTML では、赤いテキストで定義された見出し要素は次のように記述されます。 

< h1 >< font color = "red" >第1章</ font ></ h1 >

CSS を使用すると、同じ要素を HTML プレゼンテーション属性の代わりにスタイル プロパティを使用してコーディングできます。 

< h1 style = "color: red;" >第1章</ h1 >

この利点はすぐには理解できないかもしれませんが、スタイルプロパティを内部スタイル要素、あるいはさらに良い方法として外部CSSファイルに記述することで、CSSの威力はより明らかになります。例えば、ドキュメントに次のスタイル要素が含まれているとします。 

<スタイル> h1 {色:赤; } </スタイル>

h1明示的なコードを必要とせずに、ドキュメント内のすべての要素が自動的に赤色に変わります。作成者が後でh1要素を青色にしたい場合は、スタイル要素を次のように変更します。 

<スタイル> h1 {色:青; } </スタイル>

面倒な作業でドキュメントを調べて、個々のh1要素ごとに色を変更するのではなく、

スタイルは、以下に示すように外部 CSS ファイルに配置し、次のような構文を使用して読み込むこともできます。 

< link href = "path/to/file.css" rel = "stylesheet" type = "text/css" >

これにより、HTML ドキュメントからスタイル設定がさらに分離され、共有された外部 CSS ファイルを編集するだけで複数のドキュメントのスタイルを変更できるようになります。

出典

CSS（カスケーディング スタイル シート）は、ブラウザのデフォルト、ユーザー設定、またはウェブ デザイナーが作成したスタイルを使用して、ウェブ コンテンツのスタイルを柔軟に定義できます。これらのスタイルは、HTML ドキュメント内でインラインで適用することも、外部の .css ファイルを通じて適用して一貫性を高めることもできます。これにより、再利用性と保守性が向上し、ウェブ開発が簡素化されるだけでなく、ブラウザがキャッシュできる専用の .css ファイルにスタイルをオフロードできるため、サイトのパフォーマンスも向上します。さらに、スタイルを読み込めない場合や無効になっている場合でも、この分離によってコンテンツのアクセシビリティと可読性が維持され、障碍のあるユーザーを含むすべてのユーザーがサイトを利用できるようになります。セレクタの詳細度、ルールの順序、メディア タイプなどを考慮した多面的なアプローチにより、ウェブサイトはさまざまなデバイスやユーザーのニーズに対して視覚的に一貫性があり、適応性に優れたものとなり、設計意図とユーザー アクセシビリティのバランスが保たれます。

複数のスタイルシート

複数のスタイルシートをインポートできます。使用する出力デバイスに応じて異なるスタイルを適用できます。例えば、画面表示版と印刷版では表示内容が大きく異なる場合があり、作成者はそれぞれのメディアに合わせて適切なプレゼンテーションを調整できます。

カスケード

最も優先度の高いスタイルシートがコンテンツの表示を制御します。最も優先度の高いソースで設定されていない宣言は、ユーザーエージェントスタイルなどの優先度の低いソースに渡されます。このプロセスはカスケーディングと呼ばれます。

CSS の目標の 1 つは、ユーザーがより細かくプレゼンテーションを制御できるようにすることです。赤い斜体の見出しが読みにくいと感じる人は、異なるスタイルシートを適用するとよいでしょう。ブラウザーと Web サイトに応じて、ユーザーはデザイナーが提供するさまざまなスタイルシートを選択することも、追加されたスタイルをすべて削除してブラウザーの既定のスタイルを使用してサイトを表示したり、赤い斜体の見出しスタイルのみを上書きして他の属性を変更したりすることもできます。StylishやStylusなどのブラウザー拡張機能は、このようなユーザー スタイルシートの管理を容易にするために作成されています。大規模なプロジェクトでは、開発者が優先順位が競合するサードパーティのスタイルを統合する場合に、カスケーディングを使用してどのスタイルの優先順位が高いかを判断し、さらにそれらの競合を解決することができます。さらに、カスケーディングはテーマ別のデザインを作成するのにも役立ちます。これにより、デザイナーは全体的なレイアウトを損なうことなく、デザインのさまざまな側面を微調整することができます。

CSS 優先順位スキーム
CSS 優先度スキーム（最高から最低）
優先度CSSソースタイプ説明
1重要性「」注釈は以前の優先度タイプを上書きします !important
2列をなしてHTMLの「style」属性を介してHTML要素に適用されるスタイル
3メディアタイプメディア固有のCSSが定義されていない限り、プロパティ定義はすべてのメディアタイプに適用されます。
4ユーザー定義ほとんどのブラウザにはアクセシビリティ機能があります。ユーザー定義のCSS
5セレクタの詳細度特定のコンテキストセレクタ（）は一般的な定義を上書きします #headingp
6ルールの順序最後のルール宣言は優先度が高い
7親の継承プロパティが指定されていない場合は、親要素から継承されます。
8HTML文書におけるCSSプロパティの定義CSSルールまたはCSSインラインスタイルがデフォルトのブラウザ値を上書きします
9ブラウザのデフォルト最低優先度: ブラウザのデフォルト値はW3Cの初期値仕様によって決定されます

特異性

詳細度とは、様々なルールの相対的な重み付けを指します。[ 18 ]複数のルールが適用可能な場合に、どのスタイルが要素に適用されるかを決定します。仕様によると、単純なセレクタ（例：H1）の詳細度は1、クラスセレクタの詳細度は1,0、IDセレクタの詳細度は1,0,0です。詳細度の値は10進法のように繰り越されないため、カンマで「数字」を区切ります[ 19 ]（11個の要素と11個のクラスを持つCSSルールの詳細度は121ではなく11,11になります）。

したがって、次のルールのセレクターは、示された詳細度をもたらします。

セレクター特異性
h1{color:white;}0、0、0、1
pem{color:green;}0、0、0、2
.grape{color:red;}0、0、1、0
p.bright{color:blue;}0、0、1、1
p.brightem.dark{color:yellow;}0、0、2、2
#id218{color:brown;}0、1、0、0
style=" "1、0、0、0

例

次の HTML フラグメントを検討してください。 

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < style > # xyz { color : blue ; } </ style > </ head > < body > < p id = "xyz" style = "color: green;" >詳細度を示す</ p > </ body > </ html >

上記の例では、属性の宣言のstyle方が<style>詳細度が高いため、要素の宣言が上書きされ、段落が緑色で表示されます。

特異性を示す

継承

継承は CSS の重要な機能であり、祖先と子孫の関係に基づいて動作します。継承とは、プロパティが特定の要素だけでなくその子孫にも適用されるメカニズムです。[ 18 ]継承はドキュメント ツリーに依存します。ドキュメント ツリーは、ネストに基づくページ内のXHTML要素の階層です。子孫要素は、それを囲む祖先要素から CSS プロパティ値を継承できます。一般に、子孫要素はテキスト関連のプロパティを継承しますが、ボックス関連のプロパティは継承されません。継承できるプロパティは、color、font、letter spaces、line-height、list-style、text-align、text-indent、text-transform、visibility、white-space、word-spacing です。継承できないプロパティは、background、border、display、float と clear、height、width、margin、min-height、max-height、-width、outline、overflow、padding、position、text-decoration、vertical-align、z-index です。

継承を使用すると、スタイルシートで特定のプロパティを何度も宣言する必要がなくなり、CSS を短くすることができます。

CSSにおける継承は、クラスベースのプログラミング言語における継承とは異なります。クラスベースのプログラミング言語では、クラスBを「クラスAに似ているが、変更が加えられている」と定義することが可能です。[ 20 ] CSSでは、「クラスAに似ているが、変更が加えられている」という要素のスタイル設定が可能です。しかし、そのようなCSSクラスBを定義することは不可能であり、そのクラスBを使用して、変更を繰り返すことなく複数の要素のスタイル設定を行うことはできません。

例

次のスタイルシートがあるとします。 

p {色:ピンク; }

内部に強調要素 ( <em>) を持つ ap 要素があるとします。 

< p > これは< em >継承 を説明するため</ em >です</ p >

em要素に色が割り当てられていない場合、強調された単語「illustrate」は親要素pの色を継承します。スタイルシートpの色はピンクなので、em要素も同様にピンクになります。

これは継承を説明するためのものである

空白

プロパティとセレクタ間の空白は無視されます。このコードスニペット： 

body {オーバーフロー:非表示;背景: #000000 ;背景画像: url ( images/bg.gif );背景繰り返し:繰り返しなし;背景位置:左上; }

機能的には次のものと同等です: 

body {オーバーフロー:非表示;背景色: #000000 ;背景画像: url ( images/bg.gif );背景繰り返し:繰り返しなし;背景位置:左上; }

インデント

CSSを読みやすくフォーマットする一般的な方法の一つは、各プロパティをインデントし、それぞれに独立した行を設けることです。CSSを読みやすくフォーマットするだけでなく、ショートハンドプロパティを使用することでコードをより速く記述でき、レンダリング時の処理も高速化されます。[ 21 ]

body {オーバーフロー:非表示;背景: #000 url ( images/bg.gif )繰り返しなし左上; }

場合によっては、複数のプロパティ値が独自の行にインデントされることがあります。

@ font-face {フォントファミリー: 'Comic Sans' ;フォントサイズ: 20px ; src : url ( 'first.example.com' ), url ( 'second.example.com' ), url ( 'third.example.com' ), url ( 'fourth.example.com' ); }

ポジショニング

CSS 2.1 では、次の 3 つの配置スキームが定義されています。

通常の流れ
インライン項目は、テキスト内の単語の文字と同じように、利用可能なスペースに次々と配置され、スペースがなくなると新しい行が下に続きます。ブロック項目は、段落や箇条書きリストの項目のように、垂直方向に積み重ねられます。通常のフローには、ブロック項目、インライン項目、ランインボックスの相対的な配置も含まれます。
フロート
フロートアイテムは通常のフローから外れ、利用可能なスペース内で可能な限り左または右に移動します。その後、他のコンテンツはフロートアイテムに沿って流れます。
絶対位置
絶対位置に配置されたアイテムは、他のアイテムの通常のフローには含まれず、また他のアイテムの通常のフローにも影響を与えません。コンテナ内の指定された位置は、他のアイテムとは独立して保持されます。[ 22 ]

位置プロパティ

プロパティには5つの値がありますposition。アイテムが 以外の方法で配置されている場合static、オフセットと位置を指定するためにtop、bottom、left、などのrightプロパティが使用されます。位置が静的に設定されている要素は top、bottom、 、leftなどの rightプロパティの影響を受けません。

静的

デフォルト値は、アイテムを通常のフローに配置します。

相対的

アイテムは通常のフローに配置され、その後、その位置からシフトまたはオフセットされます。後続のフローアイテムは、アイテムが移動されていないかのようにレイアウトされます。

絶対

絶対位置を指定します。要素は、最も近い非静的な祖先要素を基準にして配置されます。

修理済み

文書の残りの部分がスクロールされても、項目は画面上の固定位置に絶対的に配置される[ 22 ]

浮かんでクリア

このfloatプロパティは3つの値のいずれかを持ちます。絶対位置または固定位置に配置されたアイテムはフロートできません。他の要素は通常、プロパティによってフロートが禁止されていない限り、フロートされたアイテムの周囲に配置されますclear。

左
アイテムは、本来表示されるはずの行の左側にフロートします。他のアイテムは、その右側を迂回して表示されます。
右
アイテムは、本来表示されるはずの行の右側にフロート表示され、他のアイテムは左側に回り込む場合があります。
クリア
要素を左（）、右（）、または両側（）のフロート要素の下（「クリア」）に表示するように強制します。[ 22 ] [ 23 ]clear:leftclear:rightclear:both

歴史

オペラソフトウェア社の最高技術責任者であり、CSSウェブ標準の共同作成者であるホーコン・ヴィウム・リー氏

CSSは1994年10月10日にHåkon Wium Lieによって初めて提案されました。[ 24 ]当時、LieはCERNでTim Berners-Leeと働いていました。[ 25 ]ウェブ用の他のスタイルシート言語も同時期にいくつか提案され、公開メーリングリストやワールドワイドウェブコンソーシアム内での議論の結果、1996年に最初のW3C CSS勧告（CSS1）[ 26 ]がリリースされました。特に、 Bert Bosの提案は影響力があり、彼はCSS1の共同著者となり、CSSの共同作成者と見なされています。[ 27 ]

スタイルシートは、1980年代の標準汎用マークアップ言語（ SGML ）の誕生以来、何らかの形で存在しており、CSSはウェブ用のスタイルシートを提供するために開発されました。 [ 28 ]ウェブスタイルシート言語の要件の一つは、ウェブ上の様々なソースからスタイルシートを取得できることでした。そのため、DSSSLやFOSIといった既存のスタイルシート言語は適していませんでした。一方、CSSは「カスケーディング」スタイルによって、文書のスタイルを複数のスタイルシートの影響を受けやすくしました。[ 28 ]

HTML が発展するにつれ、ウェブ開発者の要求を満たすため、より幅広いスタイルの機能が含まれるようになりました。この進化により、デザイナーはサイトの外観をより細かく制御できるようになりましたが、HTML はより複雑になりました。ViolaWWWやWorldWideWebなどのウェブブラウザの実装の多様性により、[ 29 ]サイトの外観の一貫性が難しくなり、ユーザーはウェブコンテンツの表示方法をあまり制御できませんでした。ティム・バーナーズ＝リーが開発したブラウザ/エディタには、プログラムにハードコードされたスタイルシートがありました。そのため、スタイルシートをウェブ上の文書にリンクすることはできませんでした。[ 25 ]同じく CERN のRobert Cailliauは、異なるスタイルシートで印刷、画面ベースのプレゼンテーション、エディタごとに異なるプレゼンテーションを記述できるように、構造とプレゼンテーションを分離したいと考えました。[ 29 ]

ウェブプレゼンテーション機能の向上は、ウェブコミュニティの多くの人々の関心事であり、www-style メーリングリストでは 9 つの異なるスタイルシート言語が提案されました。[ 28 ]これらの 9 つの提案のうち、2 つが CSS の基盤に特に影響を与えました。それは、カスケーディング HTML スタイルシート[ 24 ]とストリームベース スタイルシート提案 (SSP) です。[ 27 ] [ 30 ] 2 つのブラウザーが最初の提案のテストベッドとして機能しました。Lie はYves Lafonと協力して、 Dave RaggettのArenaブラウザーに CSS を実装しました。[ 31 ] [ 32 ] [ 33 ] Bert Bos は、独自の SSP 提案をArgoブラウザーに実装しました。[ 27 ]その後、Lie と Bos は協力して CSS 標準を開発しました (これらのスタイルシートは HTML 以外のマークアップ言語にも適用できるため、名前から 'H' が削除されました)。[ 25 ]

Lie の提案は、1994 年にイリノイ州シカゴで開催された「 Mosaic and the Web 」会議 (後に WWW2 と呼ばれる) で発表され、1995 年には Bert Bos と共に再び発表されました。 [ 25 ]この頃、W3C が既に設立され、CSS の開発に興味を示していました。W3C はその目的のために、Steven Pembertonを議長とするワークショップを開催しました。この結果、W3C は HTML 編集レビュー委員会 (ERB) の成果物に CSS に関する作業を追加しました。Lie と Bos は、このプロジェクトの主要な技術スタッフであり、 Microsoft のThomas Reardonなどの追加メンバーも参加しました。1996 年 8 月、Netscape Communication Corporation はJavaScript Style Sheets (JSSS)と呼ばれる代替スタイルシート言語を発表しました。[ 25 ]この仕様は完成することなく、非推奨となっています。[ 34 ] 1996 年末までに CSS は公式になる準備が整い、12 月に CSS レベル 1 勧告が発行されました。

HTML、CSS、DOMの開発はすべて、HTML Editorial Review Board (ERB) という一つのグループで行われていました。1997年初頭、ERBは3つのワーキンググループに分割されました。W3CのDan Connolly氏が議長を務めるHTMLワーキンググループ、 SoftQuadのLauren Wood氏が議長を務めるDOMワーキンググループ、そしてW3CのChris Lilley氏が議長を務めるCSSワーキンググループです。

CSS ワーキング グループは、CSS レベル 1 で対処されなかった問題に取り組み始め、その結果、1997 年 11 月 4 日に CSS レベル 2 が作成されました。これは、1998 年 5 月 12 日に W3C 勧告として公開されました。1998 年に開始された CSS レベル 3 は、2014 年現在も開発中です。

2005年、CSSワーキンググループは標準規格の要件をより厳格に適用することを決定しました。これにより、CSS 2.1、CSS 3セレクタ、CSS 3テキストといった既に公開されている標準規格は、勧告候補からワーキングドラフトレベルに引き下げられました。

養子縁組の難しさ

CSS 1 仕様は 1996 年に完成した。同年、 Microsoft のInternet Explorer 3 [ 25 ]がリリースされ、限定的に CSS をサポートした。IE 4とNetscape 4.x ではサポートが強化されたが、概して不完全で、多くのバグがあったため CSS が実用的に採用されることはなかった。ウェブブラウザがこの仕様をほぼ完全に実装するまでには 3 年以上かかった。2000年 3 月に出荷されたMacintosh版のInternet Explorer 5.0 は、CSS 1 を完全 (99 % 以上) にサポートした最初のブラウザとなり[ 35 ] 、15 か月前に CSS サポートを導入して以来トップに立っていたOperaを追い抜いた。その後すぐに他のブラウザも追随し、その多くが CSS 2 の一部も実装した。

しかし、その後の「バージョン5」ウェブブラウザがCSSのかなり完全な実装を提供するようになったにもかかわらず、依然として特定の領域では不正確でした。矛盾、バグ、その他の奇妙な動作が蔓延していました。Windows版のMicrosoft Internet Explorer 5.xは、全く異なるMacintosh版IEとは対照的に、 CSSボックスモデルの実装に欠陥があり、CSS標準とは対照的でした。このような矛盾や機能サポートのばらつきにより、デザイナーはCSSハックやフィルターと呼ばれる回避策を使わずに、ブラウザやプラットフォーム間で一貫した外観を実現することが困難でした。IEのWindows版ボックスモデルのバグは非常に深刻だったため、Internet Explorer 6のリリース時に、MicrosoftはCSS解釈の下位互換性モード（「Quirksモード」）と、修正された代替モード「標準モード」を導入しました。Microsoft以外のブラウザもモード切り替え機能を提供していました。そのため、HTMLファイルの作成者は、CSSが標準に準拠して正しく解釈されることを意図していることを示すために、特別な「標準準拠CSSを意図」マーカーをHTMLファイルに必ず含める必要がありました。これは、作成者がCSSが標準に準拠して正しく解釈されることを意図しており、今では時代遅れとなったIE5/Windowsブラウザ向けではないことを示すためです。このマーカーがないと、「Quirksモード」切り替え機能を持つウェブブラウザは、CSS標準に従うのではなく、Windows版IE5のようにウェブページ内のオブジェクトのサイズを調整してしまいます。

CSSの不完全な採用と元の仕様におけるエラッタの問題により、W3CはCSS 2標準をCSS 2.1へと改訂しました。これは、HTMLブラウザにおける現在のCSSサポートの作業スナップショットに近づきました。どのブラウザでも正常に実装されていないCSS 2プロパティの一部は削除され、いくつかのケースでは、定義された動作が変更され、標準が既存の主要な実装と一致するようにしました。CSS 2.1は2004年2月25日に勧告候補となりましたが、2005年6月13日にワーキングドラフトに引き戻され、[ 36 ]、2007年7月19日にようやく勧告候補に戻りました。[ 37 ]

これらの問題に加えて、この拡張子はPowerPointファイルをコンパクトスライドショーファイルに.css変換するソフトウェア製品で使用されていたため、 [ 38 ] 、一部のウェブサーバーでは、すべてを[ 39 ]ではなくMIMEタイプ[ 40 ]として提供していました。 .cssapplication/x-pointplustext/css

ベンダープレフィックス

個々のブラウザベンダーは、標準化や汎用化に先立ち、新しいパラメータを導入することがあります。将来の実装を妨げないよう、ベンダーはパラメータに固有の名前を付けることがあります。例えば、Mozilla Firefox-moz-の場合はApple Safariのブラウジングエンジンにちなんで名付けられ、Opera ブラウザの場合はMicrosoft Internet Explorerと EdgeHTML を使用する初期バージョンのMicrosoft Edgeの場合はそのように付けられます。 -webkit--o--ms-

-moz-radial-gradient場合によっては、やなどのベンダープレフィックス付きのパラメータは、-webkit-linear-gradientベンダープレフィックスなしのパラメータと比べて構文が若干異なる場合があります。[ 41 ]

プレフィックス付きプロパティは、標準化の時点では廃止されます。古いブラウザ向けにプレフィックスを自動的に追加したり、プレフィックス付きパラメータの標準化されたバージョンを提示したりするプログラムが利用可能です。プレフィックスは一部のブラウザに限定されているため、プレフィックスを削除することで他のブラウザでもその機能を使用できます。ただし、一部の廃止された-webkit-プレフィックス付きプロパティは例外です。これらのプロパティはウェブ上で非常に一般的で永続的であるため、他のブラウザファミリーは互換性のためにそれらをサポートすることを決定しています。[ 42 ]

CSSスナップショット2021

CSSには様々なレベルとプロファイルがあります。各レベルのCSSは前のレベルを基盤として構築されており、通常は新しい機能が追加され、CSS 1、CSS 2、CSS 3、CSS 4と表記されます。プロファイルは 通常、特定のデバイスまたはユーザーインターフェース向けに構築された1つ以上のレベルのCSSのサブセットです。現在、モバイルデバイス、プリンター、テレビ用のプロファイルがあります。プロファイルは、CSS 2で追加されたメディアタイプと混同しないでください。

CSS 1

CSS仕様書として初めてW3Cの公式勧告となったのは、1996年12月17日に公開されたCSSレベル1である。Håkon Wium LieとBert Bosが最初の開発者として認められている。[ 44 ] [ 45 ]その機能の中には、

  • 書体や強調などのフォントプロパティ
  • テキスト、背景、その他の要素の色
  • 単語、文字、行間の間隔などのテキスト属性
  • テキスト、画像、表、その他の要素の配置
  • ほとんどの要素の余白、境界線、パディング、配置
  • 属性グループの一意の識別と一般的な分類

W3CはもはやCSS 1勧告の保守を行っていない。[ 46 ]

CSS2

CSSレベル2仕様はW3Cによって開発され、1998年5月に勧告として公開されました。CSS1のスーパーセットであるCSS2には、要素の絶対位置、相対位置、固定位置、z-index、メディアタイプの概念、聴覚スタイルシート（後にCSS3音声モジュールに置き換えられました）[ 47 ]と双方向テキストのサポート、影などの新しいフォントプロパティなど、多くの新しい機能が含まれています。

W3CはもはやCSS 2勧告を維持していない。[ 48 ]

CSS 2.1

CSS レベル 2 リビジョン 1（CSS 2.1 とも呼ばれる）は、CSS 2 のエラーを修正し、サポートが不十分であったり相互運用性が不十分な機能を削除し、既に実装されているブラウザ拡張機能を仕様に追加しています。技術仕様の標準化における W3C プロセスに準拠するため、CSS 2.1 は長年にわたり、ワーキングドラフトの状態と勧告候補の状態の間を行き来していました。CSS 2.1 は2004年2月25日に初めて勧告候補となりましたが、2005年6月13日にさらなる検討のためにワーキングドラフトに戻されました。2007年7月19日に再び勧告候補となり、その後2009年には2回の改訂が行われました。しかし、変更と明確化が行われたため、2010年12月7日に再び最終ワーキングドラフトの状態に戻りました。

CSS 2.1は2011年4月12日に勧告案となった。[ 49 ] W3C諮問委員会によるレビューを経て、最終的に2011年6月7日にW3C勧告として公開された。[ 50 ]

CSS 2.1 はレベル 2 の最初のかつ最後の改訂版として計画されていましたが、CSS 2.2 の低優先度作業は 2015 年に開始されました。

CSS3

様々な機能を定義する単一の大きな仕様であるCSS 2とは異なり、CSS 3は「モジュール」と呼ばれる複数の個別のドキュメントに分割されています。各モジュールは、CSS 2で定義された新機能を追加したり、機能を拡張したりすることで、後方互換性を維持しています。CSSレベル3の作業は、最初のCSS 2勧告の公開とほぼ同時期に開始されました。最初のCSS 3ドラフトは1999年6月に公開されました。[ 51 ]

モジュール化により、モジュールごとに安定性やステータスが異なります。[ 52 ]

一部のモジュールは勧告候補（CR）ステータスにあり、中程度の安定性があると考えられています。CR段階では、実装においてベンダープレフィックスを削除することが推奨されます。[ 53 ]

主要モジュール仕様の概要[ 54 ]
モジュール 仕様タイトル 状態 日付
CSS3 背景CSS 背景と境界線モジュール レベル 3  候補者推薦2023年2月
CSSボックス3CSS ボックスモデルモジュール レベル 3おすすめ2023年4月
CSSカスケード3CSS カスケードと継承レベル 3  おすすめ2021年2月
css-カラー-3CSS カラーモジュール レベル 3おすすめ2022年1月
CSS3コンテンツCSS 生成コンテンツ モジュール レベル 3  ワーキングドラフト2019年8月
css-フォント-3CSS フォントモジュール レベル 3おすすめ2018年9月
CSS3-GCPMページメディアモジュールのCSS生成コンテンツワーキングドラフト2014年5月
CSS3レイアウトCSS テンプレートレイアウトモジュール注記2015年3月
CSS3メディアクエリ  メディアクエリおすすめ2012年6月
メディアクエリ-4  メディアクエリ レベル4候補者推薦2021年12月
CSS3-マルチコル  マルチカラムレイアウトモジュールレベル1候補者推薦2021年10月
CSS3ページCSS ページメディアモジュール レベル 3ワーキングドラフト、一部はcss3-breakに移行2018年10月
CSS3ブレークCSS フラグメンテーション モジュール レベル 3候補者推薦2018年12月
セレクター3セレクター レベル 3おすすめ2018年11月
セレクター-4セレクター レベル 4ワーキングドラフト2022年11月
CSS3 UICSS 基本ユーザーインターフェースモジュールレベル 3 (CSS3 UI)おすすめ2018年6月

CSS4

ジェン・シモンズが2019年のCSSの状況について議論している。いくつかのCSS  4モジュールが開発中だった。

CSS4仕様は存在しない。[ 55 ] [ 56 ] CSSは独立したレベルの多くの個別のモジュールに分割されているためである。

CSSレベル2を基に構築されたモジュールはレベル3から始まりました。そのうちのいくつかはすでにレベル4に到達しているか、すでにレベル5に近づいています。Flexbox [ 57 ]などの完全に新しい機能を定義する他のモジュールはレベル1に指定されており、そのいくつかはレベル2に近づいています。

CSSワーキンググループは、ブラウザ開発者が実装できるほど安定していると考えられるモジュール全体や他のドラフトの一部をまとめた「スナップショット」を時折公開しています。これまでに、2007年、[ 58 ] 2010年、[ 59 ] 2015年、 [ 60 ] 2017年、[ 61 ] 2018年の5つの「最新ベストプラクティス」文書がNotesとして公開されています。[ 62 ]

これらの仕様スナップショットは主に開発者向けであるため、Can I Use... [ 63 ]やMDN Web Docs [ 64 ] などのサイトで文書化されている相互運用可能な実装の状態を示す、作成者を対象とした同様のバージョン管理されたリファレンスドキュメントの需要が高まっています。W3Cコミュニティグループは、そのようなリソースを議論および定義するために2020年初頭に設立されました。[ 65 ]実際のバージョン管理の種類も議論の余地があり、作成されたドキュメントは「CSS4」と呼ばれない可能性があります。

ブラウザのサポート

各WebブラウザはWebページをレンダリングするためにレイアウトエンジンを使用していますが、CSS機能のサポートはブラウザ間で一貫していません。ブラウザはCSSを完全には解析しないため、特定のブラウザを対象とした複数のコーディング手法が開発され、回避策が提供されています（一般にCSSハックまたはCSSフィルターと呼ばれています）。CSSの新機能の採用は、主要ブラウザでのサポート不足によって妨げられる可能性があります。たとえば、Internet Explorerは多くのCSS 3機能のサポート追加に時間がかかり、そのためそれらの機能の採用が遅れ、開発者の間でのブラウザの評判が悪くなりました。さらに、filter一部のバージョンでは、ベンダープレフィックスのないプロパティに独自の構文が使用されていました。[ 66 ]ユーザーに一貫したエクスペリエンスを提供するために、Web開発者は複数のオペレーティングシステム、ブラウザ、ブラウザバージョンでサイトをテストすることが多く、開発時間と複雑さが増大しています。BrowserStackなどのツールは、これらの環境を維持する複雑さを軽減するために構築されています。

これらのテストツールに加えて、CanIUseやMDN Web Docsなど、多くのサイトで特定のCSSプロパティのブラウザーサポートのリストが管理されています。さらに、CSS 3では機能クエリが定義されています。これは、@supports開発者がCSS内で直接特定の機能をサポートするブラウザーをターゲットにできるようにするディレクティブを提供します。[ 67 ]古いブラウザーでサポートされていないCSSは、ブラウザーの動作を一貫して行うように設計されたJavaScriptコードであるJavaScriptポリフィルを使用してパッチを当てることもできます。これらの回避策とフォールバック機能をサポートする必要性は、開発プロジェクトを複雑にする可能性があるため、企業はサポートするブラウザーバージョンとサポートしないブラウザーバージョンのリストを定義することがよくあります。

ウェブサイトが古いブラウザと互換性のない新しいコード標準を採用すると、これらのブラウザはウェブ上の多くのリソースにアクセスできなくなる可能性があります（時には意図的に）。[ 68 ]しかし、インターネット上で最も人気のあるサイトの多くは、CSSのサポートが不十分なために古いブラウザでは視覚的に劣化するだけでなく、主にJavaScriptやその他のウェブ技術の進化により、まったく機能しません。

制限事項

CSS の現在の機能に関する注目すべき制限には次のようなものがあります。

位置に関係なく新しいスコープを明示的に宣言することはできません

z-index などのプロパティのスコープ指定ルールは、position: absolute 属性または position: relative 属性を持つ最も近い親要素を参照します。この奇妙な組み合わせは望ましくない影響を及ぼします。例えば、要素の位置を調整する必要がある場合、新しいスコープの宣言を避けられず、親要素の目的のスコープを使用できなくなります。

擬似クラスの動的動作は制御できません

CSSは、条件に応じて代替スタイルを適用することで、ある程度のユーザーフィードバックを可能にする擬似クラスを実装しています。CSS擬似クラスの一つである「」は動的（JavaScriptの「onmouseover」に相当）であり、誤用される可能性があります（例：カーソル近接ポップアップの実装）[ 69 ]。しかし、CSSにはクライアントがこれを無効化する機能（「disable」のようなプロパティがない）や、その効果を制限する機能（各プロパティに「nochange」のような値がない）はありません。 :hover

ルールに名前を付けることはできません

CSS ルールに名前を付ける方法はありません。名前を付けると、セレクタが変更されても (たとえば) クライアント側スクリプトがルールを参照できるようになります。

ルールのスタイルを別のルールに含めることはできません

CSSスタイルは、望ましい効果を得るために複数のルールで複製しなければならないことが多く、追加のメンテナンスとより徹底したテストが必要になります。この問題を解決するためにいくつかの新しいCSS機能が提案されましたが、後に放棄されました。[ 70 ] [ 71 ]代わりに、 Sass、Less、Stylusなど、CSSにコンパイルされるより洗練されたスタイルシート言語を使用することで、この能力を得ることができます。

マークアップを変更せずに特定のテキストをターゲットにすることはできません

疑似要素のほかに、プレースホルダー要素を使用せずに特定の範囲のテキストをターゲットにすることはできません。 ::first-letter

利点

コンテンツとプレゼンテーションの分離

CSSは、様々なパラメータに基づいてスタイルを調整することで、コンテンツを複数のプレゼンテーション形式で公開することを容易にします。これらのパラメータには、明示的なユーザー設定（テーマやフォントサイズなど）、様々なWebブラウザとの互換性、コンテンツの表示に使用するデバイスの種類（デスクトップ、タブレット、モバイルデバイスなど）、画面解像度、ユーザーの所在地など、様々な変数が含まれます。また、CSSはレスポンシブデザインも可能にし、コンテンツがさまざまな画面サイズや画面の向きに動的に適応することで、幅広い環境におけるアクセシビリティとユーザーエクスペリエンスを向上させます。

サイト全体の一貫性

CSSを継承と「カスケーディング」の観点から効果的に使用すると、グローバルスタイルシートを使用してサイト全体の要素に適用し、スタイルを設定できます。要素のスタイルを変更または調整する必要がある場合は、グローバルスタイルシートのルールを編集することで変更できます。CSSが導入される前は、このようなメンテナンスはより困難で、コストと時間がかかりました。

帯域幅

内部スタイルシートまたは外部スタイルシートは、要素、タイプ、または他の要素との関係によって選択された一連のHTML要素に対して、一度だけスタイルを指定しますclass。これは、要素が出現するたびにスタイル情報をインラインで繰り返すよりもはるかに効率的です。外部スタイルシートは通常、ブラウザのキャッシュに保存されるため、複数のページで再読み込みすることなく使用できるため、ネットワーク経由のデータ転送量をさらに削減できます。

ページの再フォーマット

たった1行の変更で、同じページに異なるスタイルシートを適用できます。これにより、アクセシビリティが向上するだけでなく、ページやサイトを様々なターゲットデバイスに合わせてカスタマイズできるようになります。さらに、スタイルを理解できないデバイス（古いブラウザなど）でもコンテンツを表示できます。

アクセシビリティ

CSS がない場合、Web デザイナーは通常、視覚障害のあるユーザーのアクセシビリティを妨げる HTML テーブルなどの手法を使用してページをレイアウトする必要があります ( 「テーブルレス Web デザイン § アクセシビリティ」を参照)。

標準化

フレームワーク

CSSフレームワークは、カスケーディングスタイルシート言語を使用して、ウェブページのスタイル設定をより簡単に、より標準に準拠したものにするために用意されたライブラリです。CSSフレームワークには、 Blueprint、Bootstrap、Foundation、Materializeなどがあります。プログラミング言語やスクリプト言語のライブラリと同様に、CSSフレームワークは通常、HTMLで参照される外部.cssシートとして組み込まれます。これらは、ウェブページのデザインとレイアウトのための数多くの既成のオプションを提供します。これらのフレームワークの多くは公開されていますが、一部の作成者は、主にラピッドプロトタイピングや学習のために使用し、サイトのスタイル設定で多くの未使用の機能を持つことによる設計、保守、ダウンロードのオーバーヘッドなしに、公開された各サイトに適したCSSを「手作り」することを好みます。[ 72 ]<head>

設計方法論

プロジェクトで使用されるCSSリソースの規模が大きくなるにつれて、開発チームはそれらを整理するために共通の設計手法を決定する必要が生じることがよくあります。その目標は、開発の容易さ、開発中の共同作業の容易さ、そしてブラウザに展開されたスタイルシートのパフォーマンスです。一般的な手法としては、OOCSS（オブジェクト指向CSS）、ACSS（アトミックCSS）、CSS（オーガニックカスケードスタイルシート）、SMACSS（スケーラブルでモジュール化されたCSSアーキテクチャ）、BEM（ブロック、要素、修飾子）などがあります。[ 73 ]

参照

参考文献

  1. ^ 「Minutes Telecon 2024-12-11」 . CSS WG Blog . W3C. 2024年12月12日. 2025年1月16日時点のオリジナルよりアーカイブ。 2025年1月16日閲覧。
  2. ^ 「CSS開発者ガイド」 MDN Web Docs . 2015年9月25日時点のオリジナルよりアーカイブ。 2015年9月24日閲覧。
  3. ^ Flanagan, David (2011年4月18日). JavaScript: the definitive guide . 北京; Farnham: O'Reilly. p. 1. ISBN 978-1-4493-9385-4. OCLC  686709345 . JavaScript は、すべての Web 開発者が習得しなければならない 3 つの技術のうちの 1 つです。3 つの技術とは、Web ページのコンテンツを指定するための HTML、Web ページの表示方法を指定するための CSS、および Web ページの動作を指定するための JavaScript です。
  4. ^ 「CSSとは何か？」 World Wide Web Consortium。2010年11月29日時点のオリジナルよりアーカイブ。2010年12月1日閲覧。
  5. ^ Clark, Scott (2010年7月23日). 「HTML 5、CSS、JavaScript を使った未来のウェブベースモバイルアプリ」 . HTML Goodies . HTMLGoodies. 2014年10月20日時点のオリジナルよりアーカイブ。 2014年10月16日閲覧。
  6. ^ 「W3C CSS検証サービス」。2011年2月14日時点のオリジナルよりアーカイブ。2012年6月30日閲覧。
  7. ^ 「W3C CSS2.1 擬似要素および擬似クラス仕様」。ワールド・ワイド・ウェブ・コンソーシアム。2011年6月7日。2012年4月30日時点のオリジナルよりアーカイブ。 2012年4月30日閲覧。
  8. ^ 「セレクタ」 .カスケーディングスタイルシートレベル2リビジョン1（CSS 2.1）仕様. W3C. 2006年4月23日時点のオリジナルよりアーカイブ。
  9. ^ 「Selectors Level 3」 . W3C. 2014年6月3日時点のオリジナルよりアーカイブ。2014年5月30日閲覧。
  10. ^ “CSS Syntax Module Level 3” . W3C . 2023年10月1日時点のオリジナルよりアーカイブ。 2023年10月1日閲覧。
  11. ^ 「W3C CSS2.1 ルールセット、宣言ブロック、セレクタ仕様」。ワールド・ワイド・ウェブ・コンソーシアム。2011年6月7日。2008年3月28日時点のオリジナルよりアーカイブ。 2009年6月20日閲覧。
  12. ^ 「Full property table」 . W3C. 2014年5月30日時点のオリジナルよりアーカイブ。2014年5月30日閲覧。
  13. ^ 「CSSプロパティのインデックス」 . W3C . 2020年8月9日閲覧。
  14. ^ 「CSS カラー」 MDN Web Docs. 2024年4月5日. 2024年3月27日時点のオリジナルよりアーカイブ。 2024年4月5日閲覧。
  15. ^ 「6.1 長さの単位」 . Cascading Style Sheets, level 1. 1996年12月17日. 2019年6月14日時点のオリジナルよりアーカイブ。 2019年6月20日閲覧。
  16. ^ 「5. 距離の単位：<length>型」。CSS Values and Units Module Level 3。 2019年6月6日。 2019年6月7日時点のオリジナルよりアーカイブ。 2019年6月20日閲覧。
  17. ^ W3C HTMLワーキンググループ. 「HTML 5. HTMLおよびXHTMLの語彙と関連API」 .ワールド・ワイド・ウェブ・コンソーシアム. 2014年7月15日時点のオリジナルよりアーカイブ。 2014年6月28日閲覧。
  18. ^ a bマイヤー、エリック・A. (2006).カスケードスタイルシート：決定版ガイド（第3版）. O'Reilly Media, Inc. ISBN 0-596-52733-0. 2014年2月15日時点のオリジナルよりアーカイブ。2014年2月16日閲覧。
  19. ^ 「プロパティ値の割り当て、カスケーディング、継承」。2014年6月11日時点のオリジナルよりアーカイブ。2014年6月10日閲覧。
  20. ^ 「CSSクラスは1つ以上の他のクラスを継承できますか？」 StackOverflow . 2017年10月14日時点のオリジナルよりアーカイブ。 2017年9月10日閲覧。
  21. ^ 「ショートハンドプロパティ」 .チュートリアル. Mozilla Developers. 2017年12月7日. 2018年1月30日時点のオリジナルよりアーカイブ。2018年1月30日閲覧。
  22. ^ a b c Bos, Bert; et al. (2010年12月7日). 「9.3 ポジショニングスキーム」 .カスケーディングスタイルシート レベル2 リビジョン1 (CSS 2.1) 仕様. W3C. 2011年2月18日時点のオリジナルよりアーカイブ。 2011年2月16日閲覧。
  23. ^ Holzschlag, Molly E (2005). Spring into HTML and CSS . Pearson Education, Inc. ISBN 0-13-185586-7。
  24. ^ a b Lie, Hakon W (1994年10月10日). 「Cascading HTML style sheets – a proposal」（提案） . CERN. 2014年6月4日時点のオリジナルよりアーカイブ。 2014年5月25日閲覧。
  25. ^ a b c d e f Lie, Håkon Wium ; Bos, Bert (1999). Cascading Style Sheets, designing for the Web . Addison Wesley. ISBN 0-201-59625-3. 2010年6月23日閲覧。
  26. ^ 「Cascading Style Sheets, level 1」。World Wide Web Consortium。2014年4月9日時点のオリジナルよりアーカイブ。2014年3月7日閲覧。
  27. ^ a b c Bos, Bert (1995年4月14日). 「Web上のSGMLとHTMLのためのシンプルなスタイルシート」 . World Wide Web Consortium. 2009年9月23日時点のオリジナルよりアーカイブ。 2010年6月20日閲覧。
  28. ^ a b c「Cascading Style Sheets」オスロ大学. 2006年9月6日時点のオリジナルよりアーカイブ。2014年9月3日閲覧。
  29. ^ a bペトリー、チャールズ、カイユ、ロバート（1997年11月）。「WWW提案に関するロバート・カイユへのインタビュー：「実際のところ、どうなったのか？」" .電気電子技術者協会. 2011年1月6日時点のオリジナルよりアーカイブ。2010年8月18日閲覧。
  30. ^ Bos, Bert (1995年3月31日). 「ストリームベースのスタイルシート提案」 . 2014年10月12日時点のオリジナルよりアーカイブ。2014年9月3日閲覧。
  31. ^ Nielsen, Henrik Frystyk (2002年6月7日). 「Libwww Hackers」 . World Wide Web Consortium. 2009年12月2日時点のオリジナルよりアーカイブ。2010年6月6日閲覧。
  32. ^ 「Yves Lafon」 . World Wide Web Consortium. 2010年6月24日時点のオリジナルよりアーカイブ。2010年6月17日閲覧。
  33. ^ 「W3Cチーム：テクノロジーと社会」。ワールド・ワイド・ウェブ・コンソーシアム。2008年7月18日。2010年5月28日時点のオリジナルよりアーカイブ。2011年1月22日閲覧。
  34. ^ Lou Montulli ; Brendan Eich ; Scott Furman ; Donna Converse ; Troy Chevalier (1996年8月22日). 「JavaScriptベースのスタイルシート」 . W3C. 2010年5月27日時点のオリジナルよりアーカイブ。 2010年6月23日閲覧。
  35. ^ 「CSSソフトウェア」 . W3C. 2010年11月25日時点のオリジナルよりアーカイブ。2011年1月15日閲覧。
  36. ^アン・ヴァン・ケステレン。「CSS 2.1 – アンのウェブログ」。2005 年 12 月 10 日にオリジナルからアーカイブされました。2011 年 2 月 16 日に取得。
  37. ^ 「2007年のW3Cニュースアーカイブ」。ワールド・ワイド・ウェブ・コンソーシアム。2007年12月21日。2011年6月28日時点のオリジナルよりアーカイブ。2011年2月16日閲覧。
  38. ^ Nitot, Tristan (2002年3月18日). 「CSSファイルのMIMEタイプが間違っている」 . Mozilla Developer Center . Mozilla . 2011年5月20日時点のオリジナルよりアーカイブ。 2010年6月20日閲覧。
  39. ^ McBride, Don (2009年11月27日). 「File Types」 . 2010年10月29日時点のオリジナルよりアーカイブ。2010年6月20日閲覧。
  40. ^ 「cssファイル拡張子の詳細」 . ファイル拡張子データベース. 2010年3月12日. 2011年7月18日時点のオリジナルよりアーカイブ。 2010年6月20日閲覧。
  41. ^ Kyrnin, Jennifer (2019年11月12日). 「CSSベンダーまたはブラウザのプレフィックスとは？」 Lifewire . 2020年11月30日時点のオリジナルよりアーカイブ。
  42. ^ “Compatibility Standard” . WHATWG . 2024年1月24日. 2024年2月4日時点のオリジナルよりアーカイブ。
  43. ^ “CSS Snapshot 2023 – 2.4. CSS Levels” . W3C . 2023年12月7日. 2024年2月8日時点のオリジナルよりアーカイブ。
  44. ^ Bos, Bert; Wium Lie, Håkon (1997). Cascading Style Sheets: designing for the Web (第1刷). Harlow, England; Reading, MA.: Addison Wesley Longman. ISBN 0-201-41998-X。
  45. ^ W3C : Cascading Style Sheets, level 1 Archived 2011-02-09 at the Wayback Machine CSS 1 specification
  46. ^ W3C : Cascading Style Sheets レベル 1 仕様Archived 2011-02-11 at the Wayback Machine CSS レベル 1 仕様
  47. ^ 「聴覚スタイルシート」 W3C。2014年10月26日時点のオリジナルよりアーカイブ。2014年10月26日閲覧。
  48. ^ W3C : Cascading Style Sheets, level 2 Archived 2011-01-16 at the Wayback Machine CSS 2 仕様 (1998 勧告)
  49. ^ W3C : Cascading Style Sheets, level 2 revision 1 Archived 2011-11-09 at the Wayback Machine CSS 2.1 specification (W3C Proposed Recommendation)
  50. ^ W3C:カスケーディングスタイルシート標準は前例のない相互運用性を誇る2011年6月10日アーカイブ - Wayback Machine
  51. ^ Bos, Bert (2011年2月18日). 「すべてのCSS仕様の説明」 . World Wide Web Consortium . 2011年3月31日時点のオリジナルよりアーカイブ。2011年3月3日閲覧。
  52. ^ Bos, Bert (2011年2月26日). 「CSS current work」 . World Wide Web Consortium . 2011年3月3日時点のオリジナルよりアーカイブ。 2011年3月3日閲覧。
  53. ^ Etemad, Elika J. (2010年12月12日). 「Cascading Style Sheets (CSS) Snapshot 2010」 . World Wide Web Consortium . 2011年3月16日時点のオリジナルよりアーカイブ。2011年3月3日閲覧。
  54. ^ 「すべてのCSS仕様」 . W3C. 2014年5月22日. 2014年5月30日時点のオリジナルよりアーカイブ。2014年5月30日閲覧。
  55. ^ Atkins, Tab Jr. 「CSS4について一言」 . 2012年10月31日時点のオリジナルよりアーカイブ。 2012年10月18日閲覧。
  56. ^ Andrew, Rachel. 「なぜCSS4がないのか - CSSレベルの説明」 . 2025年7月8日時点のオリジナルよりアーカイブ。 2025年9月28日閲覧。
  57. ^ 「CSS Flexible Box Layout Module Level 1」 . W3C. 2018年11月19日. 2012年10月19日時点のオリジナルよりアーカイブ。 2012年10月18日閲覧。
  58. ^ 「Cascading Style Sheets (CSS) Snapshot 2007」。2011年5月12日。2016年8月8日時点のオリジナルよりアーカイブ。2016年7月18日閲覧。
  59. ^ 「Cascading Style Sheets (CSS) Snapshot 2010」。2011年5月12日。2011年3月16日時点のオリジナルよりアーカイブ。 2011年3月3日閲覧。
  60. ^ “CSS Snapshot 2015” . W3C . 2015年10月13日. 2017年1月27日時点のオリジナルよりアーカイブ。 2017年2月13日閲覧。
  61. ^ “CSS Snapshot 2017” . W3C . 2017年1月31日. 2017年2月13日時点のオリジナルよりアーカイブ。 2017年2月13日閲覧。
  62. ^ “CSS Snapshot 2018” . W3C . 2019年1月22日. 2019年2月1日時点のオリジナルよりアーカイブ。 2019年1月2日閲覧。
  63. ^ 「CSS」。HTML5 、CSS3などでサポートされるテーブルは使用できますか？ 2018年2月19日時点のオリジナルよりアーカイブ。 2019年1月26日閲覧。
  64. ^ “CSS” . MDN Web Docs . 2023年7月21日. 2023年11月26日時点のオリジナルよりアーカイブ。
  65. ^ 「CSS4コミュニティグループへの参加募集」W3C、2020年2月24日。2023年2月10日時点のオリジナルよりアーカイブ。 2020年2月27日閲覧。
  66. ^ Lazaris, Louis (2010-04-28). 「Internet Explorer向けCSS3ソリューション」 . Smashing Magazine . 2016年10月12日時点のオリジナルよりアーカイブ。 2016年10月12日閲覧。
  67. ^ Simmons, Jen (2016年8月17日). 「CSSでの機能クエリの使用」 . Mozilla Hacks . 2016年10月11日時点のオリジナルよりアーカイブ。2016年10月12日閲覧。
  68. ^ Hutchinson, Lee (2019). 「Internet Explorer 6でWebを見る、最後にもう一度」 Ars Technica . 2016年10月12日時点のオリジナルよりアーカイブ。 2016年10月12日閲覧。
  69. ^ 「Pure CSS Popups」 . meyerweb.com. 2009年12月9日時点のオリジナルよりアーカイブ。2009年11月19日閲覧。
  70. ^ Tab Atkins Jr. 「CSS適用ルール」 GitHub. 2016年2月22日時点のオリジナルよりアーカイブ。 2016年2月27日閲覧。
  71. ^ 「@apply を放棄した理由 - タブ補完」。
  72. ^セダーホルム、ダン、イーサン・マルコット (2009). 『Handcrafted CSS: More Bulletproof Web Design』. New Riders. p. 114. ISBN 978-0-321-64338-4. 2012年12月20日時点のオリジナルよりアーカイブ。2010年6月19日閲覧。
  73. ^ Antti, Hiljá. 「OOCSS、ACSS、BEM、SMACSS：これらとは何か？何を使うべきか？」 clubmate.fi . Hiljá. 2015年6月2日時点のオリジナルよりアーカイブ。 2015年6月2日閲覧。

さらに読む

「 https://en.wikipedia.org/w/index.php?title=CSS&oldid=1334139160」から取得