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

スポンサーリンク
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に任せ、コンポーネント指向でクラスを綺麗に切り分ける。現代のフロ...
CSS

【実務・中級編】 ::after 擬似要素による装飾とclearfix – CSS実践ガイド

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

【実務・中級編】 ::before 擬似要素の活用とcontentプロパティ – CSS実践ガイド

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

【実務・中級編】 :defined擬似クラス – CSS実践ガイド

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

【実務・中級編】 :lang()擬似クラス – CSS実践ガイド

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