HTMLのspanにCSSが効かない原因とは？displayや優先順位も解説

HTMLで文章の一部だけ色を変えたいとき、spanタグにclassを付けてCSSを書くことがあります。しかし、実際に書いてみると「spanにCSSが効かない」「色は変わるのにwidthやheightが効かない」「WordPress上だけ反映されない」とつまずくことも少なくありません。spanにCSSが効かない原因は、spanタグ自体の問題ではなく、インライン要素の性質、CSSセレクタの書き方、優先順位、キャッシュのどれかにあるケースがほとんどです。

この記事では以下の内容を順番に解説します。

【結論】spanにCSSが効かない原因

spanタグにCSSが効かないときは、まず次の順番で確認しましょう。ここでは確認しやすいように、原因別に整理します。

最初に「CSSがまったく当たっていない」のか、「一部のプロパティだけ効いていない」のかを分けて考えると、原因を見つけやすくなります。

spanタグは見た目を変えるタグではない

spanタグは、文章の一部を囲むための汎用的なタグです。spanタグを書いただけでは、太字になったり、色が変わったり、横幅が変わったりするわけではありません。

<p>ここは<span>重要</span>です。</p>

このHTMLだけでは、画面上の見た目はほとんど変わりません。見た目を変えるには、classを付けてCSSで指定します。

<p>ここは<span class="point">重要</span>です。</p>

.point {
  color: #e60033;
  background-color: #fff59d;
}

spanタグ自体に特別な装飾効果はありません。「spanを書いたのに変わらない」は正常な動きです。

原因1：class名やセレクタの書き方が間違っている

spanにCSSがまったく効かない場合、まず疑うべきなのはclass名やセレクタの書き方です。初心者の方が一番つまずきやすいポイントでもあります。

class名の前にドットを書き忘れている

HTMLでclassを付けた場合、CSSではclass名の前にドットを書きます。

<span class="marker">重要</span>

marker {
  color: red;
}

このCSSは、<marker>というタグに対する指定になってしまいます。classを指定したい場合は、次のように書きます。

.marker {
  color: red;
}

classを指定するときは「.class名」、idを指定するときは「#id名」と書きます。

span .marker と span.marker の違いを間違えている

似ているようで意味が違う書き方にも注意が必要です。

span .marker {
  color: red;
}

これは「spanタグの中にある.marker」という意味です。次のHTMLには当たりません。

<span class="marker">重要</span>

spanタグ自身に付いたclassを指定したい場合は、スペースを入れずに書きます。

span.marker {
  color: red;
}

セレクタ内の半角スペースは「中にある要素」を意味します。何となく空けると別の指定になります。

全角文字やスペル違いが混ざっている

実務でも意外と多いのが、半角と全角の混在です。class名、ドット、ハイフン、アンダーバーは見た目が似ていても、違う文字ならCSSは反応しません。

<span class="text-red">注意</span>

.text_red {
  color: red;
}

この例では、HTML側はtext-red、CSS側はtext_redなので一致していません。

CSSがまったく効かないときは、HTML側のclass名をコピーしてCSS側に貼り付けると、入力ミスを減らせます。

原因2：spanにwidth・height・余白が効かない

spanタグに色や背景色は効くのに、widthやheightが効かない場合は、spanタグの表示形式が原因です。spanタグは基本的にインライン要素として扱われます。インライン要素は文章の流れの中に並ぶため、横幅や高さを自由に指定する箱としては扱いにくい性質があります。

<span class="label">NEW</span>

.label {
  width: 120px;
  height: 40px;
  background-color: #fff59d;
}

この場合、背景色は変わっても、widthやheightが思った通りに反映されないことがあります。

display: inline-blockでwidth・height・余白を効かせる

spanタグを小さなラベルやボタン風にしたい場合は、display: inline-block;を指定します。

.label {
  display: inline-block;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff59d;
}

spanに横幅・高さ・上下の余白をしっかり効かせたい場合は、displayをinline-blockやblockに変更するのが基本です。

margin-topやmargin-bottomが効かない場合も同じ

spanタグにmargin-topやmargin-bottomを指定しても、思ったように余白ができないことがあります。これもインライン要素の性質が関係しています。

.note {
  margin-top: 20px;
  margin-bottom: 20px;
}

