基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）

やあ、お疲れ。プロジェクトの進捗はどうだい？そろそろSPAのようなシームレスな画面遷移を、面倒なJavaScriptのルーティングライブラリや複雑なアニメーション制御なしで実現したい、なんて考えてる頃なんじゃないかと思ってね。今日は、現在の...

おい、最近フォームのバリデーション実装で、赤線の波線やエラーメッセージの出し方に頭を悩ませてないか？「あー、JavaScriptでリアルタイムに正規表現回して、スパン要素を動的に挿入して…」なんて泥臭いDOM操作、まだ自前で頑張ってたりしな...

フロントエンドの現場で日々コードを書いていると、「画面のデザインは完璧に仕上げたのに、ユーザーが入力するテキストエリアのネイティブな挙動までは制御しきれない……」という壁にぶつかることがよくある。特に、ブラウザが標準で持つスペルチェック機能...

フロントエンドの現場で頭を悩ませる「スタイリングの魔境」の一つに、`` が挙げられます。これ、本当に長年のフロントエンドエンジニア泣かせの仕様でしたよね。「デザインカンプ通りの美しいファイル選択ボタンを作ってくれ」とデザイナーから言われた瞬...

お疲れ。最近、メディアサイトや海外の美しいテックブログなんかで見かける、あの冒頭の1文字目をズドンと大きくする「ドロップキャップ（イニシャル装飾）」、気になっていたんじゃないか？「あぁ、あれね。先頭の文字だけ `` で囲んでスタイル当ててる...

おい、ちょっといいか。画面の向こうで「CSSなんてただの見た目の味付けだろ」と高をくくっているそこの君。……まあ、気持ちは分からなくもない。レイアウトはFlexboxやGridに任せ、コンポーネント指向でクラスを綺麗に切り分ける。現代のフロ...

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

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

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

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