• HOME
  • HTML/CSS
  • HTMLで文字の色を変える方法(色に関する知識も解説)
  • HTML/CSS
  • css
  • html

HTMLで文字の色を変える方法(色に関する知識も解説)

HTMLで文字の色を変える方法(色に関する知識も解説)

「HTMLで文字の色を変える方法が知りたい。また、色の知識が知りたい…。」と思ったことはありませんか？

この記事の構成としては、「HTMLのみで文字の色を変える方法」と「CSSで文字の色を変える方法」と「文字の色を変える場面」と「色に関する2つの基礎知識」の4つを解説していきます。

それでは、まずHTMLで文字の色を変える方法についてみていきましょう。

HTMLのみで文字の色を変える方法

HTMLのみで文字の色を変更する方法には以下の2つがあります。

  1. style属性を使う
  2. styleタグを使う

(※補足)fontタグでも文字の色は変えられましたが、fontタグはHTML5で廃止となりました。

それぞれ説明していきます。

style属性を使う

まずは、style属性です。

色を変えたい文字のタグにstyle属性を書きます。

たとえば、コードは以下のように書きます。

<p style="color: blue">これはstyle属性を使っています。</p>

出力すると以下のようになります。

「color」という文字のあとに色の名前を書きました。

文字の色を直接書く以外にも色をあらわす方法があります。

色の名前ではなく、カラーコードで色を指定することもできます。

カラーコードは、「#」+「6ケタのコード」となっています。

使う文字は、0〜1の数字とa〜fのアルファベットになります。

1~2ケタ目が「赤」、3~4ケタ目が「緑」、5~6ケタ目が「青」を表しています(下の図のように)。

0→fに進むにつれてその色が強くなっていきます。

たとえば、「赤」だと「#ff0000」になります。

<p style="color: #ff0000">これはstyle属性を使っています。</p>

この赤、緑、青は光の3原色に基づいています。

なので、「#ffffff」は「白」を表すことになります。

色の指定のしかたとして、rgb値を書くという方法もあります。

rgb値は、rが「red(赤)」、 gが「green(緑)」、 bが「blue(青)」のことになります。

赤、緑、青の3色を使い、色を指定します。

コードの書き方は以下のようになります。

<p style="color: rgb(55, 238, 31)">これはstyle属性を使っています。</p>

rgbのそれぞれに、0~255までの数値を指定します。

数値がおおきいほど、その色が入っているということになります。

rgb値もカラーコードのときと同様、光の3原色に基づいています(たとえばr、g、bの値をそれぞれ最大値の255にすると白色になります)。

(※補足)Visual Studio Codeというテキストエディタだと、簡単にrgb値が決められます。また、色がテキストエディタ上で表示されてわかりやすいです(下の画像を参照)。

以上、HTMLのみで文字の色を変えるときにはstyle属性が使うということでした。

styleタグを使う

HTMLのみで文字の色を変える2つ目の方法が、styleタグの使用です。

色を変えたい文字があるタグやclass、idを書き、それに対して色を指定していきます。

たとえば、コードは以下のように書きます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: orange;
      }
    </style>
  </head>
  <body>
    <p>styleタグを使ってます。</p>
  </body>
</html>

※もちろん色の名前でなく、カラーコードやrgb値でもいいです。

以上、HTMLで文字の色を変えるときはstyleタグも使えるということでした。

CSSで文字の色を変える方法

ここからは、CSSで文字の色を変える方法を説明していきます

※基本的に色や見た目のスタイルを変更は、HTMLではなくCSSで行います。

コードは以下のように書きます。

<p>これはCSSを使っています。</p>
p {
  color: orange;
}

コードは先ほど説明したstyleタグのときと同じです。

HTMLのみで色などの見た目のスタイルをかえるよりも、CSSで変えることのほうが一般的なのでおさえておきましょう。

 文字の色を変える場面

文字の色を変える場面として、「文字を強調する場面」が挙げられます。

たとえば、タイトルや重要項目などの目立たせたい部分があるときです。

当たり前ですが、色を変えた部分は目立ってみえます。

目立たせたい文字の色を変えることで、人が見たときに見やすいデザインになります。

色に関する2つの基礎知識

色の基礎知識として以下の2つを説明していきます。

  1. 色のもつイメージ
  2. 色の統一感

それぞれみていきましょう。

色のもつイメージ

色はそれぞれ連想されるイメージがあります。

たとえば、黒は「高級感のあるイメージ」だったり、白には「清潔」といったイメージがあります。

高級感を出したいのにカラフルに色を使ったり、子供向けのデザインなのに黒色で統一感を出したりはしませんよね(あなたの今までの経験からもわかることでしょう)。

色を選ぶときは、伝えたいイメージに近い色を選ぶようにしましょう。

色の統一感

色を複数選ぶときは色の統一感も重要になってきます。

そのために、文字の色やの背景色、絵などの色それぞれの調和が大切になってきます。

色を使いすぎると、見ている人の脳のリソースが使われて、ストレスになるためです。

たとえば、青を基調としたデザインをつくるなら青にちかい色を使うと統一感が出ます(水色など)。

(※補足)何かを強調したい場合は、ベースとなる色と反対の色(色相環で反対にある色)を使うと、目立ちやすくなります。

色を選ぶときは統一感を大切にしましょう。

まとめ

いかがでしたでしょうか。

HTML/CSSでの文字の色の変え方がクリアになったことでしょう。

また、色のに関する基本的な知識も覚えていると使えるので、ぜひおさえておきましょう。

今回説明した知識を参考にしてみてください。