上下の余白を作りたい場合は、spanではなくpタグやdivタグで囲むか、spanにdisplay: inline-block;を指定します。

文章の一部を装飾するだけならspanで問題ありませんが、箱として幅・高さ・余白を管理したい場合はdivタグやbuttonタグなど別の要素も検討しましょう。

原因3：CSSの優先順位で上書きされている

spanにCSSを書いているのに別の色やサイズになってしまう場合は、CSSの優先順位で上書きされている可能性があります。CSSは、複数の指定が同じ要素に当たった場合、セレクタの強さや読み込み順によって最終的に適用される値が決まります。

<p class="message">ここは<span class="point">重要</span>です。</p>

.point {
  color: red;
}

.message span {
  color: blue;
}

この例では、.message spanの方が後から書かれており、条件も具体的なので、文字色が青になることがあります。

後から読み込まれたCSSが勝つケース

同じ強さのCSSが複数ある場合、後に書かれたCSSが優先されます。

.point {
  color: red;
}

.point {
  color: blue;
}

この場合、最終的には青が適用されます。

WordPressテーマ側のCSSに負けているケース

WordPressでは、テーマやプラグインが独自のCSSを読み込んでいます。そのため、自分で書いたCSSよりテーマ側の指定が強く、spanの見た目が変わらないことがあります。

.entry-content .point {
  color: red;
}

このように、対象の親要素も含めて少し具体的に指定すると反映される場合があります。反映されないからといって、すぐに!importantを多用するのは避けましょう。後からCSSを直しにくくなります。

実務では開発者ツールで確認する

制作現場では、CSSが効かないときにブラウザの開発者ツールを使って確認します。対象のspanを右クリックして「検証」を開くと、どのCSSが当たっていて、どのCSSが取り消されているかを確認できます。CSSが上書きされているかどうかは、画面だけを見ても判断しにくいため、開発者ツールで確認するのが一番確実です。

原因4：CSSファイルが読み込まれていない

spanだけでなく、ほかのCSSも効いていない場合は、CSSファイル自体が読み込まれていない可能性があります。

linkタグのパスが間違っている

HTMLファイルからCSSファイルを読み込む場合、<link>タグのパスが間違っているとCSSは反映されません。

<link rel="stylesheet" href="style.css">

CSSファイルがcssフォルダの中にある場合は、次のように書きます。

<link rel="stylesheet" href="css/style.css">

CSSを書いたファイルと表示しているページが違う

初心者の方に多いのが、「CSSを書いたファイル」と「ブラウザで開いているHTML」が別の場所にあるケースです。似た名前のファイルが複数あると、編集したつもりでも別ファイルを触っていることがあります。VSCodeで編集しているファイル名と、ブラウザで表示しているファイル名が一致しているか確認しましょう。

styleタグの閉じ忘れやCSSの文法ミス

CSSの途中で波かっこを閉じ忘れると、それ以降のCSSが効かなくなることがあります。

