CSS 【実務・中級編】 ::marker 擬似要素 – CSS実践ガイド
「リストのマーカー、まだ `::before` で頑張ってるの？」―― `::marker` 擬似要素でCSSをスマートに解決しようこんにちは。フロントエンドの現場で日々CSSのメンテナンスに頭を悩ませている皆さん、お疲れ様です。リストの装...
CSS
CSS CSS 【実務・中級編】 ::selection 擬似要素 – CSS実践ガイド
なぜ「選択範囲」のデザインにこだわるのか？：CSS `::selection` を使いこなす現場でバリバリとコードを書いていると、つい「機能」や「レイアウト」ばかりに目が向きがちだよね。でも、最高峰のプロダクトは、実はユーザーが意識しないよ...
CSS 【実務・中級編】 ::first-letter と ::first-line – CSS実践ガイド
やあ。今日もフロントエンドの泥沼で戦っている君に、少しばかり「CSSの解像度」を上げる話をしよう。CSSの仕様書を隅から隅まで読み込んでいる猛者でも、意外と「なんとなく」で使ってしまいがちなのが `::first-letter` と `::...
CSS 【実務・中級編】 ::before と ::after 擬似要素 – CSS実践ガイド
CSSの「影武者」を操る：`::before` / `::after` の真髄と現場の流儀フロントエンドの現場で、「ここにもう一つ要素があればなあ」と悔しい思いをしたことはないだろうか。HTML構造を汚さずに装飾やアイコンを追加したい。そん...
CSS 【実務・中級編】 :first-of-type, :last-of-type, :only-of-type – CSS実践ガイド
「なぜかスタイルが当たらない」を卒業する：:first-of-type と仲間たちの深淵フロントエンドの現場で、「よし、このリストの最初だけにボーダーを引こう」と思って `:first-child` を書いたのに、なぜか意図しない要素にスタ...
CSS 【実務・中級編】 :nth-of-type() と :nth-last-of-type() – CSS実践ガイド
CSSの「型」を制する者はUIを制す：`:nth-of-type()` と `:nth-last-of-type()` の深淵現場でCSSを書いていると、時々「なぜかスタイルが当たらない」「意図しない要素まで赤くなってしまった」という怪奇現...
CSS 【実務・中級編】 :first-child, :last-child, :only-child – CSS実践ガイド
CSSの「端っこ」を制する：`:first-child`, `:last-child`, `:only-child` の深淵現場でコードをレビューしていると、正直「惜しい！」と感じる瞬間がある。特にリストやカードレイアウトにおいて、わざわざ...
CSS 【実務・中級編】 :nth-last-child() 擬似クラス – CSS実践ガイド
CSSの「後ろから数える」魔術：`:nth-last-child()`を現場で使いこなす極意やあ。コードレビューをしていてよく思うんだが、CSSの擬似クラスを「なんとなく」で使っていないか？ 特に `:nth-child()` はみんなよく...
CSS 【実務・中級編】 :nth-child() 擬似クラスの構文と数式 – CSS実践ガイド
CSSの「魔法の杖」を使いこなせ：`:nth-child()` の数式で制御するDOMの未来やあ。現場でCSSと格闘している君なら、一度は「3つ目以降の要素だけスタイルを変えたい」「交互に色をつけたい」という、一見単純そうでいて地味に厄介な...
CSS 【実務・中級編】 ユーザーアクション擬似クラス (:hover, :active, :focus) – CSS実践ガイド
CSSの「ユーザーアクション擬似クラス」を制する者は、UXを制す。フロントエンドの現場で、「とりあえずhover変えといて」と軽く言われて実装を済ませる……そんな日々を送っていないだろうか？確かに `:hover` や `:focus` は...