属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）

こんにちは。君、最近のCSS、ちゃんと追いついてるかい？「UIコンポーネントの実装なんて、とりあえずクラス付与してJSで制御すればいいや」なんて考えているとしたら、それは少しもったいない。CSSの標準仕様は、僕らが思っている以上に賢くなって...

こんにちは。現場の第一線でコードを書き続けていると、「動けばいいや」で作られたアクセシビリティの爆弾のようなUIに出くわして、頭を抱えることがよくありますよね。特に、フォームの入力欄やボタンをクリックしたときに、周りに現れるあの「青い枠（ア...

フロントエンドの現場で日々コードを書いていると、「親要素の中にいる子要素のどれかにフォーカスが入ったとき、親のスタイルをごっそり変えたい」という要件に必ずぶち当たりますよね。例えば、検索フォーム。`` と検索ボタンの `` をひとまとめにし...

おい、最近書いたフォーム周りのCSS、また「JSでクラスの付け外し」をしてやしないか？「チェックが入ったらここのデザインを変えたいです」という仕様を見るたびに、素早く`element.classList.toggle('is-checked...

やあ、お疲れ。今日のコードレビューで、また「とりあえずクラス名で制御するスタイル」の山を見つけてしまってね、少しコーヒーを飲みながら君とCSSの原点について話したくなったところだ。君も中級の壁を越えて、日々のコンポーネント設計やアクセシビリ...

お疲れ。今日も今日とてCSSの沼にハマっているかい？フロントエンドをやっていると、「ボタンをグレーアウトして、ユーザーに押せないことを伝える」なんて要件は、朝飯前レベルで毎日書くはずだ。で、だ。大半のジュニアや中級初期のエンジニアは、こうい...

やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドのコードレビューをしていて、一番「あ、惜しいな」「実務わかってるな」の境界線が出るのが、実はこういう細かいインタラクションの制御だったりするんだ。今回は、CSSの `:acti...

やあ。今日も今日とてCSSと格闘ご苦労様。君も中級の壁を突破し、デザインの再現性だけでなく「アクセシビリティ」や「インタラクションの質」にこだわり始めるフェーズに入った頃だと思う。さて、今回はCSSの基礎の基礎でありながら、実務の現場では「...

やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドの現場にいると、「ボタンにマウスが乗ったら色を変える」なんて、朝飯前……いや、息をするように書く要件だよな。でも、ちょっと待ってほしい。君が何気なく書いているその `:hove...

CSSの沼へようこそ。日々、デザイナが気まぐれに揺らしてくるHTMLの大文字・小文字の揺れに頭を抱えていないかい？「おいおい、なんでここのクラス名やデータ属性は `data-status="Active"` なんだよ……さっきのカードは `...