CSS 【実務・中級編】 子結合子 (>) – CSS実践ガイド
CSSの「子結合子（>）」を制する者は、カスケードの混沌を制す現場でコードを読んでいると、CSSのセレクタが際限なく肥大化して、どこで何が上書きされているのか分からなくなる……そんな経験はないだろうか？「とにかく動けばいい」と適当なセレクタ...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【実務・中級編】 子孫結合子 (スペース) – CSS実践ガイド
「とりあえずスペース」でCSSを書いていないか？子孫結合子の深淵と、シニアが教える「守るべき境界線」やあ。現場でCSSと格闘している諸君、お疲れ様。CSSを書き始めた頃、誰もが最初に覚えるのが「子孫結合子（Descendant Combin...
CSS 【実務・中級編】 IDセレクタ (#) – CSS実践ガイド
CSSの「禁じ手」を知る：IDセレクタと付き合うためのエンジニアリング的思考フロントエンドの現場で数年揉まれてくると、一度は耳にするはずだ。「CSSでIDセレクタは使うな」という教条。正直に言おう。この言葉は半分正解だが、半分は教条主義に過...
CSS 【実務・中級編】 クラスセレクタ (.) – CSS実践ガイド
CSSの「クラスセレクタ」を極める：なぜ私たちはIDを捨て、クラスに魂を込めるのかフロントエンドの現場で「CSSが効かない」「意図しないスタイルが上書きされる」という泥沼にハマった経験、一度はあるはずだ。その原因の多くは、セレクタの設計思想...
CSS 【実務・中級編】 タイプセレクタ (要素型セレクタ) – CSS実践ガイド
タイプセレクタの深淵：なぜ「基本」こそが最も危険なのかやあ。今日はCSSの原点にして、大規模開発の現場でしばしば「諸刃の剣」となるタイプセレクタ（要素型セレクタ）について話をしよう。`div`, `p`, `h1`……誰もが最初に覚えるこの...
CSS 【実務・中級編】 ユニバーサルセレクタ (*) – CSS実践ガイド
CSSの「ワイルドカード」とどう付き合うか：ユニバーサルセレクタ `` の正しき使い道フロントエンド開発の現場で、CSSを書き始めた頃に誰もが一度は通る道、それがユニバーサルセレクタ `` です。「とりあえず全要素をリセットしておけば安心」...
CSS 【入門編】 :placeholder-shown 擬似クラス – CSS実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。CSSを書き始めたばかりの頃って、次から次へと出てくるプロパティやセレクタに「うわ、また新しいの覚えなきゃいけないの…？」と、ちょっとめまいがしてしまいますよね。大...
CSS 【入門編】 :fullscreen 擬似クラス – CSS実践ガイド
こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。CSSを学び始めたばかりの頃って、次から次へと出てくるセレクタや「擬似クラス」という呪文のような言葉に、思わず頭を抱えたくなりませんか？「...
CSS 【入門編】 ::highlight擬似要素によるカスタムハイライト – CSS実践ガイド
こんにちは！フロントエンドの現場を長年フラフラと……いや、最前線で駆け抜けてきたチーフアーキテクトの私です。日々のコーディング、本当にお疲れ様です！「CSSって、タグやクラスに色をつけたりレイアウトを組んだりするだけでしょ？」なんて思ってい...
CSS 【入門編】 擬似クラス :dir() による方向性制御 – CSS実践ガイド
こんにちは！フロントエンド・アーキテクチャの世界へようこそ。日々、数え切れないほどのCSSと格闘している私ですが、今日はCSSのちょっと未来を感じる、そしてグローバルなWebサイトを作る上で最高にクールな機能についてお話しさせてください。テ...