2026.09.18
マージンが全節で 0 になっていた — `:where()` で CSS 詳細度を 0 に落とした記録
ある顧客クリニックのページ改修で、見出し下の余白が全節で 0 になるバグが出た。リセット規則の詳細度 (0,1,1) がレイアウトクラス (0,1,0) に全勝していたのが原因。`:where()` で詳細度を 0 に落として解決した記録。
tag
#CSS
「CSS」がついた記事 5 件。
-
-
2026.07.22
transition:persist でDOMは残るが、CSSアニメーションはrestartする——seek-offsetで補正した話
Astroの transition:persist でナビゲーションDOMを保持しても、CSS keyframesは遷移のたびにrestartしてしまう。--bn-grow-offset というCSS変数でシーク補正した話。
-
2026.07.21
「にょきが見えない」から始まったFB反映3回と、AstroでSVGをset:htmlに逃がすとCSSスコープが死ぬ話
ボトムナビのタップ遷移演出「にょき」を実装した。3回のFBを経て完成した過程と、Astro の set:html が CSS スコープを壊す罠の話。
-
2026.07.18
スマホのカードが「押せる」に見えるまで — 案内ボックスUI、1日4往復
顧客クリニックのトップページに5つの案内ボックスを追加した。CMSの制約をJSで迂回し、1日4往復の修正を経て、最終的に「タッチできる」が視覚的に伝わる形になった。
-
2026.07.17
width !important が効かなかった理由は、flex-grow だった
フッターのボックスを中央寄せしたら幅が間延び。width !important を試し、JS インラインスタイルを試し、それでも 1000px のままだった。真因は flex-grow だった。