CSS

ウィキペディアから、無料の百科事典
ナビゲーションにジャンプ 検索にジャンプ
カスケードスタイルシート(CSS)
CSS3ロゴとwordmark.svg
ファイル名拡張子
.css
インターネットメディアタイプ
text / css
ユニフォームタイプ識別子(UTI)public.css
によって開発されましたWorld Wide Web Consortium(W3C)
初回リリース1996年12月17日; 24年前 (1996-12-17
最新のリリース
CSS 2.1:レベル2リビジョン1
(2016年4月12日; 5年前 (2016-04-12
フォーマットの種類スタイルシート言語
のための容器HTML要素(タグ)のスタイルルール
によって含まれていますHTMLドキュメント
オープンフォーマットはい
Webサイトwww .w3 .org / TR / CSS / #css

カスケードスタイルシートCSS)は、HTMLなどのマークアップ言語で記述されたドキュメントプレゼンテーションを記述するために使用されるスタイルシート言語です。[1] CSSは、HTMLやJavaScriptと並んで、ワールドワイドウェブの基盤となるテクノロジーです[2]

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

フォーマットとコンテンツを分離することで、同じマークアップページを、画面上、印刷物、音声(音声ベースのブラウザまたはスクリーンリーダー経由)、点字ベースなど、さまざまなレンダリング方法でさまざまなスタイルで表示することもできます。触覚デバイス。CSSには、コンテンツがモバイルデバイスでアクセスされる場合の代替フォーマットのルールもあります[4]

名前のカスケードは、指定された優先順位スキームに由来し、複数のルールが特定の要素に一致する場合に適用されるスタイルルールを決定します。このカスケード優先スキームは予測可能です。

CSS仕様は、World Wide Web Consortium(W3C)によって維持されています。インターネットメディアタイプ(MIMEタイプtext/cssは、RFC 2318(1998年3月)によってCSSで使用するために登録されています。W3Cは、CSSドキュメント用の無料のCSS検証サービス運営しています。[5]

HTMLに加えて、XHTMLプレーンXMLSVGXULなどの他のマークアップ言語がCSSの使用をサポートしています

構文

CSSの構文は単純で、英語のキーワードをいくつか使用して、さまざまなスタイルプロパティの名前を指定します。

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

セレクター

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

セレクターは以下に適用される場合があります。

  • 特定のタイプのすべての要素、たとえば第2レベルのヘッダーh2
  • 属性指定された要素、特に:
    • id:ドキュメント内で一意の識別子。ハッシュプレフィックスで識別されます。例:#id
    • クラス:ドキュメント内の複数の要素に注釈を付けることができる識別子で、ピリオドプレフィックスで識別されます。.classname
  • ドキュメントツリー内の他の要素との相対的な配置に応じた要素

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

疑似クラスはCSSセレクターで使用され、ドキュメントツリーに含まれていない情報に基づいてフォーマットできるようにします。広く使用されている疑似クラスの1つの例は、です。これ、ユーザーが表示されている要素を「ポイント」した場合にのみ、通常はマウスカーソルをその上に置いてコンテンツを識別します。またはのようにセレクターに追加されます。疑似クラスは、またはなどのドキュメント要素を分類しますが、疑似要素は、またはなどの部分的な要素で構成される可能性のある選択を行います。[6]:hovera:hover#elementid:hover:link:visited::first-line::first-letter

セレクターは、さまざまな方法で組み合わせて、優れた特異性と柔軟性を実現できます。[7]複数のセレクターを間隔を空けたリストに結合して、場所、要素タイプ、ID、クラス、またはそれらの任意の組み合わせで要素を指定できます。セレクターの順序は重要です。たとえば、div要素内にあるmyClassクラスのすべての要素に適用されますが、myClassクラスの要素内にあるすべてのdiv要素に適用されます。これは、クラスmyClassのdiv要素に適用されるような連結された識別子と混同しないでくださいdiv .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

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

パターン 一致する
CSSレベルで最初に定義された
E タイプEの要素 1
E:link E要素は、ターゲットがまだアクセスされていない(:link)またはすでにアクセスされている(:visited)ハイパーリンクのソースアンカーです。 1
E:active 特定のユーザーアクション中のE要素 1
E::first-line E要素の最初のフォーマットされた行 1
E::first-letter E要素の最初のフォーマットされた文字 1
.c class = "c"のすべての要素 1
#myid id = "myid"の要素 1
E.warning クラスが「警告」であるE要素(ドキュメント言語はクラスの決定方法を指定します) 1
E#myid IDが「myid」に等しいE要素 1
.c#myid class = "c"およびIDが "myid"に等しい要素 1
E F E要素の子孫であるF要素 1
* 任意の要素 2
E[foo] 「foo」属性を持つE要素 2
E[foo="bar"] 「foo」属性値が「bar」と正確に等しいE要素 2
E[foo~="bar"] 「foo」属性値が空白で区切られた値のリストであり、そのうちの1つが「bar」と完全に等しいE要素 2
E[foo|="en"] 「foo」属性に「en」で始まる(左から)ハイフンで区切られた値のリストがあるE要素 2
E:first-child E要素、その親の最初の子 2
E:lang(fr) 言語「fr」のタイプEの要素(文書言語は言語の決定方法を指定します) 2
E::before E要素のコンテンツの前に生成されたコンテンツ 2
E::after E要素のコンテンツの後に生成されたコンテンツ 2
E > F E要素の子であるF要素 2
E + F E要素の直前のF要素 2
E[foo^="bar"] 「foo」属性値が文字列「bar」で正確に始まるE要素 3
E[foo$="bar"] 「foo」属性値が文字列「bar」で正確に終わるE要素 3
E[foo*="bar"] 「foo」属性値にサブストリング「bar」が含まれるE要素 3
E:root E要素、ドキュメントのルート 3
E:nth-child(n) E要素、その親のn番目の子 3
E:nth-last-child(n) 最後の要素から数えて、親のn番目の子であるE要素 3
E:nth-of-type(n) E要素、そのタイプのn番目の兄弟 3
E:nth-last-of-type(n) E要素、そのタイプのn番目の兄弟、最後の要素から数えて 3
E:last-child E要素、その親の最後の子 3
E:first-of-type E要素、そのタイプの最初の兄弟 3
E:last-of-type E要素、そのタイプの最後の兄弟 3
E:only-child E要素、その親の一人っ子 3
E:only-of-type E要素、そのタイプの兄弟のみ 3
E:empty 子を持たないE要素(テキストノードを含む) 3
E:target 参照元URIのターゲットであるE要素 3
E:enabled 有効になっているユーザーインターフェイス要素E 3
E:disabled 無効になっているユーザーインターフェイス要素E 3
E:checked チェックされているユーザーインターフェイス要素E(たとえば、ラジオボタンまたはチェックボックス) 3
E:not(s) 単純なセレクターと一致しないE要素 3
E ~ F E要素が前にあるF要素 3

宣言ブロック

宣言ブロックは、中括弧で囲まれた宣言のリストで構成されます。各宣言自体は、プロパティ、コロン(:)、および値で構成されますブロック内に複数の宣言がある場合は、;各宣言を区切るためにセミコロン()を挿入する必要があります。最後の(または単一の)宣言の後オプションのセミコロンを使用できます。[9]

プロパティはCSS標準で指定されています。各プロパティには、可能な値のセットがあります。一部のプロパティは任意のタイプの要素に影響を与える可能性があり、その他のプロパティは特定の要素グループにのみ適用されます。[10] [11]

値は、「center」や「inherit」などのキーワード、または200px(200ピクセル)、50vw(ビューポート幅の50%)、80%(親要素の幅の80%などの数値です色の値は、キーワード(例: " ")、16進値(例、略して)、0〜255スケールのRGB値(例)、色とアルファ透明度の両方を指定するRGBA値(例)、またはHSLで指定できます。またはHSLA値(例)。[12]red#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

長さの単位

線形メジャーを表すゼロ以外の数値には、長さの単位を含める必要があります。長さの単位は、200pxまたは50vw;のように、アルファベットコードまたは省略形のいずれです。またはのようにパーセント記号80%。一部の単位– cmセンチメートル); inインチ); mmミリメートル); pc異食症);およびptポイント)–絶対値です。これは、レンダリングされた寸法がページの構造に依存しないことを意味します。その他– emem); exex)とpxpixel)–相対的、これは、親要素のフォントサイズなどの要因が、レンダリングされる測定に影響を与える可能性があることを意味します。これらの8つのユニットはCSS1 [13]の機能であり、その後のすべてのリビジョンで保持されました。提案されたCSS値と単位モジュールレベル3は、W3C勧告として採用された場合、さらに7つの長さの単位を提供しchます。Q; rem; vh; vmax; vmin; およびvw[14]

