属性セレクタと疑似クラス(状態:hover, focus, active, disabled等)

スポンサーリンク
CSS

【実務・中級編】 :read-only 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :focus-visible 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :focus-within 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :checked 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :enabled 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :disabled 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :active 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :focus 疑似クラス – CSS実践ガイド

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

【実務・中級編】 :hover 疑似クラス – CSS実践ガイド

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

【実務・中級編】 大文字小文字の区別なしフラグ [attr=value i] – CSS実践ガイド

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