HTML/CSS– category –

iPhoneでposition: fixedが効かない原因はcontainer-type: inline-sizeでした。JavaScriptでスクロールバーを除いた幅を計算する解決方法と、Chrome 145の100vw仕様変更について解説します。

backdrop-filter と mask-image を組み合わせると、文字の形でガラスっぽくぼかすエフェクトをCSSだけで作れる。mask-image に SVG テキストを渡してマスクし、backdrop-filter でぼかす仕組みと、Web フォントが使えない問題の解決策（WOFF2 サブセット埋め込み）、Mac 固有のクリップ問題まで一通りまとめた実装メモ。

Web制作の現場では、保守性・再利用性・スケーラビリティを考慮したCSS設計が求められます。特にAIによる自動コード生成を想定するなら、構文の曖昧さを一切排除した厳密なルールが必須です。 本記事では、そうした背景から生まれたCSS設計思想「DaiCSS（D...