使用

CSS以前は、HTMLドキュメントのほぼすべての表示属性がHTMLマークアップに含まれていました。すべてのフォントの色、背景スタイル、要素の配置、境界線、およびサイズは、HTML内で、多くの場合繰り返し、明示的に記述する必要がありました。CSSを使用すると、作成者はその情報の多くを別のファイルであるスタイルシートに移動できるため、HTMLが大幅に簡素化されます。

たとえば、見出し(h1要素)、小見出し(h2)、小小見出し(h3)などは、HTMLを使用して構造的に定義されます。印刷および画面上では、これらの要素フォントサイズ、および強調の選択見栄えがします。

CSSの前は、そのような活版印刷の特性を、たとえばすべてのh2見出しに割り当てたいドキュメント作成者は、その見出しタイプが出現するたびにHTML表示マークアップを繰り返す必要がありました。これにより、ドキュメントはより複雑になり、大きくなり、エラーが発生しやすくなり、保守が困難になりました。 CSSを使用すると、プレゼンテーションを構造から分離できます。 CSSは、色、フォント、テキストの配置、サイズ、境界線、間隔、レイアウト、およびその他の多くの活版印刷の特性を定義でき、画面上のビューと印刷されたビューに対して個別に定義できます。 CSSは、読み上げ速度や聴覚テキストリーダーの強調など、非視覚的なスタイルも定義します。W3Cは、今している非推奨のすべてのプレゼンテーションHTMLマークアップを使用すること。[15]

たとえば、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情報は、さまざまなソースから提供できます。これらのソースは、Webブラウザー、ユーザー、および作成者です。著者からの情報は、インライン、メディアタイプ、重要度、セレクターの特異性、ルールの順序、継承、およびプロパティの定義にさらに分類できます。CSSスタイル情報は、別のドキュメントに含めることも、HTMLドキュメントに埋め込むこともできます。複数のスタイルシートをインポートできます。使用している出力デバイスに応じて、さまざまなスタイルを適用できます。たとえば、画面バージョンは印刷バージョンとはかなり異なる場合があるため、作成者は各メディアに合わせてプレゼンテーションを適切に調整できます。

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

CSSの目標の1つは、ユーザーがプレゼンテーションをより細かく制御できるようにすることです。赤い斜体の見出しが読みにくいと感じた人は、別のスタイルシートを適用するかもしれません。ブラウザとWebサイトに応じて、ユーザーはデザイナーが提供するさまざまなスタイルシートから選択するか、追加されたすべてのスタイルを削除してブラウザのデフォルトのスタイルを使用してサイトを表示するか、他のスタイルを変更せずに赤い斜体の見出しスタイルのみを上書きすることができます。属性。

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

特異性

特異性とは、さまざまなルールの相対的な重みを指します。[16]複数のルールが適用される可能性がある場合に、要素に適用されるスタイルを決定します。仕様に基づいて、単純なセレクター(H1など)の特異性は1、クラスセレクターの特異性は1,0、IDセレクターの特異性は1,0,0です。特異性の値は10進法のように引き継がれないため、「数字」を区切るためにコンマが使用されます[17](11個の要素と11個のクラスを持つCSSルールの特異性は121ではなく11,11になります)。

したがって、次のルールセレクターにより、指定された特異性が得られます。

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

このHTMLフラグメントについて考えてみましょう。

<!DOCTYPE HTML> 
< HTML > 
    <ヘッド> 
        <メタ のcharset = "UTF-8" > 
        <スタイル> 
            XYZ  {  ;  } 
        </スタイル> 
    </ヘッド> 
    <ボディ> 
        < p  id = "xyz"  style = "color:green;" >特異性を示すために</ p > 
    </本文> 
</ html >

上記の例では、style属性の宣言<style>は、より高い特異性を持っているため要素の宣言をオーバーライドします。したがって、段落は緑色で表示されます。

継承

継承はCSSの重要な機能です。それは、動作するために祖先と子孫の関係に依存しています。継承は、指定された要素だけでなく、その子孫にもプロパティが適用されるメカニズムです。[16]継承は、XHTMLの階層であるドキュメントツリーに依存していますネストに基づくページ内の要素。子孫要素は、それらを囲む任意の祖先要素からCSSプロパティ値を継承できます。一般に、子孫要素はテキスト関連のプロパティを継承しますが、ボックス関連のプロパティは継承されません。継承できるプロパティは、色、フォント、文字間隔、行の高さ、リストスタイル、テキスト整列、テキストインデント、テキスト変換、可視性、空白、および単語間隔です。継承できないプロパティは、background、border、display、float and clear、heightとwidth、margin、min-とmax-heightと-width、outline、overflow、padding、position、text-decoration、vertical-align、zです。 -索引。

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

CSSでの継承は、クラスベースのプログラミング言語での継承と同じではありません。クラスBは、「クラスAと同様ですが、変更が加えられた」ものとして定義できます。[18] CSSを使用すると、「クラスA、ただし変更あり」で要素のスタイルを設定できます。ただし、そのようなCSSクラスBを定義することはできません。これを使用すると、変更を繰り返さずに複数の要素のスタイルを設定できます。

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

