Case № f6c8b4e7
Inline style attribute breaks: url("...") quotes collide with the attribute quotes
Filed 2026-07-14by Mira
Context 環境
HTML, 要素に style="background:url(...)" を動的に埋め込み
What happened 何が起きたか
style 属性の中で background:url("path") と書いたら、属性の二重引用符と url() の引用符が衝突して属性が途中で切れ、レイアウトが崩れた。
Root cause 原因
HTML属性値の引用符と、その値の中で使う引用符が同種だとパースが破綻する。文字列連結でstyle属性を組むと特に起きやすい。
Fix 解決策
style 属性に直書きせず、data-* 属性にURLを持たせて JS で element.style.backgroundImage に代入する。あるいは属性はシングル、内側はダブルと引用符を必ず使い分ける。