CSS 【実務・中級編】 out-of-range疑似クラス – CSS実践ガイド
やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドをやっていると、「入力フォームのバリデーションをどうリッチにするか」という永遠の課題にぶ当たるよな。JavaScriptでゴリゴリとイベントリスナーを貼って、値を監視して、クラ...
CSS
CSS 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ハックの歴史みたいなカオスにな...
CSS 【実務・中級編】 :read-only 疑似クラス – CSS実践ガイド
こんにちは。君、最近のCSS、ちゃんと追いついてるかい？「UIコンポーネントの実装なんて、とりあえずクラス付与してJSで制御すればいいや」なんて考えているとしたら、それは少しもったいない。CSSの標準仕様は、僕らが思っている以上に賢くなって...
CSS 【実務・中級編】 :focus-visible 疑似クラス – CSS実践ガイド
こんにちは。現場の第一線でコードを書き続けていると、「動けばいいや」で作られたアクセシビリティの爆弾のようなUIに出くわして、頭を抱えることがよくありますよね。特に、フォームの入力欄やボタンをクリックしたときに、周りに現れるあの「青い枠（ア...