【HubSpot】「なんでスタイル設定が効かないの？」ページの見た目が決まる順番を知ろう 🕵️‍♀️

🌱 はじめに

HubSpotでページを作っているときに、「スタイル設定したのに、なんでページには反映されないの…？💭」
そんな風に思ったこと、ありませんか？

ボタンの色を変えたはずなのに、なぜか変わってくれない。
フォームの見た目を整えたのに、ページではまったく違う表示になってる。
思った通りの見た目にならないとき、
「設定のしかたを間違えたのかな？」と不安になることもあると思います。

でも実は、スタイル設定がうまく反映されないのは“設定のしかた”ではなく、“どこで設定したか”が原因のことが多いんです。

この記事では、HubSpotでページの見た目がどうやって決まっているのかを、
公式ナレッジの内容をもとにわかりやすく整理し、実例付きで紹介していきます。
後半には、「反映されない！」というときに役立つ練習問題も用意しました🕵️‍♀️

「なんで反映されないの？」のモヤモヤを、“順番”の視点からスッキリ解消していきましょう！

🎯  見た目の正体は順番にあり！HubSpotスタイルの仕組み

「スタイル設定したのに効かない…」というときに見直したいのが、そのスタイルがどこで設定されたものかということ。

HubSpotでは、スタイルの“出どころ”によって反映される優先順位が決まっているんです。
この優先順位は、HubSpotナレッジベースでも次のように紹介されています👇

HubSpot内のCSSスタイル指定は、後述するように、それがHubSpotで設定されている場所に基づいて順序正しく適用されます。例えば、グローバルスタイルシートで設定されたスタイル指定は、特定のページで設定されたスタイル指定によって上書きされます。 

🔢 HubSpotのスタイル適用の順番

詳しい説明/定義はナレッジベースの方にありますが、ざっくりと理解するなら👇のイメージになります！

🧩 ポイント！

• スタイルが反映されない理由は「書き方のミス」ではなく、「もっと強いスタイルが上書きしているから」というケースがとても多いです

• だからこそ、「どこで設定されたスタイルか？」を把握することが、トラブル解決の第一歩！

👀 次のセクションでは、インスペクトツールを使って「どのスタイルが効いてるのか？」を実際に見ていきます💻✨

🧐 インスペクトツールで “誰が勝ってるか” を見てみよう

スタイル設定が反映されないとき、まずやってみたいのが「インスペクト（デベロッパーツール）」での確認です。

インスペクトを使うと、どのスタイルが効いていて、どのスタイルが効いていないかが視覚的にわかります。
それによって、「設定したのに反映されない！」の原因が見えてくるんです。

🔧 インスペクトってどう使うの？

1. Chromeなどのブラウザでページを開いて、右クリック > [検証] をクリック（もしくは ブラウザ右上の [...] > [その他のツール] > [デベロッパーツール] をクリック）
2. [Elements] タブを開き、左上の矢印↖️をクリック
3. 気になる要素にマウスオーバーしながら、どんなスタイルが適用されているかを確認します

＊操作としては、ナレッジベースに掲載されているGIFがわかりやすかったので引用します👇

👀 ここで見るべきポイントはこの2つ！

✅ ① Stylesタブ：どのスタイルが当たってるか

• 実際に有効になっているスタイルは黒字で表示されます

• 打ち消されているスタイルは打ち消し線で消されてで表示されます（これが「効いてないスタイル」！）

• それぞれのスタイルの右側には、どこから読み込まれたものかも書いてあります

✅ ② Computedタブ：最終的に効いている値

• たとえば「背景色（background-color）」が何色になっているかを確認できます

• どの設定が最終的に選ばれたのかが一目瞭然！

🔍 練習問題で体感してみよう！

スタイルが反映されないとき、
「どのスタイルが当たっていて、どれが無視されているのか？🔍」を実際に見てみると理解がぐっと深まります。

ここでは、よくある3つの“効かないスタイル設定”の例を取り上げて、
インスペクトでどこを見るべきかも一緒に確認してみましょう。

✅ 練習問題 ①：ページエディターで設定した色が反映されない Part1

状況：
ページエディターの「スタイル」タブで、ボタンの背景色を青に設定。
でもページを開いてみると、なぜか紫のまま…。

テストページ ：

👇のテストページで実際にインスペクトしてみましょう！🔍

https://23823306.hs-sites.com/css_trouble-shooting_01

チェックポイント：

• インスペクトで、ボタンの background-color がどのCSSから来ているかを見る

• ナレッジベースの記載を参考にしつつ、どのソースが影響しているか確認してみましょう

✅ 練習問題 ②：ページエディターで設定した色が反映されない Part2

状況：
ページエディターの「スタイル」タブで、ボタンの背景色を青に設定。
でもページを開いてみると、なぜかピンクのまま…。

テストページ ：

👇のテストページで実際にインスペクトしてみましょう！🔍

https://46553999.hs-sites.com/css_trouble-shooting_02

ヒント：

• 調べ方は①と同じ！
• スタイルのソースがページURLの場合はどんな時か 見当をつけてみましょう（なんとなくこれかな？でOK！🌱）

✅ 練習問題 ③：ヘッダーHTMLに書いたスタイルが効いてない？

状況：
② のページについて、テーマ設定を変えずにボタンの色を変えたいので
ページの設定 > [Head の HTML] にスタイルを追加してみた

（ページ内のボタンをオレンジ色にしたい！）

けど、色を変えたいボタンの色が反映されてない & 違うボタンの色が変わっちゃった…

テストページ ：

👇のテストページで実際にインスペクトしてみましょう！🔍

https://46553999.hs-sites.com/css_trouble-shooting_03

ヒント：

• Head の HTML で指定されているクラス と 実際に適用されているクラス を比較してみると…？🔃

📝 まとめ

「スタイル設定したのに反映されない…」
そんなとき、つい「自分の設定ミスかな？」と不安になってしまうこともあるかもしれません。

でも、今回見てきたように、ページの見た目は“どこでスタイルを設定したか”によって優先順位があるため、
正しく設定していても別のスタイルが勝っているだけ、ということがよくあります。

💡 今回の記事でわかったことまとめ

• HubSpotでは、スタイルの出どころによって“効きやすさ”に順番がある

• インスペクトツールを使えば、「どのスタイルが効いてるのか」がちゃんと見える

「CSSが効かない！」「設定したのに見た目が変わらない…」
そんなときこそ、"スタイルの優先順位" や "スタイルの出どころ"を見にいく視点を持って、
まずはインスペクトで落ち着いて観察してみてください🕊️