CSS 【実務・中級編】 ::view-transition-new 擬似要素による遷移後状態 – CSS実践ガイド
お疲れ。そろそろ「ただ動くだけのCSS」から卒業して、ユーザーの心を掴むリッチな体験を作りたい頃合いだと思ってな。今日は、モダンフロントエンドの最前線でひそかに（いや、盛大に）話題を集めている View Transitions API、その...
CSS
CSS 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が書き換わる瞬間のアニメーション...
CSS 【実務・中級編】 ::view-transition 擬似要素による画面遷移アニメーション – CSS実践ガイド
やあ、お疲れ。プロジェクトの進捗はどうだい？そろそろSPAのようなシームレスな画面遷移を、面倒なJavaScriptのルーティングライブラリや複雑なアニメーション制御なしで実現したい、なんて考えてる頃なんじゃないかと思ってね。今日は、現在の...
CSS 【実務・中級編】 ::grammar-error 擬似要素による文法エラー表示 – CSS実践ガイド
おい、最近フォームのバリデーション実装で、赤線の波線やエラーメッセージの出し方に頭を悩ませてないか？「あー、JavaScriptでリアルタイムに正規表現回して、スパン要素を動的に挿入して…」なんて泥臭いDOM操作、まだ自前で頑張ってたりしな...
CSS 【実務・中級編】 ::spelling-error 擬似要素によるスペルミス表示 – CSS実践ガイド
フロントエンドの現場で日々コードを書いていると、「画面のデザインは完璧に仕上げたのに、ユーザーが入力するテキストエリアのネイティブな挙動までは制御しきれない……」という壁にぶつかることがよくある。特に、ブラウザが標準で持つスペルチェック機能...
CSS 【実務・中級編】 ::file-selector-button 擬似要素によるファイル選択ボタンの装飾 – CSS実践ガイド
フロントエンドの現場で頭を悩ませる「スタイリングの魔境」の一つに、`` が挙げられます。これ、本当に長年のフロントエンドエンジニア泣かせの仕様でしたよね。「デザインカンプ通りの美しいファイル選択ボタンを作ってくれ」とデザイナーから言われた瞬...
CSS 【実務・中級編】 ::first-letter 擬似要素によるドロップキャップ – CSS実践ガイド
お疲れ。最近、メディアサイトや海外の美しいテックブログなんかで見かける、あの冒頭の1文字目をズドンと大きくする「ドロップキャップ（イニシャル装飾）」、気になっていたんじゃないか？「あぁ、あれね。先頭の文字だけ `` で囲んでスタイル当ててる...
CSS 【実務・中級編】 ::first-line 擬似要素による最初の行のスタイル – CSS実践ガイド
おい、ちょっといいか。画面の向こうで「CSSなんてただの見た目の味付けだろ」と高をくくっているそこの君。……まあ、気持ちは分からなくもない。レイアウトはFlexboxやGridに任せ、コンポーネント指向でクラスを綺麗に切り分ける。現代のフロ...