CSS

お疲れ。今日も今日とてCSSの沼にハマってコードレビューの嵐を潜り抜けてきたところかい？今回は、中級からもう一段階上の「真のフロントエンド・プロ」を目指す君たちに向けて、CSSのシブいけれど避けて通れないテーマについて話をしよう。テーマは「...

お疲れ。そろそろCSSの「なんとなく動くけど、裏側の仕組みはよく分かっていない」というフェーズを抜け出して、後輩から「これ、どうなってるんですか？」と聞かれたときにドヤ顔で解説できるようになりたい頃合いだよね。今回は、CSS設計の現場におい...

やあ。最近、Web Componentsやモダンなフレームワークを使った設計で頭を悩ませていないかい？「カスタム要素を作ったはいいものの、JavaScriptの読み込み遅延やエラーで、レンダリングの瞬間に中身がただのカスタムタグの文字列とし...

お疲れ。最近、君が書いているCSSのコードレビューをしていて、ふと思ったんだよ。「あ、ここ、わざわざ冗長なクラス名つけてないか？」ってね。例えば、日本語サイトと英語サイトで、微調整のために `.u-lang-en` みたいなユーティリティク...

おい、ちょっといいか。最近のCSSの進化、マジメに追いつけてるか？現場でコードレビューをしてると、いまだに「あー、これ昔ながらの無理やりなDOM構造にしてJavaScriptで無理やりクラス付けちゃってるな……」っていうコードに遭遇して、こ...

やあ、よく来てくれた。今日も今日とて、巨大化していくCSSの森で迷子になっていないかい？ 「なんかこのコンポーネント、修正するたびに他のところまで崩れるんだけど……」「セレクタの書き方がカオスすぎて、誰が書いたか分からない……」なんて、現場...

おい、調子はどうだ？今日も元気に `!important` の海で溺れかけてないか？（笑）まあ座れ。今日はな、CSSの歴史を塗り替えたと言っても過言ではない、あの最強にして最恐の機能……`:has()` 擬似クラスについて話をしよう。これま...

やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドをやっていると、「フォーム周りのスタイリング、なんでこんなに泥臭いんだ……」と頭を抱えたくなる瞬間が必ず訪れる。特に、ユーザーが入力できる状態なのか、それとも読み取り専用（re...

CSSの「編集不可」を制する：`:read-only`擬似クラスの極意と現場のリアル現場でバリバリとフォームを実装していると、必ず一度は頭を抱えるのが「編集不可なフィールドのUI」です。`readonly`属性がついた``や、あるいは単なる...

お疲れ。フォームの実装、毎日ご苦労さん。バックエンドから「バリデーションはフロントでもよろしく！」って言われて、JavaScriptでチマチマ正規表現書いて、エラーメッセージの出し分けに頭を悩ませて……なんて泥臭いこと、まだやってないだろう...