CSS 【実務・中級編】 first-child擬似クラスの適用条件 – CSS実践ガイド
`:first-child`の「罠」と「本質」：中級者が陥るCSSセレクタの解像度CSSを書き始めて数年、誰もが一度は「あれ、なんで効かないんだ？」と頭を抱えた経験があるはずだ。特に `:first-child` は、その名前の直感的な分か...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【実務・中級編】 プロパティの継承と詳細度 – CSS実践ガイド
CSSの「継承」と「詳細度」：なぜ君の書いたスタイルは反映されないのか？現場でCSSを書いていると、一度は必ず遭遇する「あれ、スタイルが当たらないぞ？」という怪奇現象。デベロッパーツールを開いて、打ち消し線だらけのスタイルシートを睨みつけ、...
CSS 【実務・中級編】 カスケードの順序と競合解決 – CSS実践ガイド
CSSの「負け戦」を終わらせる：カスケードと詳細度の深淵現場でCSSを書いていて、「なぜか色が反映されない」「`!important` を足したら解決した（けど心が痛い）」という経験、一度や二度じゃないはずだ。中級レベルに差し掛かると、CS...
CSS 【実務・中級編】 !importantの役割と優先度 – CSS実践ガイド
CSSの「禁じ手」とどう付き合うか：`!important`の正体と実務での正しい立ち回り現場で開発をしていると、どうしても「なぜかスタイルが当たらない」という壁にぶつかることがある。CSSの詳細度（Specificity）の計算をミスした...
CSS 【実務・中級編】 インラインスタイルの優先度 – CSS実践ガイド
インラインスタイルという名の「禁じ手」――なぜCSSの優先順位は崩壊するのか現場でコードをレビューしていると、たまに出くわすんだ。「なんでこのスタイルが当たらないんだ！」と頭を抱える若手が。調査してみると、原因は決まってHTMLの`styl...
CSS 【実務・中級編】 詳細度（Specificity）の計算ルール – CSS実践ガイド
やあ。今日もCSSと格闘しているかな？フロントエンド開発の現場で「なぜかスタイルが当たらない」「意図した見た目にならない」という現象に遭遇したとき、多くのエンジニアはまずデベロッパーツールを開いて、打ち消されているプロパティを眺める。そして...
CSS 【実務・中級編】 フォーカス可視擬似クラス :focus-visible – CSS実践ガイド
「とりあえず `outline: none;` しておけばデザイン崩れないだろ？」……もし後輩がコードレビューでそんなことを言っていたら、私はその場でPCを閉じさせるかもしれない。フロントエンドの現場において、アクセシビリティとデザインのバ...
CSS 【実務・中級編】 フォーカス内擬似クラス :focus-within – CSS実践ガイド
やあ。現場でCSSと格闘している君たちへ。フロントエンドの現場では、ボタンや入力フォームのUIを触っていると、「子要素にフォーカスが当たった瞬間に、親要素全体をハイライトさせたい」という欲求に駆られることがよくあるよね。そんな時、昔ならJa...
CSS 【実務・中級編】 チェック状態擬似クラス :checked – CSS実践ガイド
CSSの「:checked」を使いこなす：状態管理をDOMからスタイルへ解放せよフロントエンドの世界で、僕らが最も頭を悩ませるのが「状態」の管理だ。ボタンを押したらメニューが開く、選択したら色が変わる。これらをいちいちJavaScriptで...
CSS 【実務・中級編】 無効状態擬似クラス :disabled – CSS実践ガイド
CSSの「無効状態」を極める：`:disabled` 擬似クラスの背後にある哲学と実装術やあ。フロントエンドの現場で日々CSSと格闘している君たちへ。今日は、誰もが一度は触れるはずの `:disabled` 擬似クラスについて話をしよう。単...