CSSとは

docs.scrimba.com

よく作られたWebサイトを開いて、CSSを取り除くと、白い背景に黒いテキストの長い列が残ります。見出し、段落、リンクが順番に積み重ねられ、完全にスタイル付けされていない状態です。その素の列があなたのHTMLです。ページを設計されたものに見せるすべてのもの、色、余白、フォント、段組み、カード、ナビゲーションバーは、すべてCSSです。この章は、その2番目の言語が何であり、どのように最初の言語と共に機能するかについてです。

CSSを適用する前後のページ

CSSは**Cascading Style Sheets**（カスケーディング スタイル シート）の略です。重要な部分は「スタイル」です。CSSはページの見た目を説明する方法です。HTMLは「これは見出しです、これは段落です、これはボタンです」と言います。CSSは「見出しを大きく濃い青色にし、ボタンに余白と角丸を追加して」と言います。

HTMLを部屋の内容、家具とその配置と考え、CSSを塗料、照明、家具の配置と考えてください。同じ部屋ですが、一方は素っぱだし、もう一方は居たいと思う場所です。CSSはHTMLの部分を指し示して、見た目を変える個別のルールで記述します。

CSSはWebページの**プレゼンテーション**レイヤーです。HTMLは構造と意味を提供します。CSSはその構造を読み込んで、どのようにレンダリングすべきかを説明します。色、タイポグラフィ、余白、サイズ、レイアウトです。この2つは別々に記述されるように設計されており、同じHTMLを完全に異なるCSSに置き換えることで異なるスタイルにすることができ、1つのスタイルシートで1000ページを一度にスタイル付けできます。

その分離が重要です。コンテンツがHTMLに、プレゼンテーションがCSSにある場合、マークアップに触れずにサイトを再設計でき、すべてのページを編集する代わりに1つの共有スタイルシートを変更できます。最初のルールから2つを分けておく習慣は、身に付ける価値があります。

CSSはプレゼンテーションレイヤーで、ブラウザはレンダリングの別個の段階として適用します。HTMLを**DOM**（Document Object Model、ブラウザがマークアップから構築する要素のライブツリー）に解析し、CSSをルールのセットに解析し、ルールを要素とマッチングして各要素の最終スタイルを計算します。CSSはDOMツリーを変更しません。それを装飾するだけです。

このステージングされたモデルが、原則だけではなく実践において関心の分離が成り立つ理由です。意味がHTMLに完全に含まれているページは、上品に低下します。CSSの読み込みに失敗した場合でも、コンテンツはそこにあり、順番が変わりません。構造とプレゼンテーションが絡み合っていなかったからです。また、HTMLに変更を加えることなく、同じマークアップがライトテーマとダークテーマを持つこと、または印刷レイアウトとスクリーンレイアウトを持つことができるのもこのためです。プレゼンテーションは、コンテンツに焼き込まれたプロパティではなく、添付するレイヤーです。

h1 {
  color: navy;
  font-size: 2rem;
}

これは単一のCSSルールです。ページのすべての<h1>見出しを見つけ、それを紺色にしてより大きくします。HTMLはまったく変わりません。その見た目だけが変わります。

JunoCSSを適用する前後のページ HTMLはコンテンツ、CSSは見た目です。ページの部分を指し示すルールを記述して、見出しを大きく青くするなど、見た目を変えます。ページの下層は変わりません。表示される方法だけが変わります。その分割が全体の考え方です。

JunoCSSを適用する前後のページ CSSはプレゼンテーション、HTMLは構造で、意図的に分けられています。CSSを再スタイル化すると、同じマークアップはまったく異なる見た目になります。1つのスタイルシートを共有すると、すべてのページをスタイル付けします。最初のルールからコンテンツとプレゼンテーションを分けておく習慣を身に付けてください。

JunoCSSを適用する前後のページ ブラウザはHTMLをDOMに解析し、CSSをルールに解析し、各要素のスタイルを計算します。CSSはツリーを装飾します。ツリーを書き直すことはありません。このステージングモデルが、意味がHTMLにあるページがCSSの読み込みに失敗した場合でも機能する理由です。プレゼンテーションはコンテンツに焼き込まれたものではなく、添付するレイヤーです。

