CSS 【実務・中級編】 visited疑似クラス – CSS実践ガイド
お疲れ。最近、デザインカンプ通りに組んだはずなのに「リンクの色が変わらない」「なんか挙動が怪しい」って頭を抱えていないか？中級の壁をスルッと抜けてシニアに近づくエンジニアがつまずきがちなポイント、それが今回取り上げる `:visited` ...
属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）
CSS CSS 【実務・中級編】 target疑似クラス – CSS実践ガイド
お疲れ。今日のコードレビュー、なかなかいい線いってたけど、セレクタ周りで一つ気になるところがあったんだよね。JavaScriptで無駄にイベントリスナーをバリバリ貼り付けてDOMを操作しようとしてる箇所、見た瞬間に「あ、これCSSだけでいけ...
CSS 【実務・中級編】 out-of-range疑似クラス – CSS実践ガイド
やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドをやっていると、「入力フォームのバリデーションをどうリッチにするか」という永遠の課題にぶ当たるよな。JavaScriptでゴリゴリとイベントリスナーを貼って、値を監視して、クラ...
CSS 【実務・中級編】 in-range疑似クラス – CSS実践ガイド
やあ、お疲れ様。最近、社内のコードレビューをしていて、数値入力フォームのエラーハンドリングでJavaScriptの山のようなバリデーションロジックを見かけて、思わず「おや？」と思ったんだよね。もちろん複雑なビジネスロジックはJSに頼るべきだ...
CSS 【実務・中級編】 :invalid 疑似クラス – CSS実践ガイド
おい、調子はどうだ？今日も元気にフォームのバリデーション実装で頭を悩ませているところか。いや、分かるぞ。バックエンドから返ってきたエラーメッセージの出し分け、JavaScriptでのイベントリスナーの嵐、`touched` や `dirty...
CSS 【実務・中級編】 :valid 疑似クラス – CSS実践ガイド
お疲れ。今日も今日とて、デザインカンプ通りにピクセルパーフェクトを叩き出しつつ、アクセシビリティの怪しい実装と格闘していることだろう。さて、今回はフォームのバリデーション、その中でも地味ながらも強力な武器である `:valid` 疑似クラス...
CSS 【実務・中級編】 :optional 疑似クラス – CSS実践ガイド
やあ、お疲れ。今日も元気にコード書いてるかい？リポジトリのPull Requestを見ていて、ふと目にとまったんだよね。「あれ、なんでこのフォームの任意入力欄、わざわざ自前で `.is-optional` なんて冗長なクラスを付与して制御し...
CSS 【実務・中級編】 :required 疑似クラス – CSS実践ガイド
おい、最近フォーム周りの実装で「JavaScriptでちまちま入力必須チェックをして、ご丁寧にクラスを付け外ししているコード」を見かけてだな、思わずコーヒーを吹き出しそうになったんだよ。「いやいや、君、ブラウザのネイティブ機能忘れてないかい...
CSS 【実務・中級編】 :placeholder-shown 疑似クラス – CSS実践ガイド
フロントエンドの現場で「おっ、これキレイに書けてるね」と後輩のコードを見て思わず唸らされる瞬間、それは大抵、CSSの細かい仕様や「痒い所に手が届く疑似クラス」を正しく使いこなしている時だ。フォームのUI実装で、プレースホルダー（入力ヒント）...
CSS 【実務・中級編】 :read-write 疑似クラス – CSS実践ガイド
やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドの現場にいると、「動くには動くけど、もっとスマートに書けないか？」と悶絶する瞬間に何度も出くわすよな。特にフォーム周りのスタイリングなんて、CSSハックの歴史みたいなカオスにな...