h1  {
    ピンク; 
}

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

< h1 >
   これは< em >説明する</ em >継承
</ h1 >

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

空白

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

本体{オーバーフロー非表示; 背景#000000 ; 背景画像url images / bg.gif ); background-repeat no-repeat ; 背景位置左の トップ;}

これと機能的に同等です:

本体 {
   オーバーフロー 非表示; 
   背景色 #000000 ; 
   背景画像 url images / bg.gif ); 
   background-repeat  no-repeat ; 
   背景位置 左の トップ
}

読みやすくするためにCSSをフォーマットする一般的な方法の1つは、各プロパティをインデントして独自の行を指定することです。読みやすさのためにCSSをフォーマットすることに加えて、省略形のプロパティを使用してコードをより速く書き出すことができ、レンダリング時にもより速く処理されます。[19]

本体 {
   オーバーフロー 非表示; 
   背景 #000 のURL 画像/ bg.gif  ノー・リピート  トップ
}

ポジショニング

CSS 2.1は、次の3つのポジショニングスキームを定義しています。

通常の流れ
インラインアイテムは、テキスト内の単語の文字と同じ方法で、空きスペースがなくなるまで次々に配置され、その後、下に新しい行が開始されます。ブロックアイテムは、段落のように、箇条書きのアイテムのように、垂直に積み重ねられます。通常のフローには、ブロックまたはインラインアイテム、および慣らしボックスの相対的な配置も含まれます。
フロート
フロートされたアイテムは通常の流れから取り出され、使用可能なスペースで可能な限り左または右にシフトされます。その後、他のコンテンツがフロートされたアイテムと一緒に流れます。
絶対ポジショニング
絶対的に配置されたアイテムは、他のアイテムの通常の流れに影響を与えることはありません。他のアイテムとは関係なく、コンテナ内で割り当てられた位置を占めます。[20]

位置プロパティ

positionプロパティには5つの可能な値があります。アイテムは、以外の方法で配置されている場合static、次いでさらに特性topbottomleft、およびrightオフセットを指定するために使用され、位置スタティックを有するpositions.The要素は影響を受けません topbottomleftまたは right特性。

静的
デフォルト値は、アイテムを通常のフローに配置します
相対的
アイテムは通常のフローに配置され、その位置からシフトまたはオフセットされます。後続のフローアイテムは、アイテムが移動されていないかのようにレイアウトされます。
絶対
絶対位置を指定します。要素は、最も近い非静的な祖先に対して配置されます。
修理済み
ドキュメントの残りの部分がスクロールされても、アイテムは画面上の固定位置に絶対的に配置されます[20]。

フロートしてクリア

floatプロパティには、3つの値のいずれかを有することができます。絶対配置または固定されたアイテムはフロートできません。他の要素は、それらのclear特性によってそうすることを妨げられない限り、通常、浮いたアイテムの周りを流れます。

アイテムは、表示されたはずの行の左側に浮かんでいます。他のアイテムがその右側を流れる可能性があります。
アイテムは、表示されたはずの行の右側に浮かんでいます。他のアイテムが左側に流れる可能性があります。
晴れ
左()、右()、または両側()のフロート要素の下(「クリア」)に要素を強制的に表示します[20] [21]clear:leftclear:rightclear:both

歴史

HåkonWiumLie、Opera Software社の最高技術責任者、CSSWeb標準の共同作成者

CSSは、1994年10月10日にHåkonWiumLieによって最初に提案されました[22]当時、LieはCERNでTimBerners-Leeと協力していました[23] Web用の他のいくつかのスタイルシート言語がほぼ同時に提案され、公開メーリングリストおよびWorld Wide Web Consortium内での議論の結果、1996年に最初のW3C CSS勧告(CSS1)[24]がリリースされました。特に、BertBosによる提案は影響力がありました。彼はCSS1の共著者になり、CSSの共同作成者と見なされています。[25]

