CSS 【実務・中級編】 :empty 擬似クラス – CSS実践ガイド
`:empty`擬似クラスの「嘘」と「真実」：現場でハマらないための実践的知見現場でコードをレビューしていると、たまに見かけるのが「この要素、空っぽなのにCSSが効いていない（あるいは効きすぎている）」という相談だ。特に`:empty`擬似...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【実務・中級編】 :not() 擬似クラス – CSS実践ガイド
CSSの「否定」を制する者は、DOMの複雑さを制す：`:not()` 擬似クラスの極意やあ。現場でCSSと格闘していると、時々どうしようもなく「あぁ、これ以外の全部にスタイルを当てたいんだよ！」と叫びたくなる瞬間があるだろう？例えば、リスト...
CSS 【実務・中級編】 :has() 擬似クラス（親セレクタ） – CSS実践ガイド
CSSの歴史を塗り替えた「:has()」という革命。もうJSでクラスを付け替える必要はない。やあ。フロントエンドの現場で「あ、これ親要素にスタイル当てたいけど、JSでクラス操作するしかないか……」と、深夜にため息をついた経験はないだろうか？...
CSS 【実務・中級編】 :where() 擬似クラス – CSS実践ガイド
CSSの「詳細度」という呪縛を解く：`:where()`擬似クラスが現場にもたらす革命フロントエンドの世界で長く戦っていると、必ずぶつかる壁がある。そう、「詳細度（Specificity）の地獄」だ。「なぜかスタイルが当たらない」「`!im...
CSS 【実務・中級編】 :is() 擬似クラス – CSS実践ガイド
現場のCSSアーキテクトとして、一つ核心を突いた話をしよう。君たちが普段書いているCSS、特にセレクタの記述。「`nav ul li a`、`nav ol li a`、`header ul li a`……」なんて具合に、似たような記述を並べ...
CSS 【実務・中級編】 ::backdrop 擬似要素 – CSS実践ガイド
現場で差がつくCSS：`::backdrop` でモーダル体験を一段階引き上げるフロントエンド開発において、「モーダル」や「フルスクリーン」の実装は、もはや避けては通れない道だ。かつては、`z-index`の地獄と戦いながら、`div`で背...
CSS 【実務・中級編】 ::placeholder 擬似要素 – CSS実践ガイド
現場で差がつく！`::placeholder`の「正しい」扱い方と、ブラウザの裏側を覗く話やあ。現場でCSSと格闘している諸君、お疲れ様。今日は `::placeholder` という、一見地味だが、UIの品質を左右する重要な「擬似要素」の...
CSS 【実務・中級編】 ::marker 擬似要素 – CSS実践ガイド
「リストのマーカー、まだ `::before` で頑張ってるの？」―― `::marker` 擬似要素でCSSをスマートに解決しようこんにちは。フロントエンドの現場で日々CSSのメンテナンスに頭を悩ませている皆さん、お疲れ様です。リストの装...
CSS 【実務・中級編】 ::selection 擬似要素 – CSS実践ガイド
なぜ「選択範囲」のデザインにこだわるのか？：CSS `::selection` を使いこなす現場でバリバリとコードを書いていると、つい「機能」や「レイアウト」ばかりに目が向きがちだよね。でも、最高峰のプロダクトは、実はユーザーが意識しないよ...
CSS 【実務・中級編】 ::first-letter と ::first-line – CSS実践ガイド
やあ。今日もフロントエンドの泥沼で戦っている君に、少しばかり「CSSの解像度」を上げる話をしよう。CSSの仕様書を隅から隅まで読み込んでいる猛者でも、意外と「なんとなく」で使ってしまいがちなのが `::first-letter` と `::...