IT

【初心者向け】HTMLで文字色が変わらない原因を徹底解説

「HTMLに文字色の指定をしているのに色が変わらないのは何でだろう？」

「記述方法は合っているはずなのに文字色が変わらなくてドツボにハマってしまった.......」

なんてことはありませんか？

結論から言うと、簡単な記述ミスが大半で間違えていることが多いです。

この記事を書いている私はWeb制作会社で勤務経験がありますが、単純な記述ミスで無駄に時間をかけてしまった経験は何度あることか.......。

そんな方のためにこの記事では、

  • HTMLで文字色が変わらない原因
  • HTMLで文字色を変える方法

について解説していきたいと思います。

ぜひ最後までご覧ください。

HTMLで文字色が変わらない原因は？

まず最初に文字色が変わらない原因をざっと羅列してみました。

以下をご覧ください。

  • importantの指定がされている
  • class名の記述が間違っている
  • 全角で記述している
  • カラーコードの記述ミス
  • fontタグを使用している

詳しく説明していきます！

1、importantの指定がされている

importantとは記述を優先したい時や、強制的に指定させたいときに使用します。

<p style="color:red!important;">どこかでこの記述がされていないですか？</p>

上記のような記述がされてしまっていると、普通に文字色を指定するだけでは反映されなくなってしまいます。

そのため改善点としては

  • importantの記述を外すこと
  • 各々にclass名を振り当てること

以上2つで対策出来ます。

2、class名の記述が間違っている

class（クラス）名は使用していますか？（使用していなければここは飛ばしてOKです！）

class名＝HTMLのタグにCSSを割り振る必要な記述方法です。

例えばこんな感じ

<p class="test">これでtestというclass名が付きました</p>

このclass名便利ではあるけど、少し厄介なところも。
ドツボにハマってしまう原因もこれが一番多いんじゃないでしょうか。

class名でCSSを付与する際には以下のような記述になります。

.test {
 color:red;
}

この記述が間違っていて気づけないことが多いんです（泣）！！

例えば

  • 全角で書いてしまっていた
  • 最初のドットつけ忘れていた
  • ローマ字の記述が間違っている

という凡ミスです。これを見つけるのに30分とかかけることもザラですね......。

3、全角で記述している

前述したclass名の部分と被る部分ですが、CSSを全角で記述してしまっている場合。

「気をつけましょう」としか言いようがないので、半角で打ち込む癖をつけましょう！

4、カラーコードの記述ミス

カラーコードの記述方法って沢山ありますよね。

※ここでは16進数での例をお伝えします。

color: #0000;
color: #fff;

詳しい説明は割愛させていただきますが、色ごとに複雑な文字列になります。

大体はデザインカンプからコピペしたりして使用するんですが、何かの拍子で抜け落ちてしまったり、1文字消えてしまうと反映されないことがあるんです。

なので1つの原因として、確認してみることをおすすめします。

5、fontタグを使用している

fontタグとは以下の書き方をします。

<font color="red">

結論から言ってしまうと、この書き方でも反映されます！
ただ、HTML5では非推奨の為ここに記載させていただきました。

できればこの記述をするのであれば、下記を使用することをおすすめします。

<p style="color:red;"></p>

少し変えるだけなので推奨されている方法を覚えていきましょう！

HTMLで文字色を変えるCSSの書き方3選

勉強されている方ならご存知かとおもいますが、HTMLで文字色を変更する方法は3つあります。

  • インライン
  • styleタグ
  • CSSファイル

インラインに記述

上記の例でも出していた書き方ですね。

HTMLに直接CSSを書き込む方法で、ちょっとした文字色の変更であれば一番簡単なやり方です。

<p style="color:red;">インラインの書き方です。</p>

ただ、「文字色以外に文字の大きさも変えたい」とCSSを付け加えるのであればこの方法はおすすめしません。

なぜならスマホファーストである現在、PCとスマホで出し分ける必要が出てくるので逆に構築がややこしくなるからです。

styleタグ内に記述する

HTMLを書いておき、別の場所にstyleタグでCSSの記述をするやり方。

以下の通りです。

<p>styleタグ内にCSSを書き込みます。</p>
<style>
p {
 color:red;
}
</style>

HTMLファイルだけサーバーへアップしてしまえば、CSSも一緒に反映されるので手間が省けて便利ですよね。

※styleタグは<head>内に記述するのが正しいやり方です。上記はわかりやすいように並べて書いています。

CSSファイルを作成

HTMLとCSSの書き方で一番良い方法はCSSファイルを作成することです。

個人ブログでちょっとした変更を加えるだけであれば話は別ですが、ホームページなどの大きなコンテンツを作成する場合は、1つのCSSファイルに共通のclass名をかけば反映されるので管理のしやすさがダントツだからです。

作り方は簡単。
「style.css」というファイルを作り<head></head>の中に置くだけ。

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

※HTMLファイルと階層が違う場所にある場合は（フォルダ名）/style.cssという書き方になるので注意してください。

【まとめ】HTMLで文字色が変わらない原因は凡ミスが大半です

最後にまとめです。

原因として考えられるのは以下の5つ

  • importantの指定がされている
  • class名の記述が間違っている
  • 全角で記述している
  • カラーコードの記述ミス
  • fontタグを使用している

些細な変更をするだけなのに、解決策を見つけるだけに時間をかけてしまうのはよくあることです。

焦って見つけようとすると余計に時間が過ぎてしまうので、1つずつ確認して原因を突き止めて見てくださいね！

-IT