MDN css Reference 読み
suiran本日からZennのscrapにメモの記録を取ろうと思う。
Zenn初心者です。
suiran
◎セレクターを結合した場合に間違った文法を含んでいるとルール全体が無視される。
(-> TODO: chromeのdevelopツールではどういう表示になるのか？)
セレクターの完全なリストについては、 CSS セレクターリファレンスを参照してください
(-> pending)
suiran
要素型セレクターは大文字小文字の区別がありません
(-> NEW: )
「スタイルシートのリセット」
(-> TODO: リセットcssについて)
article *:first-child {
font-weight: bold;
}
どちらもやることは同じですが、読みやすさは格段に向上しています。
(-> TIPS: )
ID セレクター
(-> TODO: stylelintとかのツールで、重複を検出できる方法はあるのか?また、一覧出力の方法はあるのか)
ID セレクターの詳細度が高いので、 ID の代わりに要素にクラスを追加することが推奨されます。もし ID を使用することだけが要素を対象とする唯一の方法である場合、おそらくマークアップにアクセスすることができず、編集することができないため、属性セレクターの中で ID を使用すること、例えば p[id="header"] のようにすることを検討してください。
(-> TIPS )
suiran
属性値を大文字小文字を区別せずに照合したい場合は、閉じ括弧の前に値 i を使うことができます。
li[class^="a" i] {
color: red;
}
(-> NEW: )
suiran
擬似クラスは、あたかも文書内の一部にクラスを適用したかのように動作する傾向があり、マークアップ内の余分なクラスを削減することを支援していただくことが多く、より柔軟で保守性の高いコードを提供します。
(-> どう便利なのか、納得した。)
:first-child は *:first-child と等価
(-> NEW: )
最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の擬似要素に対応しています。
(-> NEW: )
article p::first-line {
font-size: 120%;
font-weight: bold;
}
それはまるで最初の整形された行を <span> で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。
(-> そういわれると、便利だなあ、と実感する。)
CSS からテキストを挿入することは、ウェブ上で実に多く使用することではありません。なぜなら、そのテキストはスクリーンリーダーによってはアクセスできず、将来誰かが見つけて編集するのが難しくなるからです。
(-> アクセシビリティの話。。)
(-> TODO: アクセシビリティについて)
suiran
次兄弟結合子 (next-sibling combinator, +)
もし <h1> と <p> の間に <h2> のような他の要素を挿入すると、段落はセレクターに一致しなくなり、要素が隣接しているときに適用される背景色と前景色が適用されなくなります。
(-> WARN: )
--
CSS 入れ子モジュールにより、結合子を使って複雑なセレクターを作るルールを書くことができます。
p {
~ img {
}
}
/* ブラウザーは次のように解釈します。 */
p ~ img {
}
(-> NEW: )
(-> TODO: 入れ子モジュールについて)
& 入れ子セレクター
p {
& img {
}
}
/* ブラウザーは次のように解釈します。 */
p img {
}
(-> NEW: )
(-> TODO: ブラウザ対応状況。学習。)
結合子の知識は、文書内の何かをスタイル設定する必要があるときに、おそらく CMS によって生成された HTML にアクセスすることができない場合に、とても有益なものになるでしょう。
(-> なるほど。)
(-> スキルテストとかがあったが、とりあえず全体に目を通してから、実際のお試しをやる予定。
実際の動作確認については、vscodeのfiveserverでつまみぐいしながら読んでいる。
suiran
スタイルシートのカスケードは、とてもシンプルに考えるなら、これは発生元と、カスケードレイヤーと、CSS ルールの順序によるということです。同じカスケードレイヤーからの 2 つのルールが適用されており、どちらも詳細度が同じである場合、スタイルシートで最後に定義されたものが使用されます。
(-> よくわからん。。まじめに取り組んだことがなかった。。)
属性セレクターと擬似クラスは、クラスと同じ重みを持ちます。
(-> NEW: )
initial
選択した要素に適用されるプロパティ値を、そのプロパティの初期値に設定します。
とりあえずここまで
[20240826T1900 再開]
revert は、リセットした要素の子に適用されているルールには影響しません（ただし、子に対する親のルールの効果は除去されます）。
(-> 妥当)
以下の例では、グローバルスタイルシートで独自の font-weight を設定していますが、 HTML 文書のインラインで revert および unset を適用しようとしています。 revert キーワードはテキストを太字に戻します。これはほとんどのブラウザーで見出しの既定値だからです。 unset キーワードは、継承されたプロパティとして、 font-weight の値を本体から継承するため、テキストを通常のままにします。
<h3 style="font-weight: revert; color: revert;">
これは元の font-weight (bold) と color: black です
</h3>
<p>いくらかのテキスト</p>
<h3 style="font-weight: unset; color: unset;">
これは font-weight: normal ですが、 color: black になります
</h3>
<p>いくらかのテキスト</p>
h3 {
font-weight: normal;
color: blue;
}
(-> TODO: revertの詳細確認)
(->これらのリセット系のユニバーサルプロパティを使用してもし自分がリセットcssを作るとしたら、@layerとrevert-layerを使いたくなった。でも、ちゃんと理解できている自信がない。特にrevertが難しかった。実際にコードをいじって理解を深めたくなった。)