11.1 カスケーディング (Cascading)
CSSの基本原則は、カスケーディング、継承、特異性を含んでるよ。これらの原則を理解すると、ウェブページのスタイルや外観をより良くコントロールできるようになるんだ。
カスケーディング (Cascading)
カスケーディングはCSSの基本原則で、複数のルールが衝突したときにスタイルを適用する方法を定めてるんだ。ブラウザは次のルールを使って、衝突を解決するよ：
- ソースの順序: スタイルは異なる場所に定義できるよ — 外部スタイルシート（CSSファイル）、内部スタイルシート（
<style>タグ内）やインラインスタイル（HTML要素のstyle属性内）。ルールは出現順に適用されるんだ。 - 特異性: 各セレクタにはその特異性レベルがあるんだ。特異性が高いセレクタほど優先度が高いんだ。
- 重要性 (Importance):
!importantディレクティブのあるルールは、最も高い優先度を持ち、他の衝突するルールがあっても適用されるんだ。
カスケーディングの例:
この例では、背景色は黄色になるんだ。なぜならインラインスタイルが内部スタイルより優先されるから。テキストの色は赤になるよ、これもインラインスタイルが優先されるからね。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSのカスケーディング例</title>
<style>
body {
background-color: lightblue; /* 内部スタイル */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- インラインスタイル -->
<p style="color: red;">CSSのカスケーディング例</p>
</body>
</html>
11.2 継承 (Inheritance)
継承は、子要素がその親要素のスタイルを受け継ぐプロセスだよ。すべてのCSSプロパティが継承されるわけじゃないけどね。継承されるプロパティには、テキストの色やフォントファミリー、行間隔などいくつかが含まれるんだ。
継承の例:
この例では、<p>要素は<body>要素からフォントと色を継承し、フォントサイズはクラス.containerから継承するんだ。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSの継承例</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>このテキストはbodyからフォントと色を継承し、フォントサイズは".container"から継承するんだ。</p>
</div>
</body>
</html>
11.3 特異性 (Specificity)
特異性は、複数のルールが同じ要素に一致する場合、どのCSSルールがその要素に適用されるかを決定するんだ。特異性は、ルール内のセレクタの数と種類に基づいて計算されるよ。
特異性の計算ルール:
- インラインスタイル (inline styles) は最も高い特異性を持っているよ
- IDセレクタ (selectors by ID) はクラス、疑似クラス、属性よりも高い特異性を持つよ
- クラス、疑似クラス、属性は要素、疑似要素よりも高い特異性を持つんだ
- 要素、疑似要素は最も低い特異性を持つよ
特異性の計算例:
この例では、#uniqueセレクタが最高の特異性を持っているので、テキストは赤色になるんだ。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSの特異性例</title>
<style>
p {
color: blue; /* 特異性 0-0-0-1 */
}
.highlight {
color: green; /* 特異性 0-0-1-0 */
}
#unique {
color: red; /* 特異性 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">このテキストは赤色になるよ。</p>
</body>
</html>
11.4 重要性 (Importance)
CSSでは、!importantディレクティブを使用して、スタイルの優先順位を明示的に指定できるんだ。このディレクティブがあるルールは、他のルールの特異性に関係なく適用されるんだよ。
!importantの使用例:
この例では、テキストが青色になるよ。なぜなら、!important付きのルールが最優先になるから。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSの!importantの例</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">このテキストは"!important"のおかげで青色になるよ。</p>
</body>
</html>
11.5 CSSの原則の使用例
実際のタスクでのCSSの原則の使用例だよ。
カスケーディングと特異性の例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSのカスケーディングと特異性の例</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">このテキストは赤色になるよ、なぜなら.importantは"p"より高い特異性を持っているからね。</p>
</body>
</html>
継承と特異性の例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSの継承と特異性の例</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* bodyからの色をすべての子要素で上書きするよ */
}
.highlight {
color: red; /* .container より高い特異性を持っているよ */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">このテキストは.redクラスの特異性のおかげで赤色になるんだ。</p>
</div>
</body>
</html>
GO TO FULL VERSION