CSSがHTMLを指す方法

CSSはページの適切な部分を見つけることができるまで、役に立ちません。それは**セレクタ**で行います。ルールの開始部分で、スタイル設定する対象に名前を付けます。上記のルールでは、h1はセレクタであり、「すべてのh1見出し」を意味します。

通常は、HTMLで要素にclassを付与し、CSSからそのクラスを指定して、要素をターゲットにします。クラスはあなたが選ぶラベルです。

<button class="buy-button">今すぐ購入</button>

.buy-button {
  background-color: teal;
  color: white;
}

.buy-buttonセレクタは、そのクラスを持つ要素を見つけてスタイル付けします。後で多くの種類のセレクタに会うでしょう。クラスが最も使うセレクタです。

CSSルールは2つの部分で構成されています。マッチする要素を説明するセレクタと、スタイル付けする方法を説明する宣言ブロックです。セレクタはCSSがDOMに到達して、スタイルを適用する要素を選ぶ方法です。要素タイプ（h1）、クラス（.buy-button）、id、関係など、多くの方法でセレクタを選択できます。

<button class="buy-button">今すぐ購入</button>

.buy-button {
  background-color: teal;
  color: white;
}

実際には、クラスはidや要素タイプより設定する機会がはるかに多いです。クラスは再利用可能で、組み込みの特異性の問題がないからです。セレクタの章は、全範囲と各セレクタが正しい選択肢である時期についてカバーしています。

セレクタはCSSのクエリ言語です。各セレクタはブラウザがすべての要素に対してテストするパターンで、どのルールが適用されるかを決定します。そのマッチングは無料ではなく、**特異性**と相互作用します（ブラウザが複数のルールが同じ要素に同じプロパティを設定するときにタイを解くために割り当てる重み）。クラスは要素タイプより重みがあります。idはクラスより重みがあります。インラインスタイルはそれより重いです。

.buy-button {
  background-color: teal;
  color: white;
}

実践的な結果として、どのようにセレクタを選ぶか、それはターゲッティングだけではなく、デザイン判断です。すべてをidと深くネストされたセレクタで選ぶことは、後のルールがオーバーライドするのが困難になる特異性を構築します。これがスタイルシートが石化する方法です。平坦でクラスベースのセレクタは特異性を低く予測可能に保ち、これがほぼすべてのスケーラブルなCSSアプローチがクラスに基づいている理由です。セレクタの章は特異性を適切に分解します。

JunoCSSがHTMLを指す方法 セレクタは、ルールの一部でスタイル付けする対象を説明します。始めるのに最も使いやすいのはクラスです。HTMLで要素にclass="name"を置き、CSSで.nameをスタイル付けします。今のところ他の種類のことは心配しないでください。クラスが長い道のりを行きます。

JunoCSSがHTMLを指す方法 すべてのルールはDOM内の要素とマッチするセレクタで始まり、タイプ、クラス、id、または関係でマッチできます。デフォルトではクラスに到達してください。クラスは再利用可能で、特異性を管理しやすいままにします。セレクタの章に完全なツールキットがあります。

JunoCSSがHTMLを指す方法 セレクタはクエリ言語で、各セレクタはルールが衝突したときに誰が勝つかを決定する特異性の重みを持ちます。idはクラスより上、クラスはタイプより上、インラインはすべてより上です。セレクタの選択は保守性の判断なので、それを平坦でクラスベースに保ち、特異性があなたのスタイルシートを石化するのを防いでください。特異性はセレクタの章で詳しく説明されています。

「カスケーディング」の意味

Cascading Style Sheetsの最初の単語は、人々がスキップするものですが、多くを説明します。複数のルールが同じ要素に適用でき、意見が異なる可能性があります。1つのルールは段落が灰色であると言い、別のルールはこの特定の段落が黒であると言っているかもしれません。**カスケード**は、ブラウザがどちらが勝つかを決定するために使用するルールのセットです。

