CSS 【実務・中級編】 :target 擬似クラス – CSS実践ガイド
現場でCSSを触っていると、「JavaScriptで制御するほどじゃないけど、ちょっとしたインタラクションが欲しい」という場面、よくあるよね。そんなとき、多くのエンジニアが即座に`addEventListener`を書き始めるのを見て、私は...
CSS
CSS CSS 【実務・中級編】 :any-link 擬似クラス – CSS実践ガイド
CSSの「未訪問・訪問済み」問題を一撃で解決する `:any-link` の正体フロントエンドの現場で、CSSを書き続けていると必ず直面する「リンクのスタイル」問題。昔からの慣習で `:link` と `:visited` を別々に書いて、...
CSS 【実務・中級編】 :blank 擬似クラス（草案） – CSS実践ガイド
CSSの「幻の擬似クラス」 `:blank` と現実的なUI実装の落とし所フロントエンドの深淵に足を踏み入れている君なら、一度は思ったことがあるはずだ。「フォームに入力された値が空、あるいは空白文字だけの場合に、スタイリングを制御したい」と...
CSS 【実務・中級編】 :empty 擬似クラス – CSS実践ガイド
`:empty`擬似クラスの「嘘」と「真実」：現場でハマらないための実践的知見現場でコードをレビューしていると、たまに見かけるのが「この要素、空っぽなのにCSSが効いていない（あるいは効きすぎている）」という相談だ。特に`:empty`擬似...
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の品質を左右する重要な「擬似要素」の...