こんにちは！Kredo Blog編集部のさおりです！
CSSを書き直して保存したのに、見出しの色が変わらない。指定を下へ移したり、数値を大きくしたりしても直らず、どこから調べればよいか迷うことはありませんか。
そんなときは、CSSが届いているか、目的の要素に合っているか、その指定が採用される条件かを順に確かめると、修正する場所を絞れます。同じ「効かない」でも、ファイルの場所が違う場合と、別の指定が優先されている場合では直し方が違います。
この記事では、六つの小さな失敗例を使って、ブラウザで何を見るか、どこを直すか、直した後に何を確かめるかを説明します。修正前後を自分で動かせる練習教材ZIPも用意しました。HTMLのclassとCSSの基本的な書き方を一度学んだ方が、次に試せる内容です。
CSSが効かないときは、変わらない箇所を一つに絞る
最初に「ページ全体がおかしい」を、観察できる一つの問題へ言い換えましょう。たとえば「学習メモという文字を青にしたいが、黒のまま」と決めます。対象の要素と、確認するプロパティが分かれば、ブラウザに表示された根拠を追えます。
Chromeでは対象の文字を右クリックして「検証」を開き、Elements（要素）でその要素を選びます。Styles（スタイル）ではどの指定が候補になっているかを見て、Computed（計算済み）ではcolorなどの値と参照元を確かめます。表示名はブラウザの言語設定などで異なります。参考：Chrome DevToolsのCSSリファレンス
| 今見えている症状 | 最初に調べる場所 | 確かめたいこと |
|---|---|---|
| 外部CSSの変更がどれも反映されない | NetworkのCSSリクエスト | 目的のURLから、変更後の内容が届いたか |
| 一つの要素だけ変わらない | ElementsとStyles | HTMLのclassとセレクタが一致するか |
| 指定は見えるが採用されていない | Stylesの警告・打消し線とComputed | 無効な値か、別の指定による上書きか |
| ある画面幅でだけ変わらない | メディアクエリと表示幅 | 今の幅が指定の条件に入っているか |
| 値は正しそうなのに幅が変わらない | displayと実際の寸法 | その要素へwidthが適用されるか |
この表は調査の入口です。一つの症状に原因が一つとは限りません。まず最小限の変更で仮説を確かめ、直らなければ次の段階へ進みます。DevTools上の試し書きは通常、元のファイルへは保存されないため、解決した変更は編集しているファイルにも反映してください。
CSSファイルが届いているかを確認する
原因1：読み込む場所やファイル名が違う
教材の原因1では、HTMLが一つ上の階層にあるstylesフォルダーのCSSを読みます。修正前は、存在しないmissing.cssを指定しています。
<!-- 修正前：この教材にmissing.cssはありません -->
<link rel="stylesheet" href="../styles/missing.css">
<!-- 修正版：実在するファイルの場所へ合わせる -->
<link rel="stylesheet" href="../styles/loaded.css">loaded.cssの中身は、.title { color: #1f5892; }です。教材をローカルHTTPで開くと、修正前のCSS取得は404、修正版は200になります。色は黒から青へ変わります。ここで直すのはCSSの強さではなく、hrefが指す場所です。
Networkでは、状態と本文をセットで見る
- DevToolsのNetwork（ネットワーク）を開いた状態で、ページを再読み込みします。
- CSSで絞り込み、目的のファイルを選びます。要求先のURLとStatusを確認します。
- Response（レスポンス）で、自分が保存した指定が届いているかを見ます。
200でも、想定と別のファイルや古い内容なら目的の変更は反映されません。逆に304は、手元のキャッシュを再利用できるという応答で、数字だけを見て失敗と判断するものではありません。CSSファイルの一覧だけで終えず、変更した行が届いているかまで確認しましょう。
保存済みなのに古い内容が届く場合は、確認中だけNetworkのDisable cacheを使って再読み込みする方法もあります。これはDevToolsを開いている間のブラウザ側の確認で、配信元やCDNのキャッシュまで消す操作ではありません。まず保存先と要求URLを照合し、必要な範囲で調べます。参考：Chrome DevToolsのNetworkリファレンス
セレクタと値が、目的の要素に合っているか調べる
原因2：class名の一文字が違う
教材のHTMLは、親にstudy-card、文字にtitleというclassを付けています。
<div class="study-card">
<p class="title">学習メモ</p>
</div>/* 修正前：親のclass名が違う */
.study_card .title { color: #1f5892; }
/* 修正版：HTMLのハイフンへ合わせる */
.study-card .title { color: #1f5892; }_と-は別の文字です。CSSファイルが届いていても、修正前のセレクタはこの要素に合いません。Elementsで実際のclassと親子関係を確認し、同じ指定先になっているかを比べます。動的なページでは、手元のHTMLとブラウザ上の構造が同じとも限りません。
「.」や空白、「>」の意味が曖昧なときは、CSSの記号とセレクタの意味を先に確認すると、対象を取り違えにくくなります。
原因3：プロパティ名は正しいが、値が無効
/* 修正前：数値と単位を離している */
.title { font-size: 24 px; }
/* 修正版 */
.title { font-size: 24px; }24 pxはfont-sizeの有効な長さの値にならず、この宣言は採用されません。教材では別の有効な指定で16pxになっています。空白を削ると24pxへ変わります。「無効な宣言を無視する」と「CSSファイル全体を読み込まない」は違うため、ほかの指定まで壊れたと決めつけないことが大切です。
ChromeのStylesでは、無効なプロパティや値に警告が付き、別の指定に上書きされたプロパティにも打消し線が付きます。線があるから、全部が優先順位の問題というわけではありません。警告やヒント、Computedの参照元を合わせて見てください。参考：Chromeの無効・上書き・非アクティブなCSSの見分け方
別の指定に上書きされる理由を確かめる
原因4：後ろに書いたclassより、IDを含む指定が優先される
原因4の教材では、親にid="lesson"があり、文字にはclass="title"があります。次の二つの指定が、同じ文字の色を指定します。
#lesson .title { color: #943d3e; } /* 赤 */
.title { color: #1f5892; } /* 青：後ろに書いている */表示は赤です。この例は、どちらも通常の作者スタイルでレイヤーを使わず、!important、style属性、アニメーションなどもありません。この条件では、IDを含む#lesson .titleの詳細度が高いため、青の指定を後ろへコピーしても解決しません。
CSSの採用は、単に「最後の行」だけで決まりません。出所・重要度・レイヤーなどを比較した後で詳細度を比べ、条件が並ぶ場合に記述順などが関わります。@scopeの近接性が関係する場合もあるため、「IDなら常に勝つ」という覚え方も避けましょう。参考：MDNの詳細度
追加する前に、不要な競合を取り除けないか考える
この教材の目的は、学習メモを青にすることです。赤の指定は不要なので、修正版ではID側のcolorを削り、青の指定だけに整理しています。本番ページで同じ変更をするなら、赤の指定がほかの要素に必要かを先に調べてください。
Stylesで赤の宣言を一時的に無効にして青へ変わるかを見ると、仮説を確かめられます。原因が分からないまま!importantを重ねるより、どのファイルのどの指定が競合したのかを記録して修正すると、後から読み返すときにも理解しやすくなります。
画面幅とレイアウトの条件も確認する
原因5：狭い画面へ指定したいのに、条件が逆
原因5の目的は「600px以下のときだけ青」です。ところが修正前はmin-widthを使い、600px以上を対象にしています。
/* 修正前：600px以上 */
@media (min-width: 600px) {
.title { color: #1f5892; }
}
/* 修正版：600px以下 */
@media (max-width: 600px) {
.title { color: #1f5892; }
}| 表示幅 | 修正前：min-width | 修正版：max-width |
|---|---|---|
| 390px | 黒 | 青 |
| 1280px | 青 | 黒 |
修正版をPCの広い画面で開いて黒くても、この仕様では正しい結果です。スマホとPCが同じ見た目になることを合格条件にせず、先に決めた仕様と照合しましょう。min-widthもmax-widthも600pxちょうどを含みます。自分のページでは境界の前後も確かめてください。
メディアクエリは、画面幅などの条件が合うときに指定を適用する仕組みです。端末の名前だけで判定するものではありません。また、CSSファイルが読み込まれたことと、その中の条件に合うことは別です。参考：MDNのメディアクエリ
原因6：普通のspanにwidthだけを指定している
原因6の確認対象は、通常のspanです。CSSに160pxと書いても、文字を包む背景の幅が160pxにはなりません。
/* 修正前：spanはこの教材ではinline */
.title { width: 160px; background: #e6eef8; }
/* 修正版：行内に置きながら幅を指定する */
.title {
width: 160px;
background: #e6eef8;
display: inline-block;
}通常の非置換インライン要素にはwidthが適用されません。今回の修正版ではinline-blockに変えることで、実際の幅も160pxになります。ただしdisplayを変えると配置にも影響するので、目的に合う表示方法かを確認してください。出典：MDNのwidthの適用対象
教材の「現在の値を表示」を押すと、計算上のwidthと実測幅を比べられます。今回のChromeでは修正前のwidthが160pxでも、実測幅は64px、修正版は160pxでした。修正前の文字幅はフォントなどで変わります。値が表示されていることと、見た目の寸法がその値になることを分けて確認する例として試してみてください。要素の並び方から整理したい方は、CSSレイアウトの基本も参考になります。
六つの失敗例を直し、同じ条件でもう一度試す
ZIPには修正前後のHTML、CSS、比較画面、24状態の期待値、四つの練習問題と答え、実行結果を入れています。展開後にindex.htmlを開き、例を選んで比べてください。「修正版を見る」は完成例を開くボタンで、自分の編集内容を保存する機能ではありません。
ローカルファイル同士の参照がブラウザで制限される場合や、原因1の404と200をNetworkで観察する場合は、READMEにあるローカルHTTP方式を使います。Python 3がすでに使える環境なら、解凍した教材フォルダーへ移動して次を実行します。
python3 -m http.server 8770 --bind 127.0.0.1ブラウザでhttp://127.0.0.1:8770/を開きます。終了はターミナルでCtrl+Cです。Pythonが入っていない環境でそのまま動くコマンドではありません。教材の外部サービスへの送信やファイル保存はありません。
- 「class名が一致しない」の修正前を開き、黒い文字と指定を観察する。
- cases内のselector-before.htmlを同じフォルダーへ別名でコピーし、そのコピーを編集する。
- 実際のstyle内の
study_cardをstudy-cardへ直す。説明用のコード表示だけを書き換えない。 - 保存してコピーしたページを開き直し、「現在の値を表示」で青の
rgb(31, 88, 146)になったか確かめる。 - 変更点を一行で記録する。別の原因も、対象・期待・実際・変更・再確認を同じ順で残す。
「24状態を確認」は、六つの例×修正前後×幅390px・1280pxを独立したフレームで照合します。2026年10月6日にmacOSのChromeで24状態すべてが期待どおりになることを確認しました。「合格」には意図した失敗の再現も含まれます。さらに原因5の単独ページを390pxと1280pxで、原因6の実測値を修正前後で確認しています。これは教材の確認結果で、実機スマートフォンや全ブラウザ、実際のサイトの配信設定まで検証したものではありません。
四つの問いで、原因の説明まで練習する
- 原因2は、どの一文字を変えると青になりますか。
- 原因4は、同じ青の指定を一番下へ追加すれば直りますか。
- 原因5の修正版が1280pxで黒いのは、修正失敗ですか。
- 原因6でwidthの値と見た目が違うとき、次に何を調べますか。
答え：1はアンダースコアをハイフンへ。2はこの条件では直らず、不要なID側の指定を整理します。3は600px以下だけ青という仕様なので正しい結果です。4はdisplayとwidthの適用対象、実際の寸法を確認します。
質問する場合も、ページ全体を渡すより「このHTML・このCSS・この幅で再現する」と絞れると、相手が試しやすくなります。AIへ不具合を相談するための最小再現例の作り方では、期待結果と再現手順をまとめる練習ができます。
CSSが反映されないときによくある質問
最初から!importantを付けてもよいですか？
ファイルが届かない、セレクタが合わない、値が無効という原因は、!importantでは直りません。上書きの問題でも、まず採用されている指定と必要な範囲を調べましょう。重要度を変える必要がある場面はありますが、原因を隠すために追加を重ねると調整が難しくなります。
キャッシュを消したのに反映されません
保存したファイルと、ページが読み込むファイルが違う可能性もあります。ビルドツールを使っている場合は、編集元と配信される出力の対応も確かめてください。Networkで変更後の内容が届いていれば、次はセレクタ・値・上書き・条件を調べます。
DevToolsでは直るのに、再読み込みすると戻ります
DevToolsで試した変更が元ファイルへ保存されているかを確認します。通常の一時編集は再読み込みで失われます。ファイルを直して保存し、同じURL・同じ画面幅でもう一度確かめてください。
色は直りましたが、配置だけがおかしいです
一つの原因が直っても、別の問題が残ることはあります。次は対象を配置へ絞り、親要素のdisplay、幅、余白などを一つずつ調べます。関係するHTMLとCSSを小さく残して再現すると、他の指定との影響を切り分けやすくなります。参考：MDNのCSSデバッグ
まずは一つの文字で、「何を期待して、何が表示され、どの変更で直ったか」を説明できれば十分です。その記録が、次に似た不具合へ出会ったときの手掛かりになります。
学ぶ順番や次の課題を相談する
英語とITをどのように学んでいくか迷っている方は、今できることと作りたいものを整理して、無料カウンセリングで相談できます。
英語でIT・AIを学べるKredo
英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