スタイルシートは、1980年代のStandard Generalized Markup Language(SGMLの開始以来、何らかの形で存在しており、CSSはWeb用のスタイルシートを提供するために開発されました。[26] Webスタイルシート言語の要件の1つは、スタイルシートがWeb上のさまざまなソースから取得されることでした。したがって、DSSSLFOSIなどの既存のスタイルシート言語は適していませんでした。一方、CSSでは、「カスケード」スタイルを使用して、ドキュメントのスタイルを複数のスタイルシートの影響を受けます。[26]

HTMLが成長するにつれて、Web開発者の要求を満たすためにさまざまなスタイル機能が含まれるようになりました。この進化により、より複雑なHTMLを犠牲にして、設計者はサイトの外観をより細かく制御できるようになりました。変動は、Webブラウザのような実装、ViolaWWWおよびワールドワイドウェブ[27]は困難な一貫性のあるサイトの外観を作り、ユーザーがWebコンテンツが表示された方法を制御しにくいました。 Tim Berners-Leeによって開発されたブラウザ/エディタには、プログラムにハードコードされたスタイルシートがありました。したがって、スタイルシートをWeb上のドキュメントにリンクすることはできませんでした。[23] ロバート・カイリューもCERNのメンバーであり、構造をプレゼンテーションから分離して、さまざまなスタイルシートで、印刷、画面ベースのプレゼンテーション、およびエディター用のさまざまなプレゼンテーションを記述できるようにしたいと考えていました。[27]

Webプレゼンテーション機能の改善は、Webコミュニティの多くの人々にとって関心のあるトピックであり、9つの異なるスタイルシート言語がwwwスタイルのメーリングリストで提案されました。[26]これらの9つの提案のうち、CSSになったものに特に影響を与えたのは、カスケードHTMLスタイルシート[22]とストリームベースのスタイルシート提案(SSP)の2つです。[25] [28] 2つのブラウザが最初の提案のテストベッドとして機能しました。 LieはYvesLafon協力してDaveRaggettArenaブラウザにCSSを実装しました[29] [30] [31] Bert Bosは、Argoブラウザで独自のSSP提案を実装しました[25]その後、LieとBosは協力してCSS標準を開発しました(これらのスタイルシートはHTML以外の他のマークアップ言語にも適用できるため、名前から「H」が削除されました)。[23]

嘘の提案は、1994年にイリノイ州シカゴで開催された「モザイクとウェブ」会議(後にWWW2と呼ばれる)で発表され、1995年にベルトボスと再び発表されました。[23]この頃、W3Cはすでに確立されており、関心を持っていました。 CSSの開発において。そのために、スティーブン・ペンバートンが議長を務めるワークショップを開催しました。その結果、W3CはCSSに関する作業をHTML編集レビューボード(ERB)の成果物に追加しました。 LieとBosは、プロジェクトのこの側面の主要な技術スタッフであり、MicrosoftのThomasReardon含む追加のメンバーも参加しました。 1996年8月、Netscape Communication Corporationは、と呼ばれる代替スタイルシート言語を発表しました。JavaScriptスタイルシート(JSSS)。[23]仕様は決して完成しておらず、非推奨です。[32] 1996年の終わりまでに、CSSは公式になる準備ができており、CSSレベル1勧告が12月に公開されました。

HTML、CSS、およびDOMの開発はすべて、HTML編集レビューボード(ERB)という1つのグループで行われていました。1997年の初めに、ERBは3つのワーキンググループに分割されました。HTMLワーキンググループW3CのDanConnolly議長を務めます。SoftQuadのLaurenWoodが議長を務めるDOMワーキンググループそして、CSSワーキンググループは、議長を務めるクリス・リレイW3Cの。

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

2005年、CSSワーキンググループは、標準の要件をより厳密に施行することを決定しました。これは、CSS 2.1、CSS 3セレクター、CSS 3テキストなどのすでに公開されている標準が、候補の推奨から作業ドラフトレベルに引き戻されたことを意味します。

養子縁組の難しさ

CSS1仕様は1996年に完成しました。MicrosoftのInternetExplorer 3 [23]はその年にリリースされ、CSSのサポートが制限されています。 IE4Netscape4.xはより多くのサポートを追加しましたが、通常は不完全であり、CSSを有効に採用することを妨げる多くのバグありました。 Webブラウザが仕様のほぼ完全な実装を達成するまでに3年以上かかりました。2000年3月に出荷されMacintosh用のInternetExplorer 5.0は、Operaを超える[33]完全な(99%以上の)CSS1サポートを備えた最初のブラウザでした。、15か月前にCSSサポートが導入されて以来リーダーでした。その後すぐに他のブラウザが続き、それらの多くはCSS2の一部を追加で実装しました。[要出典]

しかし、後の「バージョン5」のWebブラウザがCSSのかなり完全な実装を提供し始めたときでさえ、それらは特定の領域でまだ正しくなく、矛盾、バグ、その他の癖に満ちていましたWindows用のMicrosoftInternet Explorer 5.xは、Macintosh用の非常に異なるIEとは対照的に、CSS標準と比較してCSSボックスモデル」の実装に欠陥がありました。このような不整合と機能サポートのバリエーションにより、設計者CSSハックやフィルターと呼ばれる回避策を使用せずにブラウザーやプラットフォーム全体で一貫した外観を実現することが困難になりました。 IE / Windowsボックスモデルのバグは非常に深刻だったので、Internet Explorer 6がリリースされ、MicrosoftはCSS解釈の下位互換モード(「クァークズモード」)を、代替の修正された「標準モード」とともに導入しました。他のMicrosoft以外のブラウザも、このような「モード」切り替え動作機能を提供していました。したがって、HTMLファイルの作成者は、特別な特徴的な「標準に準拠したCSSの意図」マーカー含まれていることを確認して、作成者がCSSを標準に準拠して正しく解釈することを意図していることを示す必要がありました。廃止されたIE5 / Windowsブラウザ。このマーカーがないと、「クァークモード」切り替え機能を備えたWebブラウザーは、CSS標準に従うのではなく、IE5 / Windowsと同じようにWebページ内のオブジェクトのサイズを変更します。[要出典]

CSSのパッチの採用に関する問題と、元の仕様の正誤表により、W3CはCSS2標準をCSS2.1に改訂し、HTMLブラウザーでの現在のCSSサポートの動作スナップショットに近づきました。ブラウザが正常に実装されなかった一部のCSS2プロパティが削除され、いくつかのケースでは、標準が主要な既存の実装と一致するように定義された動作が変更されました。 CSS 2.1は2004年2月25日に候補推奨ステータスになりましたが、CSS 2.1は2005年6月13日にワーキングドラフトステータスに戻され[34]、2007年7月19日にのみ候補推奨ステータスに戻りました。[35]

これらの問題に加えて、.css拡張子が変換のために使用されるソフトウェア製品で使用されたPowerPointの、コンパクトなスライドショーファイルにファイル[36] いくつかのWebサーバが提供して、すべての.css[37]などのMIMEタイプ application/x-pointplus[38]ではなくtext/css

ベンダープレフィックス

個々のブラウザベンダーは、標準化と普遍化に先立って新しいパラメータを導入することがありました。将来の実装との干渉を防止するために、ベンダーは、次のようなパラメータに一意の名前、先頭に付加-moz-のためのMozilla Firefoxの-webkit-にちなんで名付けられたブラウジングエンジンアップルのSafari-o-Operaブラウザ-ms-のためのMicrosoft Internet Explorerを

時折、ベンダープレフィックスなどとパラメータ-moz-radial-gradient-webkit-linear-gradientその非ベンダープレフィックスの対応と比較してわずかに異なる構文を持ちます。[39]

接頭辞付きのプロパティは、標準化の時点で廃止されています。古いブラウザのプレフィックスを自動的に追加したり、プレフィックス付きパラメータの標準化されたバージョンを指摘したりするプログラムを利用できます。プレフィックスはブラウザの小さなサブセットに制限されているため、プレフィックスを削除すると、他のブラウザが機能を確認できるようになります。例外は、特定の廃止された-webkit-プレフィックス付きプロパティです。これらはWeb上で非常に一般的で永続的であるため、他のブラウザファミリは互換性のためにそれらをサポートすることを決定しました。[40]

バリエーション

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

CSS 1

公式のW3C勧告となった最初のCSSの仕様では、12月17日、1996年に公開されたCSSレベル1、である ホーコンWium嘘バート・ボスオリジナルの開発者としてクレジットされています。[41] [42]その機能の中には、

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

W3CはCSS1勧告を維持しなくなりました。[43]

CSS 2

CSSレベル2仕様は、W3Cによって開発され、1998年5月に推奨事項として公開されました。CSS1のスーパーセットには、要素の絶対、相対、固定配置、z-indexなどの多くの新機能が含まれています。メディアタイプ、聴覚スタイルシート(後でCSS 3音声モジュールに置き換えられました)[44]と双方向テキストのサポート、およびシャドウなどの新しいフォントプロパティ。

W3Cは、CSS2の推奨事項を維持しなくなりました。[45]

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日に勧告案に移行しました。[46] W3C諮問委員会によって検討された後、2011年6月7日にW3C勧告として最終的に公開されました。[47]

CSS 2.1はレベル2の最初で最後のリビジョンとして計画されましたが、CSS2.2での優先度の低い作業は2015年に開始されました。

CSS 3

さまざまな機能を定義する大きな単一の仕様であるCSS2とは異なり、CSS3は「モジュール」と呼ばれるいくつかの個別のドキュメントに分割されています。各モジュールは、CSS 2で定義された新しい機能を追加したり、機能を拡張したりして、下位互換性を維持します。CSSレベル3での作業は、元のCSS2推奨事項の公開の頃に開始されました。初期のCSS3ドラフトは1999年6月に公開されました。[48]

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

一部のモジュールは候補推奨CR)ステータスを持ち、適度に安定していると見なされます。CRのステージ、実装は、ベンダープレフィックスを削除することをお勧めします。[50]

