Tech blog Produced by FOURIER

HTMLのstyle属性に書いたCSSが当たらないときにチェックすべきこと

Sena Sena 2023.01.20

主な対象読者

HTML に直接書いた CSS が当たらない」という現象が起きている方

特に

  • HTML コーダー
  • フロントエンド開発者(Web)

概要

HTML に直接書いた CSS が当たらない」という現象があったので、原因を探してみました。

調査

まず該当の箇所を見てみました。

フォントが当たっているので、CSS ファイルに書いたスタイルは当たっていることが分かります。

しかし、HTML に直接書いてあるstyle="color: red;"だけ当たっていないようです。

<p style="color: red;">デジタルと<wbr>アナログの融和で、<br>もっと便利に、<br>もっと楽しく。</p>

Consoleを確認する

Chrome のデベロッパーツールを開き Console タブを開いたところ、エラーが出ていました。

💡
デベロッパーツールの開き方は、ページ自体に右クリックをして「検証」を押すと出てきます。

デベロッパーツールの上側にConsoleタブがあります。

Refused to apply inline style…と出ているので、どうやら今回の原因と関係があるようです。

原因

上記のエラー文を翻訳してみたところ、今回の場合誰かが設定した Content Security Policy(通称 CSP)によって、インラインのスタイルがブロックされてしまっているようでした。

解決方法

バックエンド・サーバー担当以外の人

スタイルを外部のCSSファイル内でなるべく書くようにしてみましょう。

それが難しいのであれば、バックエンドもしくはサーバーを設定した方に、CSPのstyle-srcunsafe-inlineを許可して欲しいと伝えましょう。

バックエンド・サーバー担当の人

リスクを考慮しながら、HTTPのレスポンスヘッダーにあるContent-Security-Policystyle-srcunsafe-inlineを追加しましょう。

style-src: 'self' 'unsafe-inline'

またCSPを設定する時は、事前周知をした方が良いと思います。

結果

上記を実施すると、問題無くstyle="color: red;"が当たりました。

まとめ

HTML に書いた CSS だけが当たらないというのは、未知のパターンになると思います。

困ったときは Console で、エラーを見る習慣を付けると良いと思います。

この記事で早期解決になることを願います。

Sena

Sena / Engineer

生涯に亘り技術を極めていきたい。