CSS 【実務・中級編】 ::before と ::after 擬似要素 – CSS実践ガイド
CSSの「影武者」を操る：`::before` / `::after` の真髄と現場の流儀フロントエンドの現場で、「ここにもう一つ要素があればなあ」と悔しい思いをしたことはないだろうか。HTML構造を汚さずに装飾やアイコンを追加したい。そん...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS 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` は...
CSS 【実務・中級編】 リンク擬似クラス (:link, :visited) – CSS実践ガイド
なぜ今さら `:link` と `:visited` なのか？—— CSSの「古き良き」仕様に潜む罠と真実フロントエンドの世界に足を踏み入れて数年、「CSSなんてセレクタを書いてプロパティを当てるだけだろ？」と高を括っている中堅エンジニアほ...
CSS 【実務・中級編】 !important 規則 – CSS実践ガイド
CSSの「禁じ手」を使いこなす：!importantと正しく向き合うための生存戦略フロントエンドの現場に長くいると、誰しも一度は誘惑に駆られるはずだ。「どうしてもこのスタイルが当たらない……よし、`!important`でねじ伏せよう」と。...
CSS 【実務・中級編】 詳細度（Specificity）の計算概念 – CSS実践ガイド
CSS詳細度（Specificity）の「闇」を支配せよ：現場で生き残るための計算学やあ、フロントエンドの戦場へようこそ。君も経験があるだろう？「なぜかこのスタイルが当たらない」「デベロッパーツールで打ち消し線だらけのスタイルを眺めて途方に...