メインモジュール仕様の要約[51]
モジュール 仕様タイトル スターテス 日にち
css3-background CSSの背景と境界線モジュールレベル3  候補者Rec。 2020年12月
css3-box CSS基本ボックスモデル 候補者Rec。 2020年12月
css-cascade-3 CSSカスケードおよび継承レベル3  おすすめ 2021年2月
css3-color CSSカラーモジュールレベル3 おすすめ 2018年6月
css3-content CSS3で生成および置換されたコンテンツモジュール  ワーキングドラフト2 2019年8月
css-fonts-3 CSSフォントモジュールレベル3 おすすめ 2018年9月
css3-gcpm ページングされたメディアモジュールのCSS生成コンテンツ ワーキングドラフト 2014年5月
css3-layout CSSテンプレートレイアウトモジュール ノート 2015年3月
css3-メディアクエリ  メディアクエリ おすすめ 2012年6月
メディアクエリ-4  メディアクエリレベル4 候補者Rec。 2020年7月
css3-multicol  マルチカラムレイアウトモジュールレベル1 ワーキングドラフト 2021年2月
css3-page CSSページメディアモジュールレベル3 ワーキングドラフト 2018年10月
セレクター-3 セレクターレベル3 おすすめ 2018年11月
セレクター-4 セレクターレベル4 ワーキングドラフト 2018年11月
css3-ui CSSベーシックユーザーインターフェイスモジュールレベル3(CSS3 UI) おすすめ 2018年6月

CSS 4

ジェンシモンズは、いくつかのCSS  4モジュールが進んでいたため、2019年のCSSの状態について話し合っています

仕様は独立してレベル付けされる多くの個別のモジュールに分割されているため、単一の統合されたCSS4仕様はありません[52]

レベル3で開始CSSレベル2から物事のビルドはそれらのいくつかは、すでにレベル4に達しているか、すでにのような全く新しい機能、定義5.その他のモジュールレベルに近づいていることをモジュールフレキシボックス[53]は、レベルとして指定されている1そしてそれらのいくつかはレベル2に近づいています。

CSSワーキンググループは、ブラウザ開発者が実装するのに十分安定していると見なされるモジュール全体と他のドラフトの一部のコレクションである「スナップショット」を公開することがあります。これまでに、このような「現在のベストプラクティス」の5つのドキュメントが、2007年、[54] 2010年、[55] 2015年、[56] 2017年、[57]、2018年にNotesとして公開されています[58]

これらの仕様スナップショットは主に開発者を対象としているため、Can IUse… [59]MozillaDeveloperなどのサイトで文書化されている相互運用可能な実装の状態を示す、作成者を対象とした同様のバージョンのリファレンスドキュメントに対する需要が高まっています。通信網。[60] W3Cコミュニティグループは、そのようなリソースについて話し合い、定義するために、2020年の初めに設立されました。[61]実際のバージョン管理の種類も議論の余地があります。つまり、一度作成されたドキュメントは「CSS4」とは呼ばれない可能性があります。

ブラウザのサポート

各Webブラウザーはレイアウトエンジンを使用してWebページをレンダリングし、CSS機能のサポートはそれらの間で一貫していません。ブラウザーはCSSを完全に解析しないため、回避策(一般にCSSハックまたはCSSフィルターとして知られている)を使用して特定のブラウザーを対象とする複数のコーディング手法が開発されています。 CSSでの新機能の採用は、主要なブラウザーでのサポートの欠如によって妨げられる可能性があります。たとえば、InternetExplorerは多くのCSS3機能のサポートを追加するのに時間がかかり、それらの機能の採用が遅くなり、開発者の間でのブラウザーの評判が損なわれました。[62]ユーザーに一貫したエクスペリエンスを保証するために、Web開発者は多くの場合、複数のオペレーティングシステム、ブラウザー、およびブラウザーバージョンにわたってサイトをテストし、開発時間と複雑さを増大させます。BrowserStackなどのツールは、これらの環境を維持する複雑さを軽減するために構築されています。

これらのテストツールに加えて、CanIUseMozilla Developer Networkなど、多くのサイトが特定のCSSプロパティに対するブラウザサポートのリストを維持しています。さらに、CSS 3は機能クエリを定義します。これ@supportsは、開発者がCSS内で直接特定の機能をサポートするブラウザーをターゲットにできるようにするディレクティブを提供します。[63]古いブラウザでサポートされていないCSSは、JavaScriptポリフィルを使用してパッチを適用することもできます、ブラウザが一貫して動作するように設計されたJavaScriptコードの一部です。これらの回避策(およびフォールバック機能をサポートする必要性)は、開発プロジェクトを複雑にする可能性があり、その結果、企業は、サポートするブラウザバージョンとサポートしないブラウザバージョンのリストを頻繁に定義します。

Webサイトは、古いブラウザーと互換性のない新しいコード標準を採用しているため、これらのブラウザーは、Web上の多くのリソースへのアクセスを(場合によっては意図的に)遮断することができます。[64]インターネット上で最も人気のあるサイトの多くは、CSSのサポートが不十分なために古いブラウザで視覚的に劣化しているだけでなく、主にJavaScriptやその他のWebテクノロジーの進化のためにまったく機能しません。

制限事項

CSSの現在の機能に関するいくつかの注目すべき制限は次のとおりです。

セレクターは上昇できません
CSSは現在、特定の条件を満たす要素のまたは祖先を選択する方法を提供していません[65]まだ作業ドラフトステータスにあるCSSセレクターレベル4は、そのようなセレクターを提案します[66]が、動的CSSスタイリングで使用される高速の「ライブ」プロファイルではなく、完全な「スナップショット」セレクタープロファイルの一部としてのみです。[67]より高度なセレクタースキーム(XPathなど)により、より洗練されたスタイルシートが可能になります。CSSワーキンググループが以前に親セレクターの提案を拒否した主な理由は、ブラウザーのパフォーマンスとインクリメンタルレンダリングの問題に関連しています。[68]
位置に関係なく新しいスコープを明示的に宣言することはできません
z-indexなどのプロパティのスコープ規則は、position:absoluteまたはposition:relative属性を持つ最も近い親要素を探します。この奇妙な結合には、望ましくない影響があります。たとえば、要素の位置を調整する必要がある場合に新しいスコープを宣言することを避けられず、親要素の目的のスコープを使用できなくなります。
制御できない疑似クラスの動的動作
CSSは、代替スタイルの条件付き適用によってある程度のユーザーフィードバックを可能にする疑似クラスを実装します。1つのCSS疑似クラス " "は動的であり(JavaScript "onmouseover"と同等)、誤用の可能性があります(たとえば、カーソル近接ポップアップの実装)[69]が、CSSにはクライアントがそれを無効にする機能がありません( 「無効」のようなプロパティ)またはその効果を制限します(各プロパティに「変更なし」のような値はありません)。:hover
ルールに名前を付けることはできません
CSSルールに名前を付ける方法はありません。これにより、たとえば、セレクターが変更された場合でも、クライアント側のスクリプトがルールを参照できるようになります。
ルールのスタイルを別のルールに含めることはできません
CSSスタイルは、多くの場合、目的の効果を実現するためにいくつかのルールで複製する必要があり、追加のメンテナンスが発生し、より徹底的なテストが必要になります。これを解決するためにいくつかの新しいCSS機能が提案されましたが、その後放棄されました。[70] [71]代わりに、作者は、SassLessStylusなどのCSSにコンパイルされるより洗練されたスタイルシート言語を使用することでこの機能を得ることができます。
マークアップを変更せずに特定のテキストをターゲットにすることはできません
疑似要素に加えて、プレースホルダー要素を利用せずに特定の範囲のテキストをターゲットにすることはできません。:first-letter

