CSS

「とりあえず `outline: none;` しておけばデザイン崩れないだろ？」……もし後輩がコードレビューでそんなことを言っていたら、私はその場でPCを閉じさせるかもしれない。フロントエンドの現場において、アクセシビリティとデザインのバ...

やあ。現場でCSSと格闘している君たちへ。フロントエンドの現場では、ボタンや入力フォームのUIを触っていると、「子要素にフォーカスが当たった瞬間に、親要素全体をハイライトさせたい」という欲求に駆られることがよくあるよね。そんな時、昔ならJa...

CSSの「:checked」を使いこなす：状態管理をDOMからスタイルへ解放せよフロントエンドの世界で、僕らが最も頭を悩ませるのが「状態」の管理だ。ボタンを押したらメニューが開く、選択したら色が変わる。これらをいちいちJavaScriptで...

CSSの「無効状態」を極める：`:disabled` 擬似クラスの背後にある哲学と実装術やあ。フロントエンドの現場で日々CSSと格闘している君たちへ。今日は、誰もが一度は触れるはずの `:disabled` 擬似クラスについて話をしよう。単...

現場で差がつく `:active` の極意：ただ「色を変える」だけで満足していないか？やあ。今日もフロントエンドの戦場でお疲れ様。今日は、CSSの基本中の基本、しかし「適当に扱われがち」な `:active` 擬似クラスについて深掘りしよう...

現場の視点：`:focus`を「ただの青い枠」と侮るなやあ。今日はフロントエンド開発において、最も軽視されがちでありながら、実はアクセシビリティとUXの根幹を担っている `:focus` 擬似クラスについて話をしよう。中級レベルになると、`...

:hoverの深淵 — なぜ我々は「ただ色を変えるだけ」で終わらせてはいけないのかフロントエンドの世界に足を踏み入れたばかりの頃、誰もが最初に通る道が `:hover` です。「ボタンにマウスを乗せたら色が変わる」、これだけでウェブサイトが...

CSSの「大文字小文字問題」をスマートに解決する：属性セレクタの `i` フラグを使いこなせ現場で長くCSSを触っていると、「HTMLの記述ゆれ」に頭を抱える瞬間が必ず訪れます。「サーバーサイドで動的に生成された `data-status`...

CSSの隠れた名脇役：属性値ハイフンリストセレクタ `` を使いこなすフロントエンドの現場で、特定のクラス名や属性値を条件にスタイルを当てる際、何を思い浮かべますか？おそらく、多くの人は `` のような前方一致セレクタを真っ先に選ぶはずです...

「属性値リストセレクタ ``」を使いこなす：CSSセレクタの解像度を一段階引き上げようやあ。現場でコードを書いていて、「クラス名の管理、そろそろ限界かな？」なんて思ったことはないか？CSSセレクタは奥が深い。特に、普段何気なく使っている `...