「個人研究ノート13」
継承
- スタイルの継承。要素に設定したスタイルは、子孫要素にも適用されます。
- 継承は、祖先の連続する世代の間で発生します。
- 継承された設計は、開発を容易にするためのものです。
- 継承を使用すると、いくつかの共通のスタイルを共通の祖先要素に均一に設定できます。これは一度だけ設定する必要があるので、すべての要素がこのスタイルになります。
- 注：背景やレイアウト関連など、すべてのスタイルが継承されるわけではありません。これらのスタイルは継承されません。
セレクターの重量
スタイルの競合
異なるセレクターで同じ要素を選択し、同じスタイルに異なる値を設定すると、スタイルの競合が発生します。
スタイルの競合が発生した場合、どのスタイルが適用されるかは、セレクターの重み（優先度）によって決まります。
セレクターの重量
| セレクタ | 優先度 |
|---|---|
| インラインスタイル | 1,0,0,0 |
| IDセレクター | 0,1,0,0 |
| クラスおよび疑似クラスセレクター | 0,0,1,0 |
| 要素セレクター | 0,0,0,1 |
| ワイルドカードセレクター | 0,0,0,0 |
| 継承されたスタイル | 優先順位なし |
- 優先度を比較する場合は、すべてのセレクターの優先度を合計する必要があります。最後に、優先度が高いほど、表示される優先度が高くなり（グループセレクターは計算されません）、セレクターの累積は最大値を超えません。大きさのオーダーでは、クラスセレクターはIDセレクターより高くなりません。
- スタイルの後に！importantを追加すると、インラインスタイルを超えても、このスタイルが最優先されます。（注：開発中は注意して使用してください。変更するのは便利ではありません）
ピクセルとパーセンテージ
長さの単位：
- ピクセル
ディスプレイは実際には小さなドットで構成されています。
画面ごとにピクセルサイズが異なります。ピクセルが小さいほど、画面表示効果が鮮明になります。
したがって、同じ200pxの表示効果はデバイスごとに異なります。
- パーセンテージ
親要素の属性に対するパーセンテージとして属性値を設定することもできます。
パーセンテージを設定すると、子要素が親要素の変更に追従するようになります。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 200px;
background-color: blue;
}
.box2 {
height: 50%;
/* 宽和高为box1的一半 */
width: 50%;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
結果を表示：
emとrem
これら2つも長さの単位です。
- に
emは、要素のフォントサイズを基準にして計算されます。
1em = 1font-size
emは、フォントサイズに応じて変化します。
- レム
Remは、ルート要素のフォントサイズを基準にして計算されます。
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
font-size: 2px;
height: 200em;
width: 200em;
background-color: blue;
}
.box2 {
font-size: 1px;
height: 200em;
width: 200em;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
結果を表示します。
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 1px;
}
.box1 {
height: 200rem;
width: 200rem;
background-color: blue;
}
.box2 {
height: 100rem;
width: 100rem;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
結果を表示：
RGB値
カラーユニット：
- 色名を直接使用して、CSSでさまざまな色を設定できます。
- 例：赤、オレンジ、黄色、青、緑、ピンクなど。
- ただし、CSSで直接色名を使用するのは非常に不便です。
RGB値：
- RGBは、3色の異なる濃度で、異なる色のR赤、G緑、B青を混合することです。
- 各色の範囲は0〜255（0％〜100％）です。
- 構文：RGB（赤、緑、青）
RGBA：
- RGA値に基づいて不透明度を示すためにaを追加することです。
- 4つの値が必要です。最初の3つはrgbと同じで、4つ目は不透明度を表します。
- 1は完全に不透明であることを意味します0は完全に透明であることを意味します0.5は半透明を意味します。
16進数のRGB値
- 構文：#red green blue
- 色密度範囲00-ff
- 色が2
桁で繰り返される場合は、省略可能#aabbcc省略可能#abc
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: red;
}
.box2 {
height: 100px;
width: 100px;
background-color: rgb(0, 255, 0);
}
.box3 {
height: 50px;
width: 100px;
background-color: rgba(0, 255, 0, .5);
}
.box4 {
height: 100px;
width: 100px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
結果は次のことを示しています。
HSL値HSLA値
- 色相（0-360）
- S飽和、色密度は0％-100％
- L輝度、色輝度0％-100％
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: hsl(88, 40%, 50%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
説明は次のとおりです。
