Webページを作るとき、見出しだけ赤くしたいリンクを目立たせたいなど、文字の色・HTML 文字色を変更したい場面はよくあります。文字色を上手に使うことで、情報の強調やデザインの印象を大きく変えることができます。この記事では、HTML 文字色の基本から、古い<font color=””>タグの使い方、そして現在主流のCSS color指定までを初心者向けに丁寧に解説します。さらに、実際に使えるカラーコード指定やデザインのコツも紹介します。
HTMLで文字色を変える基本を知ろう
文字の色を変える目的とデザインへの効果
文字の色を変更することで、ページの印象や情報の伝わり方が大きく変わります。例えば、赤色は注意喚起、青色は信頼感、緑色は安心感を与えるといった効果があります。適切なHTML 文字色設定は、ユーザーにとって見やすく分かりやすいデザインにつながります。
HTMLで色を指定する方法の種類
HTMLでは、文字の色を指定する方法として主に次の2つがあります。
- 旧タグ・<font color=””> を使う方法（現在は非推奨）
- CSS指定・colorプロパティを使う方法（現在の標準）
CSSでの色指定の基本は、colorプロパティで文字色を指定する方法を理解することから始まります。これはCSSの基礎でもあり、最も使用頻度の高いプロパティの一つです。
旧タグとCSSの違いを理解する
かつては<font>タグを使って色を変更していましたが、HTML5では非推奨・deprecatedとなっています。代わりに、デザインはCSS・スタイルシートで管理するのが正しいやり方です。
非推奨タグ <font color=””> の使い方と注意点
<font>タグの基本構文と使い方
<font color="red">この文字は赤色です。</font>
color属性に色名やカラーコードを指定すると、その範囲の文字色が変わります。色名・red, blue, greenなどによる指定も可能です。
<font color="blue">青い文字です。</font>
使用できる主な色名：red, blue, green, yellow, black, white, gray など。
カラーコード・#RRGGBBによる指定
より細かく色を設定したい場合は、カラーコードを使います。
<font color="#FF6600">オレンジ色の文字です。</font>
カラーコードは「#」＋「赤（R）・緑（G）・青（B）」を16進数・00〜FFで指定する形式です。たとえば、#FF0000 は赤、#0000FF は青を表します。
より詳細なカラーコード指定方法や、CSSの色指定（color値）の書き方と関数も参考にすると理解が深まります。
CSSで文字の色を変える正しい方法
CSSで文字色を変更する基本構文は次のとおりです。
p {
color: red;
}
この場合、すべての<p>タグの文字が赤になります。
外部CSSと内部スタイルの使い分け
- 内部スタイル・HTML内の<style>タグに直接書く方法
- 外部CSS・.cssファイルを別に作り、複数ページで共有
たとえば、CSSで文字の色を変える方法の実例では、初心者向けに内部スタイルと外部CSSの両方が丁寧に説明されています。
色指定の3パターン・色名・16進数・RGB／HSL指定
| 指定方法 | 記述例 | 特徴 |
|---|---|---|
| 色名指定 | color: red; | 手軽で初心者向け |
| 16進数指定 | color: #00CCFF; | 細かい色調整が可能 |
| RGB指定 | color: rgb(255, 100, 0); | 色の濃淡を数値で指定できる |
| HSL指定 | color: hsl(200, 80%, 50%); | デザイン調整に便利 |
実際のサンプルコードでの使い方
<style>
h1 { color: #ff6600; } /* オレンジ */
p { color: #333333; } /* グレー */
span { color: rgb(0, 120, 255); } /* 青系 */
</style>
HTML＋CSSで文字色を統一・デザインするコツ
同じ色を複数の要素に使いたい場合、CSSのクラス・classを使うと便利です。
.text-red { color: red; }
<p class="text-red">この文字は赤色です。</p>
見出し・リンク・本文の配色バランス
- 見出し・強調色・赤や青など
- 本文・読みやすい濃いグレー #333333
- リンク・青 #0066cc や強調色に統一
配色の一貫性を保つと、サイト全体の印象が整います。
可読性を高める配色のポイント
背景とのコントラストを意識しましょう。白背景なら黒や濃いグレー、黒背景なら明るい色・白・黄・水色などが見やすいです。
まとめ・HTMLの文字色変更はCSS指定が基本
HTML 文字色を変更するには、古い<font>タグではなく、CSS colorプロパティを使うのが基本です。CSSで統一的に管理することで、デザイン変更が簡単になり、Webページ全体の保守性も向上します。
- <font color=””>は現在非推奨
- CSSのcolorプロパティで統一管理
- 初心者はまず色名やカラーコードから始める
- クラスや外部CSSを活用すると効率的
HTMLの基礎を学ぶうえで、色指定はCSSに慣れる第一歩です。今日からCSS color指定を使って、見やすく美しいWebページを作ってみましょう。