ほとんどの場合、1つのことに要約されます。2つのルールが等しく特異的である場合、後で記述されたルールが勝ちます。今のところ全体像が必要ありません。スタイルが期待どおりに表示されない場合、CSSが壊れているのではなく、別のルールがそれを負かしているのが通常です。

カスケードは、複数のルールが同じ要素をターゲットにし、同じプロパティを設定するときに競合を解決するアルゴリズムです。いくつかのことを順番に重み付けします。ルールが来た場所、セレクタの特異性、そして最終的なタイブレーカーとして、ソース順（後が勝ち）です。2つのルールが等しく特異的である場合、最後に宣言されたルールが勝ちます。

これはほとんどの「CSSが機能しない理由」の瞬間の仕組みです。スタイルが適用されます。それはより高くランク付けされるルールによってオーバーライドされています。カスケードを正しく読むことは、変更を強制するためにより多くのルールを積み重ねることではなく、CSSと戦うことからCSSを指示することへの習慣を分ける1つです。完全な解決順序については、CSSがどのように機能するかの章を参照してください。

カスケードはCSSの競合解決アルゴリズムで、その順序を知ることはほとんどのスタイルバグを謎から検索に変えます。競合する宣言を、順番に：オリジンと重要性（作者スタイル対ブラウザのデフォルト対!important）、次に特異性（セレクタの重み）、次にソース順（後のルールが最終的なタイを勝つ）で解決します。

本番規模でこれが重要な理由は、記述するすべてのオーバーライドがその順位での動きだからです。!importantまたはidに到達して競合に勝つことは、同じ要素に触れる必要がある将来のすべてのルールのバーを上げ、それらの増加は誰も安全に変更できないスタイルシートに複合化します。耐久的な修正はほぼ常に、ここで特異性を上げるのではなく、他の場所で特異性を下げることです。モダンCSSは、特異性の軍拡競争なしにカスケード制御を与えるツール、カスケードレイヤーなどを追加します。CSSの整理とスケーリングの章がカバーしています。完全な解決順序については、CSSがどのように機能するかを参照してください。

Junoカスケーディングの意味 カスケーディングは、複数のルールが同じ要素に適用でき、カスケードがどちらが勝つかを決定することを意味します。日常版：2つのルールが等しく特異的な場合、後者が勝ちます。したがって、スタイルが表示されていない場合、別のルールがそれを負かした可能性があります。それが不可解なことを見つけるのをやめるのに時間がかかりました。

Junoカスケーディングの意味 カスケードはオリジンで競合を解決し、次に特異性、次にソース順で解決します。後のルールが等しいタイを勝ちます。ほとんどの「CSSが機能していない」という瞬間はバグではなく、オーバーライドです。ルールが失った理由を読むことを学ぶことが、それを強制するためにより多くのルールを積み重ねる代わりに、CSSが戦いのように感じるのをやめます。

Junoカスケーディングの意味 競合は、オリジンと重要性で、その後特異性、その後ソース順で解決されます。記述するすべてのオーバーライドはその順位での動きなので、!importantまたはidで勝つことは、それの後のすべてのルールのバーを上げます。耐久的な修正は、ここで特異性を上げるのではなく、他の場所で下げることです。カスケードレイヤーは軍拡競争なしに制御を与えます。

ここからCSSがどこへ行くか

CSSはその核にある小さな言語です。セレクタと思いのままのプロパティと値のペアです。しかし、それは長い道のりに到達します。要素を対象にしてプロパティを設定できるようになったら、このハンドブックの残りは価値のあるプロパティと、その上に構築されたシステムについてです。ボックスモデルは間隔とサイズを制御し、次に色とタイプ、そしてレイアウトツール、フレックスボックスとグリッド、ページ全体を配置します。

次の章はCSSがどのように機能するかで、この章で導入した仕組みに関する具体的な情報です。ページにCSSを添付する3つの方法、ルールの正確な構造、およびカスケードと継承がすべての要素の最終的な見た目をどのように決定するかです。