CSS 【実務・中級編】 アクティブ擬似クラス :active – CSS実践ガイド
現場で差がつく `:active` の極意：ただ「色を変える」だけで満足していないか？やあ。今日もフロントエンドの戦場でお疲れ様。今日は、CSSの基本中の基本、しかし「適当に扱われがち」な `:active` 擬似クラスについて深掘りしよう...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【実務・中級編】 フォーカス擬似クラス :focus – CSS実践ガイド
現場の視点：`:focus`を「ただの青い枠」と侮るなやあ。今日はフロントエンド開発において、最も軽視されがちでありながら、実はアクセシビリティとUXの根幹を担っている `:focus` 擬似クラスについて話をしよう。中級レベルになると、`...
CSS 【実務・中級編】 ホバー擬似クラス :hover – CSS実践ガイド
:hoverの深淵 — なぜ我々は「ただ色を変えるだけ」で終わらせてはいけないのかフロントエンドの世界に足を踏み入れたばかりの頃、誰もが最初に通る道が `:hover` です。「ボタンにマウスを乗せたら色が変わる」、これだけでウェブサイトが...
CSS 【実務・中級編】 属性セレクタの大文字小文字無視フラグ [attr=val i] – CSS実践ガイド
CSSの「大文字小文字問題」をスマートに解決する：属性セレクタの `i` フラグを使いこなせ現場で長くCSSを触っていると、「HTMLの記述ゆれ」に頭を抱える瞬間が必ず訪れます。「サーバーサイドで動的に生成された `data-status`...
CSS 【実務・中級編】 属性値ハイフンリストセレクタ [attr|=val] – CSS実践ガイド
CSSの隠れた名脇役：属性値ハイフンリストセレクタ `` を使いこなすフロントエンドの現場で、特定のクラス名や属性値を条件にスタイルを当てる際、何を思い浮かべますか？おそらく、多くの人は `` のような前方一致セレクタを真っ先に選ぶはずです...
CSS 【実務・中級編】 属性値リストセレクタ [attr~=val] – CSS実践ガイド
「属性値リストセレクタ ``」を使いこなす：CSSセレクタの解像度を一段階引き上げようやあ。現場でコードを書いていて、「クラス名の管理、そろそろ限界かな？」なんて思ったことはないか？CSSセレクタは奥が深い。特に、普段何気なく使っている `...
CSS 【実務・中級編】 :scope 擬似クラス – CSS実践ガイド
CSSの「境界線」を支配する：`:scope` 擬似クラスでDOM操作をスマートにする技術フロントエンドの現場で「DOMをこねくり回す」時、君たちはどうやって要素を絞り込んでいるかな？多くのエンジニアが `element.querySele...
CSS 【実務・中級編】 :target 擬似クラス – CSS実践ガイド
現場でCSSを触っていると、「JavaScriptで制御するほどじゃないけど、ちょっとしたインタラクションが欲しい」という場面、よくあるよね。そんなとき、多くのエンジニアが即座に`addEventListener`を書き始めるのを見て、私は...
CSS 【実務・中級編】 :any-link 擬似クラス – CSS実践ガイド
CSSの「未訪問・訪問済み」問題を一撃で解決する `:any-link` の正体フロントエンドの現場で、CSSを書き続けていると必ず直面する「リンクのスタイル」問題。昔からの慣習で `:link` と `:visited` を別々に書いて、...
CSS 【実務・中級編】 :blank 擬似クラス（草案） – CSS実践ガイド
CSSの「幻の擬似クラス」 `:blank` と現実的なUI実装の落とし所フロントエンドの深淵に足を踏み入れている君なら、一度は思ったことがあるはずだ。「フォームに入力された値が空、あるいは空白文字だけの場合に、スタイリングを制御したい」と...