CSS 【実務・中級編】 擬似クラス :disabled と :enabled – CSS実践ガイド
やあ。今日も今日とてCSSの沼にどっぷり浸かっているかい？フロントエンドをやっていると、避けて通れないのが「フォーム」だ。API連携、バリデーション、非同期送信……JavaScript側での状態管理に頭を悩ませている姿をよく見かける。だが、...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【実務・中級編】 擬似クラス :first-child と :last-child – CSS実践ガイド
おい、調子はどうだ？今日も元気にデザインカンプと睨めっこしながら、意図通りに動かないCSSに頭を悩ませているところか？痛いほど気持ちは分かる。フロントエンドの道を進んでいれば、誰もが一度は「なぜこの要素だけ余白が狂うんだ……」という泥沼にハ...
CSS 【実務・中級編】 ::cue-region 擬似要素による字幕領域の制御 – CSS実践ガイド
お疲れ。最近、動画配信周りの案件をやることが増えてきてさ、「なんだこのCSS、見たことねえぞ」って後輩が頭を抱えてる現場に遭遇したんだ。WebVTTを使った動画の字幕スタイリング、君はどこまで踏み込んだことがあるかい？大抵のエンジニアは `...
CSS 【実務・中級編】 ::cue 擬似要素による字幕のスタイリング – CSS実践ガイド
やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドをやっていると、「これ、デザインカンプ通りにブラウザがレンダリングしてくれないんだけど……」っていう絶望的な壁に何度もぶつかるよね。特に、メディア周り。``タグのカスタムなんて...
CSS 【実務・中級編】 ::slotted 擬似要素によるスロットコンテンツのスタイリング – CSS実践ガイド
やあ、お疲れ。Webコンポーネントの実装を進めているところかい？Shadow DOMの壁を前にして、「あれ、外から入れたはずのコンテンツにスタイルが当たらないぞ……？」と深夜のオフィスで頭を抱えている姿が目に浮かぶよ。安心してくれ、君がハマ...
CSS 【実務・中級編】 ::part 擬似要素によるShadow DOMの外部スタイリング – CSS実践ガイド
こんにちは。フロントエンドの現場で日々CSSの魔改造と格闘している君なら、一度はこんな絶望を味わったことがあるはずだ。「Web Components使ってカプセル化されたのはいいけど、中のボタンのホバー色ひとつ変えられないじゃん……！」そう...
CSS 【実務・中級編】 ::view-transition-new 擬似要素による遷移後状態 – CSS実践ガイド
お疲れ。そろそろ「ただ動くだけのCSS」から卒業して、ユーザーの心を掴むリッチな体験を作りたい頃合いだと思ってな。今日は、モダンフロントエンドの最前線でひそかに（いや、盛大に）話題を集めている View Transitions API、その...
CSS 【実務・中級編】 ::view-transition-old 擬似要素による遷移前状態 – CSS実践ガイド
やあ。今日も今日とてCSSの沼にどっぷり浸かっているかい？フロントエンドの現場を渡り歩いていると、「ページ遷移をもっとリッチに、ネイティブアプリみたいに滑らかにできないか？」っていうクライアントやデザイナーからの無茶ぶり、いや熱い要望に何度...
CSS 【実務・中級編】 ::view-transition-image-pair 擬似要素の役割 – CSS実践ガイド
お疲れ。ビュー遷移API（View Transitions API）の波、ちゃんとキャッチできてるか？SPA（シングルページアプリケーション）の画面遷移はもちろん、ついにマルチページ（MPA）でもバリバリ動くようになって、俺たちのCSSライ...
CSS 【実務・中級編】 ::view-transition-group 擬似要素の階層構造 – CSS実践ガイド
おい、最近View Transitions API触ってるか？「ページ遷移がパッと滑らかになるあれね、知ってる知ってる」なんて言って、お茶を濁してないだろうな。モダンブラウザの進化はすさまじいが、こと「DOMが書き換わる瞬間のアニメーション...