Loading article…
| カスケーディングスタイルシート（CSS） | |
|---|---|
 | |
 | |
| ファイル名拡張子 | .css |
| インターネットメディアの 種類 | テキスト/CSS |
| 統一型識別子 （UTI） | public.css |
| 開発元 | ワールド・ワイド・ウェブ・コンソーシアム（W3C） |
| 初回リリース | 1996年12月17日 ( 1996-12-17 ) |
| 最新リリース | CSS 3 は複数の独立したモジュールとして開発されています。定期的なスナップショットでその進捗状況がまとめられています。2023年12月7日( 2023-12-07 ) |
| フォーマットの種類 | スタイルシート言語 |
| コンテナ | HTML要素のスタイルルール |
| 含ま れる | HTMLドキュメント |
| オープンフォーマット？ | はい |
| Webサイト | w3.org/TR/CSS/#css |
Cascading Style Sheets ( CSS ) は、HTMLやXML ( SVG、MathML、XHTMLなどの XML 方言を含む)などのマークアップ言語で記述されたドキュメントの表示とスタイルを指定するために使用されるスタイルシート言語です。 [ 2 ] CSS は、HTML やJavaScriptと並んで、ワールド ワイド ウェブの基盤となる技術です。[ 3 ]
CSS は、レイアウト、色、フォントなどのコンテンツとプレゼンテーションを分離できるように設計されています。[ 4 ]この分離により、コンテンツの表示を気にせずにコンテンツを作成できるため、コンテンツのアクセシビリティが向上します。また、表示特性の指定において、より柔軟性と制御性が向上します。さらに、関連する CSS を別の .css ファイルに指定することで、複数のWeb ページでフォーマットを共有できるようになり、構造コンテンツの複雑さと繰り返しが軽減されます。また、.css ファイルをキャッシュすることで、ファイルとそのフォーマットを共有するページ間のページ読み込み速度が向上します。
書式設定とコンテンツを分離することで、画面表示、印刷、音声（音声ベースのブラウザやスクリーンリーダー経由）、点字ベースの触覚デバイスなど、さまざまな表示方法に合わせて同じマークアップページを異なるスタイルで表示することが可能になります。CSSには、モバイルデバイスでコンテンツにアクセスする場合の代替書式設定のルールもあります。[ 5 ]
「カスケード」という名称は、プロパティの宣言が複数存在し、特定の要素に一致する場合に、どの宣言が適用されるかを決定するための優先順位付け方式に由来します。このカスケード優先順位付け方式は予測可能です。
CSSの仕様は、World Wide Web Consortium (W3C) によって維持されています。インターネットメディアタイプ ( MIMEタイプ)text/cssは、RFC 2318 (1998年3月) によりCSSで使用するために登録されています。W3Cは、CSSドキュメント用の無料のCSS検証サービスを提供しています。[ 6 ]
HTMLに加えて、XHTML、プレーンXML、SVG、XULなど、他のマークアップ言語もCSSの使用をサポートしています。CSSはGTKウィジェットツールキットでも使用されています。
CSSはシンプルな構文を持ち、様々なスタイルプロパティの名前を指定するために多数の英語のキーワードを使用します。
スタイルシートはルールのリストで構成されます。各ルールまたはルールセットは、1つ以上のセレクタと宣言ブロックで構成されます。
CSSでは、セレクタはマークアップ内のタグや属性を照合することで、スタイルを適用するマークアップの部分を宣言します。
選考担当者は、以下の項目に応募できます。
#id.classname（例：「CSSクラス」という表現は、時折使用されますが、誤称です。要素クラス（HTMLのclass属性で指定）は、ブラウザのCSSサブシステムとは異なるマークアップ機能であり、関連するW3C/WHATWG標準はドキュメントスタイルに関するものです。Webコンテンツモデルの「クラス」システムの起源については、RDFとマイクロフォーマットを参照してください）。クラスとIDは、大文字と小文字を区別し、アルファベットで始まり、英数字、ハイフン、アンダースコアを含めることができます。クラスは、任意の要素の任意の数のインスタンスに適用できます。IDは、単一の要素にのみ適用できます。
擬似クラスは、ドキュメントツリーに含まれていない情報に基づいて書式設定を可能にするために、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 ]
宣言ブロックは、セミコロンで区切られた宣言{}のリストを囲む一対の中括弧（）で構成されます。[ 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%。一部の単位cm(センチメートル)、in(インチ)、mm(ミリメートル)、pc(パイカ)、pt(ポイント) は絶対値であり、レンダリングされた寸法はページの構造に依存しません。その他の単位em( em )、ex( ex )、px(ピクセル)は相対値であり、親要素のフォント サイズなどの要因がレンダリングされた測定値に影響を与える可能性があります。これらの 8 つの単位は CSS 1 [ 15 ]の機能であり、その後のすべての改訂で保持されています。提案されている CSS 値と単位モジュール レベル 3 は、W3C 勧告として採用された場合、さらに 7 つの長さの単位 ( 、、、、、および )を提供します。[ 16 ]chQremvhvmaxvminvw
CSSが登場する以前は、HTMLドキュメントの表示属性のほぼすべてがHTMLマークアップ内に含まれていました。つまり、フォントの色、背景スタイル、要素の配置、境界線、サイズなど、すべての属性をHTML内で明示的に（しかも何度も）記述する必要がありました。CSSによって、これらの情報の多くをスタイルシートという別のファイルに移動できるようになり、HTMLが大幅に簡素化されました。さらに、レスポンシブウェブページにアクセスできるデバイスが増えるにつれて、さまざまな画面サイズやレイアウトが登場するようになりました。デバイスサイズごとにウェブサイトをカスタマイズするのはコストがかかり、ますます難しくなっています。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の真価がより明確になります。例えば、ドキュメントに次のスタイル要素が含まれているとします。
<style> h1 { color : red ; } </style>h1すると、ドキュメント内のすべての要素は、明示的なコードを記述することなく自動的に赤色になります。もし著者が後でh1要素を青色にしたい場合は、スタイル要素を次のように変更することで可能です。
<style> h1 { color : blue ; } </style>文書全体を一つずつ確認して、個々のh1要素の色を一つずつ変更していくという手間のかかる作業ではなく、より効率的な方法である。
スタイルは、以下に説明するように外部CSSファイルに配置し、次のような構文を使用して読み込むこともできます。
< link href = "path/to/file.css" rel = "stylesheet" type = "text/css" >これにより、スタイル設定がHTMLドキュメントからさらに分離され、共有の外部CSSファイルを編集するだけで複数のドキュメントのスタイルを変更することが可能になります。
CSS（Cascading Style Sheets）は、ブラウザのデフォルト設定、ユーザー設定、またはウェブデザイナーによって作成されたスタイルを使用して、ウェブコンテンツのスタイルを柔軟に適用できる方法です。これらのスタイルは、HTMLドキュメント内でインラインで適用することも、より一貫性を高めるために外部の.cssファイルを使用して適用することもできます。これにより、再利用性と保守性が向上し、ウェブ開発が簡素化されるだけでなく、スタイルを専用の.cssファイルにオフロードしてブラウザがキャッシュできるため、サイトのパフォーマンスも向上します。さらに、スタイルが読み込まれない場合や無効になっている場合でも、この分離によりコンテンツのアクセシビリティと可読性が維持され、障害のあるユーザーを含むすべてのユーザーがサイトを利用できることが保証されます。セレクタの特異性、ルールの順序、メディアタイプなどを考慮する多面的なアプローチにより、ウェブサイトはさまざまなデバイスやユーザーのニーズに合わせて視覚的に一貫性があり、適応性が高く、デザイン意図とユーザーアクセシビリティのバランスが取れています。
複数のスタイルシートをインポートできます。使用する出力デバイスに応じて異なるスタイルを適用できるため、例えば画面表示版と印刷版では大きく異なる表示になる場合があり、著者は各媒体に合わせて適切な表示に調整できます。
最も優先順位の高いスタイルシートがコンテンツの表示を制御します。最も優先順位の高いソースで設定されていない宣言は、ユーザーエージェントスタイルなどの優先順位の低いソースに渡されます。このプロセスはカスケードと呼ばれます。
CSSの目的の一つは、ユーザーが表示をより細かく制御できるようにすることです。赤い斜体の見出しが読みにくいと感じるユーザーは、別のスタイルシートを適用することができます。ブラウザやウェブサイトによっては、ユーザーはデザイナーが提供するさまざまなスタイルシートから選択したり、追加されたすべてのスタイルを削除してブラウザのデフォルトスタイルでサイトを表示したり、他の属性を変更せずに赤い斜体の見出しスタイルだけを上書きしたりすることができます。StylishやStylusといったブラウザ拡張機能は、このようなユーザー定義スタイルシートの管理を容易にするために開発されました。大規模なプロジェクトの場合、カスケード機能を使用することで、開発者が優先順位が競合するサードパーティ製スタイルを統合する際に、どのスタイルを優先するかを決定し、競合をさらに解決することができます。さらに、カスケード機能はテーマに基づいたデザインの作成にも役立ち、デザイナーは全体のレイアウトを損なうことなく、デザインの細部を調整することができます。
特異性とは、さまざまなルールの相対的な重みを指します。[ 18 ]複数のルールが適用可能な場合に、どのスタイルが要素に適用されるかを決定します。仕様に基づくと、単純なセレクタ（例：H1）の特異性は 1、クラスセレクタの特異性は 1,0、ID セレクタの特異性は 1,0,0 となります。特異性の値は 10 進数のように繰り越されないため、カンマを使用して「数字」を区切ります[ 19 ]（11 個の要素と 11 個のクラスを持つ CSS ルールの特異性は 11,11 となり、121 にはなりません）。
したがって、以下のルールのセレクタは、示された特異性をもたらします。
次の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 プロパティ値を継承できます。一般的に、子孫要素はテキスト関連のプロパティを継承しますが、ボックス関連のプロパティは継承しません。継承できるプロパティは、色、フォント、文字間隔、行の高さ、リスト スタイル、テキスト配置、テキスト インデント、テキスト変換、可視性、空白、および単語間隔です。継承できないプロパティは、背景、境界線、表示、フロートとクリア、高さ、幅、マージン、最小および最大高さと幅、アウトライン、オーバーフロー、パディング、位置、テキスト装飾、垂直方向の配置、および z-index です。
継承を利用することで、スタイルシート内で特定のプロパティを何度も宣言することを避け、CSSを簡潔に記述することができます。
CSS の継承は、クラスベースのプログラミング言語の継承とは異なります。クラスベースのプログラミング言語では、クラス B を「クラス A と同様だが、変更を加えたもの」として定義できます。[ 20 ] CSS では、 「クラス A と同様だが、変更を加えたもの」で要素をスタイル設定することは可能です。しかし、そのように CSSクラスBを定義することはできません。そのため、変更を繰り返すことなく複数の要素をスタイル設定するためにクラス B を使用することはできません。
以下のスタイルシートを前提とします。
p { color : blue ; }強調要素（ ）を含むap要素があると仮定します。<em>
<p> これは 継承を説明するためのものです</p>em要素に色が指定されていない場合、強調表示される単語「illustrate」は親要素であるp要素の色を継承します。スタイルシートpの色は青なので、em要素も同様に青になります。
これは継承を説明するものです
プロパティとセレクタ間の空白は無視されます。このコードスニペット：
body { overflow : hidden ; background : #000000 ; background-image : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : left top ; }これは、機能的にはこれと同等です。
body { overflow : hidden ; background-color : #000000 ; background-image : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : left top ; }CSS を読みやすくするための一般的な方法の 1 つは、各プロパティをインデントして、それぞれを別の行にすることです。CSS を読みやすくするためのフォーマットに加えて、コードをより速く記述するためにショートハンド プロパティを使用することもできます。これはレンダリング時にもより速く処理されます。[ 21 ]
body { overflow : hidden ; background : #000 url ( images/bg.gif ) no-repeat left top ; }場合によっては、複数のプロパティ値がそれぞれ別の行にインデントされて表示されることがあります。
@ font-face { font-family : 'Comic Sans' ; font-size : 20px ; src : url ( 'first.example.com' ), url ( 'second.example.com' ), url ( 'third.example.com' ), url ( 'fourth.example.com' ); }CSS 2.1では、3つの位置決め方式が定義されています。
プロパティには 5 つの値がありますposition。アイテムが 以外の方法で配置される場合static、オフセットと位置を指定するために、さらにプロパティtop、bottom、left、 が使用されます。位置が static の要素は、 、、 、プロパティrightの影響を受けません 。topbottomleftright
デフォルト値では、アイテムは通常の流れに配置されます。
アイテムは通常の流れの中に配置され、その後、その位置からずらしたり、オフセットしたりして配置されます。後続の流れのアイテムは、アイテムが移動されなかったかのように配置されます。
絶対位置を指定します。要素は、最も近い非静的な祖先要素を基準として配置されます。
文書の残りの部分がスクロールされていても、アイテムは画面上の固定位置に絶対的に配置されます[ 22 ]。
プロパティfloatには、次の 3 つの値のいずれかを指定できます。絶対位置指定または固定位置指定されたアイテムは、フローティングできません。他の要素は、プロパティによってフローティングが禁止されていない限り、通常はフローティングされたアイテムの周囲を回りますclear。
CSSは、1994年10月10日にHåkon Wium Lieによって初めて提案されました。[ 24 ]当時、LieはCERNでTim Berners-Leeと共同研究していました。[ 25 ]ウェブ用の他のスタイルシート言語も同時期にいくつか提案され、公開メーリングリストやWorld Wide Web Consortium内部での議論の結果、1996年に最初のW3C CSS勧告（CSS1）[ 26 ]がリリースされました。特に、 Bert Bosの提案は影響力があり、彼はCSS1の共同執筆者となり、CSSの共同作成者とみなされています。[ 27 ]
スタイルシートは、1980年代の標準汎用マークアップ言語（ SGML ）の登場以来、何らかの形で存在しており、CSSはウェブ用のスタイルシートを提供するために開発されました。 [ 28 ]ウェブスタイルシート言語の要件の1つは、スタイルシートがウェブ上のさまざまなソースから提供されることでした。そのため、DSSSLやFOSIのような既存のスタイルシート言語は適していませんでした。一方、CSSは、「カスケード」スタイルによって、ドキュメントのスタイルが複数のスタイルシートの影響を受けるようにしました。[ 28 ]
HTML が成長するにつれて、ウェブ開発者の要求を満たすために、より幅広いスタイルの機能が含まれるようになりました。この進化により、デザイナーはサイトの外観をより制御できるようになりましたが、HTML はより複雑になりました。ViolaWWW や WorldWideWeb などのウェブ ブラウザの実装のバリエーションにより、一貫したサイトの外観が難しくなり、ユーザーはウェブ コンテンツの表示方法をあまり制御できなくなりました。ティム バーナーズ＝リーが開発したブラウザ/エディタには、プログラムにハードコードされたスタイル シートがありました。そのため、スタイル シートをウェブ上のドキュメントにリンクすることはできませんでした。[ 25 ] CERN のロバート カイリョーは、構造と表示を分離して、異なるスタイル シートで印刷、画面ベースの表示、エディタの異なる表示を記述できるようにしたいと考えていました。[ 29 ]
ウェブの表示機能を向上させることは、ウェブコミュニティの多くの人々の関心事であり、www-style メーリングリストでは 9 種類のスタイルシート言語が提案されました。[ 28 ]これらの 9 つの提案のうち、特に CSS に影響を与えたのは、Cascading HTML Style Sheets [ 24 ]と Stream-based Style Sheet Proposal (SSP) の 2 つでした。[ 27 ] [ 30 ] 2 つのブラウザが最初の提案のテストベッドとして機能しました。Lie はYves Lafonと協力してDave RaggettのArenaブラウザに CSS を実装しました。[ 31 ] [ 32 ] [ 33 ] Bert Bos はArgoブラウザに独自の SSP 提案を実装しました。[ 27 ]その後、Lie と Bos は協力して CSS 標準を開発しました (これらのスタイルシートは HTML 以外のマークアップ言語にも適用できるため、名前から「H」が削除されました)。[ 25 ]
リーの提案は、1994 年にイリノイ州シカゴで開催された「 Mosaic and the Web 」会議 (後に WWW2 と呼ばれる) で発表され、1995 年にバート・ボスと共に再び発表されました。 [ 25 ]この頃、W3C はすでに設立され、CSS の開発に関心を持っていました。W3C は、スティーブン・ペンバートンが議長を務めるワークショップを組織しました。その結果、W3C は HTML 編集レビュー委員会 (ERB) の成果物に CSS に関する作業を追加しました。リーとボスは、このプロジェクトの側面における主要な技術スタッフであり、マイクロソフトのトーマス・リアドンを含む他のメンバーも参加しました。1996 年 8 月、ネットスケープコミュニケーション コーポレーションは、 JavaScript Style Sheets (JSSS)と呼ばれる代替スタイル シート言語を発表しました。[ 25 ]仕様は完成せず、非推奨となっています。[ 34 ] 1996 年末までに、CSS は公式になる準備が整い、12 月に CSS レベル 1 勧告が公開されました。
HTML、CSS、DOMの開発はすべて、HTML編集審査委員会（ERB）という一つのグループで行われていました。1997年初頭、ERBは3つのワーキンググループに分割されました。W3Cのダン・コノリーが議長を務めるHTMLワーキンググループ、 SoftQuadのローレン・ウッドが議長を務めるDOMワーキンググループ、そしてW3Cのクリス・リリーが議長を務める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 が実用的に採用されるのを妨げる多くのバグがありました。どの Web ブラウザも仕様のほぼ完全な実装を達成するまでには 3 年以上かかりました。2000年 3 月に出荷されたMacintosh版Internet Explorer 5.0は、完全な (99 % 以上) CSS 1 サポートを備えた最初のブラウザであり[ 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 解釈モード (「癖モード」) を導入しました。Microsoft 以外のブラウザもモード切り替え機能を提供していました。そのため、HTMLファイルの作成者は、CSSが標準に準拠して正しく解釈されることを意図していることを示すために、特別な「標準準拠CSSを意図しています」というマーカーをファイルに含める必要が生じました。これは、現在では廃止されたIE5/Windowsブラウザ向けに作成されたものではないことを示すためです。このマーカーがない場合、「互換モード」切り替え機能を備えたWebブラウザは、CSS標準に従うのではなく、Windows上のIE5のようにWebページ内のオブジェクトのサイズを調整します。
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ファイルを Compact Slide Show ファイルに.css変換するソフトウェア製品で使用されていたため、 [ 38 ] 一部の Web サーバーは、すべての[ 39 ]をではなくMIME タイプ[ 40 ]として配信していました。.cssapplication/x-pointplustext/css
個々のブラウザベンダーは、標準化や普遍化に先駆けて、時折新しいパラメータを導入しました。将来の実装との干渉を防ぐため、ベンダーはパラメータに固有の名前を付加しました。例えば、-moz-Mozilla FirefoxはApple Safariのブラウザエンジン-webkit-にちなんで名付けられ、Opera BrowserやMicrosoft Internet Explorer、そしてEdgeHTMLを使用する初期のMicrosoft Edgeなどがその例です。-o--ms-
-moz-radial-gradientベンダープレフィックス（など）が付いたパラメータは、-webkit-linear-gradientベンダープレフィックスが付いていないパラメータと比べて構文が若干異なる場合がある。[ 41 ]
プレフィックス付きプロパティは、標準化の時点では廃止されます。古いブラウザ用にプレフィックスを自動的に追加したり、プレフィックス付きパラメータの標準化されたバージョンを指摘したりするプログラムが利用可能です。プレフィックスはごく一部のブラウザに限定されているため、プレフィックスを削除することで、他のブラウザでもその機能を利用できるようになります。例外として-webkit-、ウェブ上で非常に一般的で永続的な廃止されたプレフィックス付きプロパティがあり、他のブラウザファミリーが互換性のためにそれらをサポートすることに決定しています。[ 42 ]
CSSにはさまざまなレベルとプロファイルがあります。CSSの各レベルは前のレベルに基づいて構築され、通常は新しい機能が追加され、一般的に CSS 1、CSS 2、CSS 3、CSS 4として表されます[ 43 ]。プロファイルは通常、特定のデバイスまたはユーザーインターフェイス用に構築された1つ以上のCSSレベルのサブセットです。現在、モバイルデバイス、プリンター、テレビ用のプロファイルがあります。プロファイルは、CSS 2で追加されたメディアタイプと混同しないでください。
公式のW3C勧告となった最初のCSS仕様は、1996年12月17日に公開されたCSSレベル1です。Håkon Wium LieとBert Bosがオリジナルの開発者としてクレジットされています。[ 44 ] [ 45 ]その機能には、以下のサポートが含まれます。
W3CはもはやCSS 1勧告を維持していません。[ 46 ]
CSS レベル 2 仕様は W3C によって開発され、1998 年 5 月に勧告として公開されました。CSS 1の上位セット である CSS 2 には、要素の絶対位置、相対位置、固定位置、z-indexなどの多くの新機能、メディア タイプの概念、音声スタイル シート (後に CSS 3 の音声モジュールに置き換えられました) [ 47 ]と双方向テキストのサポート、影などの新しいフォント プロパティが含まれています。
W3CはもはやCSS 2勧告を維持していません。[ 48 ]
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年に開始された。
さまざまな機能を定義する大規模な単一の仕様であるCSS 2 とは異なり、CSS 3 は「モジュール」と呼ばれる複数の個別のドキュメントに分かれています。各モジュールは、CSS 2 で定義された新しい機能を追加したり、機能を拡張したりして、後方互換性を維持します。CSS レベル 3 の作業は、最初の CSS 2 勧告の公開時期頃に始まりました 。最初の CSS 3 ドラフトは 1999 年 6 月に公開されました。[ 51 ]
モジュール化により、異なるモジュールは異なる安定性と状態を持つ。[ 52 ]
一部のモジュールは候補推奨（CR）ステータスであり、中程度の安定性があるとみなされています。CR段階では、実装ではベンダープレフィックスを削除することが推奨されます。[ 53 ]
CSS4 仕様は存在しません。[ 55 ] [ 56 ] CSS は独立してレベル付けされた多くの別々のモジュールに分割されているためです。
CSSレベル2を基に構築されたモジュールはレベル3から始まりました。その一部はすでにレベル4に達しているか、レベル5に近づいています。Flexbox [57] のようにまったく新しい機能を定義する他のモジュールはレベル1に指定されており、その一部はレベル2に近づいています。
CSSワーキンググループは、ブラウザ開発者が実装するのに十分な安定性があるとみなされるモジュール全体や他のドラフトの一部をまとめた「スナップショット」を公開することがあります。これまでに、2007年、[ 58 ] 2010年、[ 59 ] 2015年、[ 60 ] 2017年、[ 61 ]および2018年に、このような「ベストプラクティス」文書がノートとして5つ公開されています。 [ 62 ]
これらの仕様スナップショットは主に開発者を対象としているため、Can I Use... [ 63 ]や MDN Web Docs [ 64 ] などのサイトで既に文書化されている相互運用可能な実装の状態を示す、著者向けの同様のバージョン付き参照ドキュメントに対する需要が高まっています。このようなリソースについて議論し定義するために、2020 年初頭に W3C コミュニティ グループが設立されました。[ 65 ]実際のバージョン管理の方法も議論の対象となっているため、作成されたドキュメントが「CSS4」と呼ばれるとは限りません。
各ウェブ ブラウザはレイアウト エンジンを使用してウェブ ページをレンダリングしますが、CSS 機能のサポートはブラウザ間で一貫していません。ブラウザは CSS を完全に解析しないため、回避策 (一般にCSS ハックまたは CSS フィルタとして知られています) を使用して特定のブラウザをターゲットとする複数のコーディング テクニックが開発されています。主要なブラウザでサポートが不足しているため、CSS の新しい機能の採用が妨げられることがあります。たとえば、Internet Explorer は多くの CSS 3 機能のサポートを追加するのが遅く、これらの機能の採用が遅れ、開発者の間でのブラウザの評判を損ないました。さらに、filter一部のバージョンでは、ベンダープレフィックスのないプロパティに独自の構文が使用されていました。[ 66 ]ユーザーに一貫したエクスペリエンスを保証するために、ウェブ開発者は多くの場合、複数のオペレーティングシステム、ブラウザ、およびブラウザ バージョンでサイトをテストし、開発時間と複雑さを増大させています。BrowserStackなどのツールは、これらの環境の保守の複雑さを軽減するために構築されています。
これらのテストツールに加えて、CanIUseやMDN Web Docsなど、多くのサイトが特定の CSS プロパティのブラウザ サポートの一覧を維持しています。さらに、CSS 3 では機能クエリが定義されており、@supports開発者が CSS 内で特定の機能をサポートするブラウザを直接ターゲットにできるディレクティブが提供されます。[ 67 ]古いブラウザでサポートされていない CSS は、ブラウザの動作を一貫して行うように設計された JavaScript コードである JavaScriptポリフィルを使用してパッチを適用することもできます。これらの回避策とフォールバック機能のサポートの必要性により、開発プロジェクトが複雑になる可能性があるため、企業はサポートするブラウザ バージョンとサポートしないブラウザ バージョンの一覧を定義することがよくあります。
ウェブサイトが古いブラウザと互換性のない新しいコード標準を採用すると、これらのブラウザはウェブ上の多くのリソースにアクセスできなくなる可能性があります（意図的にアクセスできなくなる場合もあります）。[ 68 ]しかし、インターネット上で最も人気のあるサイトの多くは、CSS のサポートが不十分なために古いブラウザで視覚的に劣化するだけでなく、JavaScript やその他のウェブ技術の進化により、まったく機能しなくなります。
現在のCSSの機能における注目すべき制限事項には、以下のようなものがある。
z-indexなどのプロパティのスコープ規則は、`<script>`position: absoluteまたは`<script>`position: relative宣言を持つ最も近い親要素を探します。この奇妙な結合は望ましくない影響をもたらします。たとえば、要素の位置を調整する必要がある場合、新しいスコープを宣言することを避けることは不可能であり、親要素の目的のスコープを使用できなくなります。
CSS は、代替スタイルを条件付きで適用することで、ある程度のユーザー フィードバックを可能にする擬似クラスを実装しています。CSS の擬似クラスの 1 つである "は動的であり (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フレームワークは、Cascading Style Sheets言語を使用してWebページのスタイリングをより簡単かつ標準に準拠したものにするためのライブラリです。CSSフレームワークには、 Blueprint、Bootstrap、Foundation、Materializeなどがあります。プログラミング言語やスクリプト言語のライブラリと同様に、CSSフレームワークは通常、HTMLで参照される外部の.cssシートとして組み込まれます。これらは、Webページのデザインとレイアウトのための既製のオプションを多数提供します。これらのフレームワークの多くは公開されていますが、一部の著者は主に迅速なプロトタイピングや学習のためにこれらを使用し、サイトのスタイリングに多くの未使用機能が含まれることによるデザイン、メンテナンス、ダウンロードのオーバーヘッドなしに、公開する各サイトに適したCSSを「手作業で作成」することを好みます。[ 72 ]<head>
プロジェクトで使用される CSS リソースのサイズが大きくなるにつれて、開発チームはそれらを整理するために共通の設計方法を決定する必要が生じることがよくあります。目標は、開発の容易さ、開発中のコラボレーションの容易さ、およびブラウザで展開されたスタイルシートのパフォーマンスです。一般的な方法には、OOCSS (オブジェクト指向 CSS)、ACSS (アトミック CSS)、CSS (オーガニック カスケード スタイル シート)、SMACSS (CSS のスケーラブルでモジュール化されたアーキテクチャ)、および BEM (ブロック、要素、修飾子) があります。[ 73 ]
JavaScript は、すべての Web 開発者が習得しなければならない 3 つの技術のうちの 1 つです。HTML は Web ページのコンテンツを指定するためのもので、CSS は Web ページの表示を指定するためのもので、JavaScript は Web ページの動作を指定するためのものです。
