CSS 【実務・中級編】 last-child疑似クラスの活用 – CSS実践ガイド
やあ、お疲れ。最近、君が書いたCSSのレビューをしていて、ふと気になったところがあったんだ。リストやカードのレイアウトで、最後の要素だけボーダーやマージンを消すために、わざわざ `.item:last-of-type` とか、果ては Jav...
属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）
CSS CSS 【実務・中級編】 first-child疑似クラスの挙動と注意点 – CSS実践ガイド
おい、調子はどうだ？今日も元気に `display: flex;` でレイアウトと格闘していることだろう。さて、今回はCSSの基礎の基礎、しかし実務の現場では「えっ、なんで効かないの？」と中級エンジニアの心を幾度となくへし折ってきた魔物、`...
CSS 【実務・中級編】 blank疑似クラス – CSS実践ガイド
おい、最近の仕様の進み具合は追ってるか？フロントエンドの荒波にもまれながら「もっとスマートにフォームのバリデーションやUI制御ができないもんか」と頭を悩ませている中級の君なら、きっと今日のテーマにグッとくるはずだ。今日は、現在進行形でブラウ...
CSS 【実務・中級編】 default疑似クラス – CSS実践ガイド
おい、ちょっといいか。最近のコードレビューをしていて、また見つけたんだよ。ラジオボタンやセレクトボックスの初期値（デフォルト選択）に対して、わざわざJavaScriptで初期判定させたり、HTMLにべた書きしたクラス名を夜な夜なCSSで拾い...
CSS 【実務・中級編】 indeterminate疑似クラス – CSS実践ガイド
フロントエンドの荒波にもまれながら、日々CSSと格闘している中級エンジニアの皆さん、お疲れ様です。チーフアーキテクトの私だ。今回は、CSSの数ある疑似クラスの中でも、実務で意外と見落とされがちでありながら、「おっ、こいつ分かってるな」とレビ...
CSS 【実務・中級編】 has関係疑似クラス – CSS実践ガイド
CSSの歴史において、長年の悲願であった「親セレクタ」がついに実装され、私たちのワークフローに革命が起きてからしばらく経ちます。そう、` :has()` 疑似クラスのことです。「あ、これ親要素をスタイルしたいのに、CSSだけじゃ無理だからJ...
CSS 【実務・中級編】 where関数型疑似クラス – CSS実践ガイド
おい、最近CSSの詳細度（Specificity）の計算で無駄に頭を悩ませてないか？ 「なんか知らんけど、このユーティリティクラスが上書きできねぇ……！」って夜中に頭を抱えて、仕方なく苦し紛れに `!important` をブッ挿した経験、...
CSS 【実務・中級編】 is関数型疑似クラス – CSS実践ガイド
おい、調子はどうだい？最近、後輩のコードレビューをしていて「おっ、やるじゃん」と感心させられることが増えたんだが、同時に「あー、まだ古いCSSの書き方に囚われてるな」ってもどかしく思う瞬間も多いんだよね。特に、コンポーネントが複雑化してくる...
CSS 【実務・中級編】 not関数型疑似クラス – CSS実践ガイド
やあ。今日も今日とてCSSの海を泳ぎ回っているかい？デザインカンプを忠実に再現するだけなら初級者でもできる。だが、保守性が高く、将来の仕様変更にもビクともしない堅牢なスタイルシートを組み上げるとなると話は別だ。特に「例外処理」の書き方一つで...
CSS 【実務・中級編】 link疑似クラス – CSS実践ガイド
お疲れ。今日も今日とて、デザインカンプの微修正や「なんかこのリンク、色が勝手に変わるんだけど！」という若手からのチャット対応に追われていないか？フロントエンド開発の現場にいると、CSSの基礎なんてわかってるつもりになりがちだ。だがな、「 `...