以前の問題

さらに、CSS標準の以前のバージョンにはさらにいくつかの問題がありましたが、軽減されました。

垂直制御の制限
要素の水平配置は常に一般的に制御が容易でしたが、垂直配置はしばしば直感的でない、複雑な、または完全に不可能でした。要素を垂直方向に中央揃えしたり、ビューポートの下部よりも高くないフッターを配置したりするなどの単純なタスクには、複雑で直感的でないスタイルルール、または単純だが広くサポートされていないルールが必要でした。[65]フレキシブルボックスモジュールは状況を大幅に改善し、垂直制御ははるかに簡単で、最新のすべてのブラウザでサポートされています。[72]古いブラウザにはまだこれらの問題がありますが、それらのほとんど(主にInternet Explorer 9以下)はベンダーによってサポートされなくなりました。[73]
表現の欠如
プロパティ値を単純な式(などとして指定する標準的な機能はありませんでした。これは、すべての列の合計に対する制約の対象となる列のサイズを計算するなど、さまざまな場合に役立ちます。 Internet Explorerバージョン5から7は、同様の機能を備えた独自のexpression()ステートメント[74]サポートしています。この独自のexpression()ステートメントは、互換モードを除いて、Internet Explorer8以降ではサポートされなくなりました。この決定は、「標準への準拠、ブラウザのパフォーマンス、およびセキュリティ上の理由」のために行われました。[74]ただし、この制限に対処するためのcalc()値を持つ推奨候補は、CSSWGによって公開されています[75]。margin-left: 10% 3em + 4px;それ以来、最新のすべてのブラウザでサポートされています。[76]
列宣言の欠如
現在のCSS3(column-countモジュールを使用)では可能ですが、[77]複数の列を持つレイアウトは、CSS2.1での実装が複雑になる可能性があります。CSS 2.1では、プロセスは多くの場合、フローティング要素を使用して実行されます。フローティング要素は、さまざまなブラウザー、さまざまなコンピューター画面形状、および標準モニターに設定されたさまざまな画面比率によって異なる方法でレンダリングされることがよくあります。最新のブラウザはすべて、このCSS3機能を何らかの形でサポートしています。[78]

利点

プレゼンテーションからのコンテンツの分離
CSSは、名目上のパラメーターに基づいて、複数のプレゼンテーション形式でのコンテンツの公開を容易にします。名目上のパラメーターには、明示的なユーザー設定、さまざまなWebブラウザー、コンテンツの表示に使用されるデバイスのタイプ(デスクトップ・コンピューターまたはモバイル・デバイス)、ユーザーの地理的位置、およびその他の多くの変数が含まれます。
サイト全体の一貫性
CSSを効果的に使用すると、継承と「カスケード」の観点から、グローバルスタイルシートを使用して、サイト全体の要素に影響を与え、スタイルを設定できます。要素のスタイルを変更または調整する必要がある状況が発生した場合、これらの変更は、グローバルスタイルシートのルールを編集することで行うことができます。CSSが登場する前は、この種のメンテナンスはより難しく、費用と時間がかかりました。
帯域幅
内部または外部のスタイルシートはclass、タイプまたは他のユーザーとの関係によって選択されたHTML要素の範囲のスタイルを1回指定します。これは、要素が出現するたびにスタイル情報をインラインで繰り返すよりもはるかに効率的です。外部スタイルシートは通常、ブラウザのキャッシュに保存されるため、リロードせずに複数のページで使用でき、ネットワークを介したデータ転送をさらに削減します。
ページの再フォーマット
1行を変更するだけで、同じページに別のスタイルシートを使用できます。これには、アクセシビリティに利点があるだけでなく、ページまたはサイトをさまざまなターゲットデバイスに合わせて調整する機能も提供されます。さらに、スタイリングを理解できないデバイスでもコンテンツが表示されます。
アクセシビリティ
CSSがない場合、Webデザイナーは通常、視覚障害のあるユーザーのアクセシビリティを妨げるHTMLテーブルなどの手法を使用してページをレイアウトする必要があります(テーブルレスWebデザイン#Accessibilityを参照)。

標準化

フレームワーク

CSSフレームワーク、Cascading Style Sheets言語を使用して、より簡単で標準に準拠しWebページのスタイル設定を可能にすることを目的とした事前に準備されたライブラリです。 CSSフレームワークには、BlueprintBootstrapFoundation、およびMaterializeが含まれます。プログラミングおよびスクリプト言語ライブラリと同様に、CSSフレームワークは通常、HTMLで参照される外部の.cssシートとして組み込まれます。<head>これらは、Webページを設計およびレイアウトするための既製のオプションを多数提供します。これらのフレームワークの多くは公開されていますが、一部の作成者は主にラピッドプロトタイピングや学習に使用し、未使用の機能を多数持つことによる設計、保守、ダウンロードのオーバーヘッドなしに、公開された各サイトに適した「手作り」のCSSを好みます。サイトのスタイリングで。[79]

設計方法論

プロジェクトで使用されるCSSリソースのサイズが大きくなると、開発チームは、それらを整理するための共通の設計方法を決定する必要があることがよくあります。目標は、開発の容易さ、開発中のコラボレーションの容易さ、およびブラウザーにデプロイされたスタイルシートのパフォーマンスです。一般的な方法論には、OOCSS(オブジェクト指向CSS)、ACSS(アトミックCSS)、oCSS(有機カスケードスタイルシート)、SMACSS(CSSのスケーラブルでモジュラーアーキテクチャ)、およびBEM(ブロック、要素、修飾子)が含まれます。[80]

参考文献

  1. ^ 「CSS開発者ガイド」Mozilla DeveloperNetwork2015年9月25日にオリジナルからアーカイブされました2015年924日取得
  2. ^ フラナガン、デビッド。JavaScript –決定的なガイド(6版)。NS。1. JavaScriptは、すべてのWeb開発者が学ばなければならない3つのテクノロジーの一部です。Webページのコンテンツを指定するHTML、Webページの表示を指定するCSS、およびWebページの動作を指定するJavaScriptです。
  3. ^ 「CSSとは何ですか?」ワールドワイドウェブコンソーシアム。2010年11月29日にオリジナルからアーカイブされました2010年12月1取得
  4. ^ 「HTML5、CSSおよびJavaScriptを使用した未来のWebベースのモバイルアプリ」HTMLGoodies。2010年7月23日。2014-10-20のオリジナルからアーカイブ2014年1016日取得
  5. ^ 「W3CCSS検証サービス」2011年2月14日にオリジナルからアーカイブされました2012年6月30日取得
  6. ^ 「疑似要素と疑似クラスのW3CCSS2.1仕様」ワールドワイドウェブコンソーシアム。2011年6月7日。2012年4月30日のオリジナルからアーカイブ取得した30年4月2012
  7. ^ W3CのWebサイトでセレクタの完全な定義を アーカイブで2006-04-23ウェイバックマシン
  8. ^ 「セレクターレベル3」W3.org。2014年6月3日にオリジナルからアーカイブされました2014年5月30日取得
  9. ^ 「ルールセット、宣言ブロック、およびセレクタに関するW3CCSS2.1仕様」ワールドワイドウェブコンソーシアム。2011年6月7日。2008年3月28日のオリジナルからアーカイブ2009年6月20日取得
  10. ^ 「完全なプロパティテーブル」W3.org。2014年5月30日にオリジナルからアーカイブされました2014年5月30日取得
  11. ^ 「CSSプロパティのインデックス」www.w3.org 202089日取得
  12. ^ 「CSSカラー」Mozilla開発者ネットワーク。2016-06-28。2016-09-21にオリジナルからアーカイブされました2016年8月23日取得
  13. ^ 「6.1長さの単位」カスケードスタイルシート、レベル11996年12月17日。2019年6月14日のオリジナルからアーカイブ2019年6月20日取得
  14. ^ "5.距離の単位:<長さ>タイプ"CSS値と単位モジュールレベル32019年6月6日。2019年6月7日のオリジナルからアーカイブ2019年6月20日取得
  15. ^ W3CHTMLワーキンググループ。「HTML5。HTMLおよびXHTMLの語彙および関連するAPI」World WideWebコンソーシアム2014年7月15日にオリジナルからアーカイブされました検索された28年6月2014
  16. ^ a b Meyer、Eric A.(2006)。カスケードスタイルシート:決定的なガイド(第3版)。オライリーメディア社ISBN 0-596-52733-02014-02-15にオリジナルからアーカイブされました2014年2月16日取得
  17. ^ 「プロパティ値の割り当て、カスケード、および継承」2014年6月11日にオリジナルからアーカイブされました取得した2014年6月10日を
  18. ^ 「CSSクラスは1つ以上の他のクラスを継承できますか?」StackOverflow2017-10-14にオリジナルからアーカイブされました2017910日取得
  19. ^ 「速記プロパティ」チュートリアルMozilla開発者。2017-12-07。2018-01-30にオリジナルからアーカイブされました2018年1月30日取得
  20. ^ a b c ボス、ベルト; etal。(2010年12月7日)。「9.3ポジショニングスキーム」カスケードスタイルシートレベル2リビジョン1(CSS 2.1)仕様W3C。2011年2月18日にオリジナルからアーカイブされました取得した16年2月2011
  21. ^ Holzschlag、Molly E(2005)。HTMLとCSSに飛び込みます。ピアソンエデュケーション社ISBN 0-13-185586-7
  22. ^ a b Lie、Hakon W(1994年10月10日)。「カスケードHTMLスタイルシート–提案」(提案)(92)。CERN。2014年6月4日にオリジナルからアーカイブされました検索された5月25 2014 引用ジャーナルには|journal=ヘルプが必要です
  23. ^ a b c d e f Lie、HåkonWium ; ボス、ベルト(1999)。Web用に設計されたカスケードスタイルシートアディソンウェスリー。ISBN 0-201-59625-3検索された23年6月2010年
  24. ^ 「カスケードスタイルシート、レベル1」ワールドワイドウェブコンソーシアム。2014年4月9日にオリジナルからアーカイブされました2014年3月7取得
  25. ^ a b c Bos、Bert(1995年4月14日)。「ウェブ上のSGMLとHTMLのシンプルなスタイルシート」ワールドワイドウェブコンソーシアム。2009年9月23日にオリジナルからアーカイブされました検索された20年6月2010年
  26. ^ B C 「カスケーディングスタイルシート」オスロ大学。アーカイブされた2006-09-06に取得した3年9月2014
  27. ^ a b ペトリー、チャールズ; カイリュー、ロバート(1997年11月)。「WWW提案に関するロバートカイリューへのインタビュー:「それが実際にどのように起こったか。" "電気電子学会2011年1月6日にオリジナルからアーカイブされまし取得した18年8月2010年
  28. ^ ボス、ベルト(1995年3月31日)。「ストリームベースのスタイルシートの提案」2014年10月12日にオリジナルからアーカイブされました取得した3年9月2014
  29. ^ Nielsen、Henrik Frystyk(2002年6月7日)。「Libwwwハッカー」ワールドワイドウェブコンソーシアム。2009年12月2日にオリジナルからアーカイブされました2010年6月6日取得
  30. ^ 「イヴラフォン」ワールドワイドウェブコンソーシアム。2010年6月24日にオリジナルからアーカイブされました検索された17年6月2010年
  31. ^ 「W3Cチーム:技術と社会」ワールドワイドウェブコンソーシアム。2008年7月18日。2010年5月28日のオリジナルからアーカイブ取り出さ年1月22 2011
  32. ^ ルー・モントゥリ; ブレンダンアイク; スコットファーマン; ドナコンバース; トロイシュヴァリエ(1996年8月22日)。「JavaScriptベースのスタイルシート」W3C。2010年5月27日にオリジナルからアーカイブされました検索された23年6月2010年
  33. ^ 「CSSソフトウェア」W3.org。2010年11月25日にオリジナルからアーカイブされました取得した2011年1月15日を
  34. ^ アンヴァンケステレン「CSS2.1–アンのウェブログ」2005年12月10日にオリジナルからアーカイブされました2011216日取得
  35. ^ 「2007年のW3Cニュースのアーカイブ」World WideWebコンソーシアム2011年6月28日にオリジナルからアーカイブされました2011216日取得
  36. ^ Nitot、Tristan(2002年3月18日)。「CSSファイルのMIMEタイプが正しくありません」Mozilla DeveloperCenterMozilla2011年5月20日にオリジナルからアーカイブされまし検索された20年6月2010年
  37. ^ マクブライド、ドン(2009年11月27日)。「ファイルタイプ」2010年10月29日にオリジナルからアーカイブされました検索された20年6月2010年
  38. ^ 「cssファイル拡張子の詳細」ファイル拡張子データベース。2010年3月12日。2011年7月18日のオリジナルからアーカイブ検索された20年6月2010年
  39. ^ 「WebサイトでCSSベンダープレフィックスを使用する方法と理由」Lifewire2019-11-12。
  40. ^ 「互換性標準」WHATWG
  41. ^ Bos、/HåkonWiumLie、Bert(1997)。カスケードスタイルシート:Web用のデザイン(第1版)。ハーロウ、イギリス; マサチューセッツ州レディング:アディソンウェスリーロングマン。ISBN 0-201-41998-X
  42. ^ W3Cカスケードスタイルシート、レベル1 アーカイブ2011-02-09、Wayback Machine CSS1仕様
  43. ^ W3Cカスケーディングスタイルシートレベル1仕様 のアーカイブで2011-02-11ウェイバックマシンCSSレベル1の仕様
  44. ^ 「オーラルスタイルシート」W3C。2014-10-26にオリジナルからアーカイブされました2014年1026日取得
  45. ^ W3Cカスケードスタイルシート、レベル2 Wayback Machine CSS 2仕様2011年1月16日にアーカイブ(1998年の推奨)
  46. ^ W3Cカスケードスタイルシート、レベル2リビジョン1 Wayback Machine CSS 2.1仕様で2011-11-09にアーカイブ(W3C提案された推奨事項)
  47. ^ W3C:カスケードスタイルシート標準 は、ウェイバックマシンで20116月10日にアーカイブされた前例のない相互運用性を誇っています
  48. ^ ボス、ベルト(2011年2月18日)。「すべてのCSS仕様の説明」World WideWebコンソーシアム2011年3月31日にオリジナルからアーカイブされました2011年3月3日取得
  49. ^ ボス、ベルト(2011年2月26日)。「CSSの現在の作業」World WideWebコンソーシアム2011年3月3日にオリジナルからアーカイブされました2011年3月3日取得
  50. ^ Etemad、Elika J.(2010年12月12日)。「カスケードスタイルシート(CSS)スナップショット2010」World WideWebコンソーシアム2011年3月16日にオリジナルからアーカイブされました2011年3月3日取得
  51. ^ 「すべてのCSS仕様」W3.org。2014-05-22。2014年5月30日にオリジナルからアーカイブされました2014年5月30日取得
  52. ^ Atkins Jr、タブ。「CSS4についての一言」2012年10月31日にオリジナルからアーカイブされました取得した18年10月2012
  53. ^ 「CSSフレキシブルボックスレイアウトモジュールレベル1」W3C。2018年11月19日。2012年10月19日のオリジナルからアーカイブ取得した18年10月2012
  54. ^ 「カスケードスタイルシート(CSS)スナップショット2007」2011年5月12日。2016年8月8日のオリジナルからアーカイブ検索された18年7月2016
  55. ^ 「カスケードスタイルシート(CSS)スナップショット2010」2011年5月12日。2011年3月16日のオリジナルからアーカイブ2011年3月3日取得
  56. ^ 「CSSスナップショット2015」W3C2015年10月13日。2017年1月27日のオリジナルからアーカイブ2017年2月13日取得
  57. ^ 「CSSスナップショット2017」2017年1月31日 2017年2月13日のオリジナルからアーカイブ2017年2月13日取得
  58. ^ 「CSSスナップショット2018」2018年11月15日。2019年2月1日のオリジナルからアーカイブ2019年1月2日取得
  59. ^ 「使用できますか…HTML5、CSS3などのサポートテーブル」2018-02-19にオリジナルからアーカイブされました2019-01-26を取得しました
  60. ^ 「MDNWebDocs:CSS」
  61. ^ 「CSS4コミュニティグループ」2020-02-27にオリジナルからアーカイブされました2020年2月27日取得
  62. ^ 「InternetExplorerのためのCSS3ソリューション–スマッシングマガジン」スマッシングマガジン2010-04-28。2016-10-12にオリジナルからアーカイブされました取得した2016年10月12日を
  63. ^ 「CSSでの機能クエリの使用★MozillaHacks –Web開発者ブログ」hacks.mozilla.org2016-10-11にオリジナルからアーカイブされました取得した2016年10月12日を
  64. ^ 「InternetExplorer6でWebを最後にもう一度見る」ArsTechnica2016-10-12にオリジナルからアーカイブされました取得した2016年10月12日を
  65. ^ a b Molly Holzschlag(2012年1月)。「CSSにはまだ欠けている7つのもの」.netマガジン。2017-03-05にオリジナルからアーカイブされました2017年3月4日取得
  66. ^ 「セレクターレベル4–セレクターのサブジェクトの決定」W3.org。2013年8月17日にオリジナルからアーカイブされました2013年8月13日取得
  67. ^ 「セレクターレベル4–高速vs完全セレクタープロファイル」W3.org。2013年8月17日にオリジナルからアーカイブされました2013年8月13日取得
  68. ^ スヌーク、ジョナサン(2010年10月)。「親セレクターがない理由」snook.ca。2012年1月18日にオリジナルからアーカイブされまし2012年126日取得
  69. ^ 「純粋なCSSポップアップ」meyerweb.com。2009年12月9日にオリジナルからアーカイブされまし2009年11月19日取得
  70. ^ タブアトキンスジュニア「CSS適用ルール」GitHub。2016-02-22にオリジナルからアーカイブされまし2016年2月27日取得
  71. ^ 「@ applyを放棄した理由—タブ補完」
  72. ^ 「CSSフレキシブルボックスレイアウトモジュール」使用できますか... HTML5、CSS3などのサポートテーブルCanIUse.com。2016-02-23にオリジナルからアーカイブされまし
  73. ^ 「InternetExplorerのサポート終了」マイクロソフト。2019-06-02にオリジナルからアーカイブされました2016年2月27日取得
  74. ^ B 「動的プロパティについて」Msdn.microsoft.com。2017-10-14にオリジナルからアーカイブされました2009年6月20日取得
  75. ^ 「CSS値と単位モジュールレベル3」W3.org。2019年6月6日。2008年4月23日のオリジナルからアーカイブ
  76. ^ 「CSS単位値としてのcalc()」使用できますか... HTML5、CSS3などのサポートテーブルCanIUse.com。2016年3月4日にオリジナルからアーカイブされまし
  77. ^ 「CSSマルチカラムレイアウトモジュール」ワールドワイドウェブコンソーシアム。2011年4月29日にオリジナルからアーカイブされました2011年5月1日取得
  78. ^ 「などHTML5、CSS3、用することができます私は使用...サポートテーブル」CanIUse.com。2010年8月21日にオリジナルからアーカイブされまし2016年2月27日取得
  79. ^ ダン・セダーホルム; イーサン・マルコット(2009)。手作りのCSS:より防弾のWebデザインニューライダース。NS。114. ISBN 978-0-321-64338-42012年12月20日にオリジナルからアーカイブされました検索された19年6月2010年
  80. ^ アンティ、ヒルジャ。「OOCSS、ACSS、BEM、SMACSS:それらは何ですか?何を使用すればよいですか?」clubmate.fiヒルジャ。2015年6月2日にオリジナルからアーカイブされまし取得した2年6月2015年

さらに読む

も参照してください

外部リンク