CSS 【テクニカル・上級編】 ::first-letter 擬似要素によるドロップキャップ – CSS実践ガイド
最初の1文字に魂を宿す：`::first-letter` 擬似要素とドロップキャップの深淵Webのタイポグラフィにおいて、段落の先頭文字を大きく沈み込ませて配置する「ドロップキャップ（初期装飾文字）」は、雑誌や書籍の美学をデジタル空間に持ち...
CSS
CSS CSS 【テクニカル・上級編】 ::first-line 擬似要素による最初の行のスタイル – CSS実践ガイド
序論：なぜ今、`::first-line` なのかフロントエンドのアーキテクチャ設計において、CSSの擬似要素は単なる「見た目の装飾ツール」として片付けられがちだ。特に `::first-line` などの動的レイアウトに依存する機能は、コ...
CSS 【テクニカル・上級編】 ::after 擬似要素による装飾とclearfix – CSS実践ガイド
よし、話をしよう。CSSの仕様書の隅っこ、あるいはレガシーコードの墓場で長年放置されてきた魔術――`::after` 擬似要素と、かつて一世を風靡した（そして今なお亡霊のように蘇る）`clearfix` についてだ。現代のフロントエンド開発...
CSS 【テクニカル・上級編】 ::before 擬似要素の活用とcontentプロパティ – CSS実践ガイド
CSSの深淵へようこそ。日々のフロントエンド開発において、私たちはDOMの肥大化と戦い続けている。ReactやVueといったモダンなコンポーネント指向フレームワーク全盛の今であっても、ブラウザのレンダリングパイプラインを巡る根本的な物理法則...
CSS 【テクニカル・上級編】 :defined擬似クラス – CSS実践ガイド
孤高の番人、`:defined`：未定義カスタム要素の「閃光のチラつき（FOUC）」をねじ伏せるアーキテクチャフロントエンドの荒波を越えてきたシニアアーキテクト諸君なら、一度は頭を抱えたことがあるはずだ。そう、Web Componentsの...
CSS 【テクニカル・上級編】 :lang()擬似クラス – CSS実践ガイド
`:lang()`擬似クラスの深層：属性セレクタの呪縛を断ち、レンダリング・パイプラインを最適化するアーキテクチャフロントエンドの現場で長くCSSを書いていると、DOMの構造変化や動的な言語切り替え（i18n）に翻弄されるフェーズが必ずやっ...
CSS 【テクニカル・上級編】 nth-child(an+b of selector) の構文 – CSS実践ガイド
CSSの進化は、時に私たちフロントエンドエンジニアを狂喜乱舞させ、そして時に「これまでのハックは何だったんだ」と深い虚無感を与えてくれます。中でも `:nth-child()` の拡張構文である `:nth-child(an+b of se...
CSS 【テクニカル・上級編】 機能擬似クラスのネストとパフォーマンス – CSS実践ガイド
こんにちは、フロントエンドの深淵を覗く旅へようこそ。日々、数万行規模のCSS設計や、複雑なデザイントークンの動的制御に頭を悩ませているあなたなら、一度はこう思ったことがあるはずだ。「セレクタの記述量を減らし、DRY原則を極限まで適用するため...
CSS 【テクニカル・上級編】 関係擬似クラス :has() と複雑なセレクタの組み合わせ – CSS実践ガイド
逆転の発想：`:has()` 結合子がもたらすCSSアーキテクチャのパラダイムシフトと、その裏にある現実CSSを書く仕事をしていて、これほどワクワクした瞬間があっただろうか。かつて「親セレクタを選択できない」というCSSの不文律は、私たちフ...
CSS 【テクニカル・上級編】 編集可能擬似クラス :read-write – CSS実践ガイド
CSSの進化は止まらない。かつてはJavaScriptがDOMのステータスを監視し、ちまちまとクラス名を付け替えて実現していたスタイリングが、今やネイティブのセレクタ一つでエレガントに解決する時代だ。今回スポットを当てるのは、編集可能な要素...