HTMLで文字色・背景色を変更する方法｜初心者でもすぐできるデザイン調整

ホームページを作っていると、

こんなときに役立つのが、文字色と背景色の変更です。

そこでこの記事では、初心者でもすぐできる色の変更方法をわかりやすく解説します。

ホームページには、色があった方が読みやすくなるので、ぜひ実施してくださいね！

HTMLで色がうまく変わらないよくある原因

まずは、HTMLで色がうまく変わらないよくある原因から見ておきましょう。

指定方法を知らない

色は style の中で指定します。

古いタグを使っている

昔はこのような書き方がありました。

<font color="red">赤い文字</font>

今は使わない方法なのでおすすめしません。
（でも、使用はできます）

書き方を間違えている

セミコロンの入れ忘れなどで反映されないことがあります。

HTMLで文字色を変更する一番簡単な方法

次に、HTMLで文字色を変更する一番簡単な方法をご紹介します。

こちらが基本の書き方です。

<p style="color:red;">赤い文字</p>

これだけで文字が赤色になります。

color が文字の色を指定する命令です。

HTMLで背景色を変更する方法

あと、HTMLで背景色を変更する方法もご紹介します。

<p style="background-color:yellow;">背景つき文字</p>

これで文字の後ろが黄色になります。

文字と背景を同時に変更する方法

文字と背景を同時に変更する方法をご紹介します。

両方まとめて指定することもできます。

<p style="color:white; background-color:blue;">文字と背景</p>

文字が白、背景が青になります。

色を16進数で指定する方法

色を16進数で指定する方法をご紹介します。

細かく色を決めたいときは、数字で指定できます。

<p style="color:#ff0000;">赤色</p>

#ff0000 が赤色を表しています。

よく使われる色にはこの指定が多いです。

よくある失敗と直し方

よくある失敗と直し方について、お伝えします。

colorを書き忘れている

<p style="red;">文字</p>

👉 正しくは color:red; と書きましょう。

セミコロンがない

<p style="color:red background-color:yellow">文字</p>

👉 各指定のあとに ; を入れます。
（私はこのミスをよくやります。。）

古いfontタグを使っている

👉 style指定に変更すればOKです。

初心者向けのおすすめな色の指定方法

おすすめな色の指定方法について、ご紹介します。

文字色だけ

<p style="color:blue;">青い文字</p>

背景色だけ

<p style="background-color:#eeeeee;">背景つき文字</p>

両方セット

<p style="color:white; background-color:#333333;">強調表示</p>

まとめ

「HTMLで文字色・背景色を変更する方法｜初心者でもすぐできるデザイン調整」の内容はいかがでしたでしょうか？

HTMLで色を変えるのはとても簡単です。

これだけでデザインは一気に見やすくなります。

実際に、ホームページに色が付くと、華やかになりますし、読みやすくなりますよね。

ただ、いろいろな色を使ってしまうと、落ち着きのない印象（子供っぽい印象）になってしまうので、色は2色から3色くらいをメインとして使うと良いですよ。

ちなみに、当サイトのテーマカラーは、紺色です。

白色ベースで、紺色をテーマカラーとして作り、文章で強調したいところは赤字を使うという感じですね。

良かったら、参考にしてくださいね！