.point {
  color: red;

.label {
  background-color: yellow;
}

この例では、.pointの閉じかっこがないため、後ろのCSSにも影響します。

.point {
  color: red;
}

.label {
  background-color: yellow;
}

原因5：ブラウザやWordPressのキャッシュが残っている

CSSは正しく書けているのに画面が変わらない場合、ブラウザやWordPressのキャッシュが古いCSSを表示している可能性があります。

ブラウザのスーパーリロードを試す

ブラウザは表示を速くするためにCSSを保存していることがあります。CSSを変更した直後に反映されない場合は、スーパーリロードを試しましょう。

WordPressではテーマ・プラグインのキャッシュも確認する

WordPressでは、ブラウザだけでなく、テーマ、キャッシュ系プラグイン、サーバー側キャッシュがCSSを保持していることがあります。

WordPressでCSSが効かない場合は、記事本文のHTMLだけでなく、テーマ・追加CSS・キャッシュ設定も確認しましょう。

実務Tips：まずは一時的に強い目印を入れる

制作現場では、CSSが読まれているか確認するために、一時的にわかりやすい指定を入れることがあります。

.point {
  outline: 3px solid red;
  background-color: yellow;
}

これで画面が変わればCSS自体は読み込まれています。変わらない場合は、class名、CSSファイルの読み込み、キャッシュを優先して確認します。「効かないCSS」を調べるときは、まず色やoutlineのように見た目がはっきり変わる指定で検証すると原因を切り分けやすいです。

原因6：WordPress・CocoonでspanのCSSが効かない

WordPressで記事を編集している場合、HTMLファイルを直接書くときとは違う原因でspanのCSSが効かないことがあります。特にCocoonなどのテーマを使っている場合は、記事本文、テーマCSS、追加CSS、キャッシュのどこで止まっているのかを切り分けることが大切です。

ビジュアル編集とコード編集の切り替えでspanが崩れることがある

WordPressの編集画面では、ビジュアル寄りの編集とHTML寄りの編集を切り替えながら作業することがあります。このとき、入力したspanタグやclass属性が意図通り残っているか確認しましょう。

<span class="point">重要</span>

編集後にコード側で確認したとき、上記のようなclass付きのspanが残っていれば、次はCSS側の問題を確認します。もしspanタグやclass属性が消えている場合は、ブロックの種類や編集方法が原因になっている可能性があります。WordPress上でHTMLを細かく書く場合は、通常の段落ブロックに無理に書くより、カスタムHTMLブロックやコードエディターで確認した方が原因を切り分けやすいです。

CSSは記事本文ではなく追加CSSや子テーマに書く

spanタグは記事本文に書いても構いませんが、CSSは記事本文の中に直接書くより、テーマの追加CSSや子テーマのCSSにまとめる方が管理しやすくなります。

<style>
.point {
  color: red;
}
</style>

<p>ここは<span class="point">重要</span>です。</p>

<p>ここは<span class="point">重要</span>です。</p>

.entry-content .point {
  color: #e60033;
  background-color: #fff59d;
}

WordPressでは、記事本文にspanタグ、追加CSSや子テーマにCSSを書く形に分けると、後から修正しやすくなります。

Cocoonではキャッシュ削除とCSSの反映先を確認する

Cocoonを使っている場合、追加CSSを書いてもすぐに画面へ反映されないことがあります。まずは次の順番で確認しましょう。

Cocoonや高速化設定でCSSを圧縮・結合している場合、古いCSSが残って反映されないように見えることがあります。

ブロックエディタでは装飾用spanの使いすぎに注意する

ブロックエディタでは、文字色、背景色、太字などの基本装飾はエディター側の機能で設定できます。小さな装飾まで毎回spanで書くと、後から編集するときにHTMLが読みにくくなります。

一方で、独自のマーカー、ラベル、注意テキストなど、サイト全体で共通化したい装飾はclass付きspanにしておくと便利です。

WordPressでは「HTMLが残っているか」「CSSが読み込まれているか」「キャッシュが残っていないか」の3点を見ると、spanにCSSが効かない原因を見つけやすくなります。

spanにCSSが効かないときのチェックリスト

最後に、確認項目をチェックリストで整理します。

チェック	確認内容
1	HTMLのclass名とCSSのclass名が完全に一致しているか
2	class指定にドット、id指定にシャープを書いているか
3	span .classとspan.classを混同していないか
4	width・height・上下marginを使う場合、displayを変更しているか
5	ほかのCSSに上書きされていないか
6	CSSファイルのパスや読み込み順は正しいか
7	ブラウザやWordPressのキャッシュを削除したか

spanにCSSが効かないときは、いきなりコードを大きく直すのではなく、class名、display、優先順位、キャッシュの順番で確認しましょう。

公式ドキュメントも確認する

spanタグやCSSの仕様を正確に確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs span要素
• MDN Web Docs displayプロパティ
• MDN Web Docs CSSの詳細度

まとめ

この記事では、HTMLのspanにCSSが効かない原因と解決策を解説しました。

spanにCSSが効かないときは、spanタグそのものではなく、インライン要素の性質、セレクタの書き方、CSSの優先順位、キャッシュを確認することが大切です。

色や背景色も変わらない場合は、class名やCSSファイルの読み込みを確認しましょう。色は変わるのにwidthやheightが効かない場合は、spanがインライン要素のままになっている可能性があります。その場合は、display: inline-block;を指定すると解決しやすくなります。

また、WordPressではテーマやプラグインのCSS、キャッシュによって反映が遅れるケースもあります。原因を一つずつ切り分けながら確認すれば、初心者の方でも落ち着いて解決できます。