【学習者必見】HTMLタグとCSSで文字の色を自由に変える！今すぐできる実践方法を詳しく解説
生徒ペン博士！テキストの色を変えたいのですが、よくわかりません。
ペン博士任せるのじゃ。今回は、HTMLタグやCSSを使って文字の色を指定する方法を解説するからよーく聞くんじゃぞ。
生徒はい！お願いします！
Web制作を学び始めると、HTMLやCSSを使ったスタイル設定で最初に壁にぶつかることが多いです。特に、文字の色を自由に変える方法は基本的なスキルでありながら、正確に理解することが難しいと感じるかもしれません。
本記事では、HTMLタグやCSSを使って文字の色を指定する具体的な方法を、初心者でもわかりやすく解説します。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【子育てママさん必見】「在宅×副業」を達成！多方向で活躍中のママさんフリーランスにインタビュー！
ペン博士、ママさんなのに在宅で副業もこなしている方がいるって聞いたんですけど、本当ですか？だとしたらすごすぎます！ うむ、うちの受講生でな、まさに“時間も場所…
菅井さんの主な制作実績はこちら
目次
HTMLで文字の色を指定する方法
fontタグを使う
HTMLで文字の色を指定する際に、古くから使われていた方法の一つに<font>タグがあります。このタグは、HTMLの初期から利用されており、簡単に文字の色やフォントスタイルを変更できるため、初心者にとっては分かりやすい手法です。
たとえば、<font>タグを使って赤色の文字を表示したい場合、次のように記述します。
<font color="red">この文字は赤色です</font><font>タグのcolor属性を使って、色を指定でき、指定したい色を英語の色名や16進数カラーコード（例：#ff0000）で記述することで、文字の色を簡単に変更できます。
例として、次のコードは青色の文字を表示する方法です。
<font color="#0000ff">この文字は青色です</font>また、次のようにRGB値を使用して色を指定することも可能です。
<font color="rgb(255,0,0)">このテキストは赤色です</font>RGBの各値（赤、緑、青）の組み合わせで微調整を行い、より詳細な色の指定が可能になります。
HTMLで文字の色を指定する際の注意点
非推奨！？ fontタグについて
<font>タグは、HTMLの初期から文字の色やサイズを指定するために使われてきましたが、現在では非推奨となっています。（HTML公式ページ<font>）
HTML5の仕様において、このタグは使わないことが推奨されており、代わりにCSSを用いたスタイル設定が一般的です。なぜなら、<font>タグはデザインと構造が混在するため、HTMLの目的である「構造を記述する言語」としての役割から逸脱してしまうからです。
<font>タグを使う問題点
・HTML5以降では非推奨
コードが読みにくくなり、保守性が低下する。
・保守が大変
複数ページや複数要素に同じ色を適用する場合、すべての箇所に <font> タグを書かなければならず非効率。
・デザインの一貫性が崩れる
更新作業の際にミスが発生しやすく、統一感を保ちにくい。
・互換性の問題
最新ブラウザでは表示されても、古いブラウザや特定環境では崩れる可能性がある。
これらの理由から、現在では<font>タグではなく、CSSを使ってスタイルを管理することが推奨されています。
CSSを使えば、スタイルを一元管理でき、より柔軟で効率的なコードを書くことができます。特に、外部スタイルシートを使えば、複数のページや要素に同じスタイルを適用することが可能になり、更新も簡単です。
ペン博士<font>タグは過去に便利だったものの、現在はその使用を避け、CSSでのスタイル設定に移行することが推奨されているのじゃ。
デザイン面
HTMLで文字の色を指定する際、デザイン面で考慮すべきいくつかのポイントがあります。文字色の選定は、単に視覚的な要素だけでなく、全体のデザインバランスやユーザーの読みやすさに大きな影響を与えるため、慎重に行う必要があります。
1.コントラストの確保
背景色と文字色のコントラスト比は 4.5:1以上 が推奨。
コントラスト不足だと文字が読みづらくなり、ユーザー体験が低下してしまいます。
例えば、白背景 × 薄い黄色や淡いグレーの組み合わせは読みにくいです。
✅ コントラスト比が近い具体例
- 背景:
#767676（灰色） × 文字:#FFFFFF（白） - 背景:
#595959（暗い灰色） × 文字:#F1F1F1（薄い灰色）
2. カラーパレットの統一
複数の色をランダムに使うのは避けましょう。サイト全体のデザインに一貫性を持たせるために、あらかじめカラースキームを設定します。テーマカラーに合わせてリンクや重要な要素にアクセントをつけると、プロフェッショナルな印象になります。
3. 色覚異常への配慮
例えば、赤と緑の組み合わせは識別が難しい場合が多いです。色だけに頼らず、アイコンやテキスト、装飾を組み合わせることで、誰にでも分かりやすいデザインにできます。
4. レスポンシブデザインとの組み合わせ
異なるデバイスや画面サイズに応じて、色の見え方も変化します。モバイルでは小さな文字が背景に埋もれやすいため、色コントラストや文字サイズを調整することが重要です。
ペン博士デザイン面においては、単に「見た目が良い」だけではなく、ユーザーが快適に閲覧できるかどうかを重視した配色や文字色の選定が重要じゃ。
ブラウザの互換性
HTMLで文字の色を指定する際には、ブラウザの互換性も重要な要素です。特に異なるブラウザやバージョン間で、表示されるスタイルが一致しない場合があります。例えば、古いブラウザやモバイルブラウザなどでは、最新のCSS仕様に対応していないことがあり、思い通りのデザインが表示されない可能性があります。
<font>タグは非推奨
・かつては多くのブラウザでサポートされていたが、HTML5以降では 非推奨。
・最新ブラウザではサポートが限られており、思い通りの表示にならないことがある。
CSSの色指定の挙動
・color プロパティは一般的に使えるが、すべてのブラウザで同じ解釈をするとは限らない。
・旧ブラウザでは色表現が異なる結果になることもある。
色指定方法ごとの互換性
・HEXコード（例：#ff0000） → ほとんどのブラウザで安定して表示可能。
・RGB （例：rgb(255, 0, 0)）→ ほぼすべてのモダンブラウザで利用可能。
・RGBA （例：rgba(255, 0, 0,0, 5)）→ 古いブラウザでは非対応の可能性あり（透明度が効かない）。
そのため、複雑なスタイルを適用する場合は、複数のブラウザでテストを行い、意図した通りの表示がされるか確認することが必要です。
互換性を考慮し、なるべく最新のCSS仕様を取り入れつつも、古いブラウザのユーザーに対する配慮も必要です。
ペン博士特に、モバイルデバイスや低速なネットワーク環境においても、文字の色が正しく表示されるよう、軽量なスタイルの指定を心掛けることが重要じゃ。
CSSで文字の色を指定する方法
初心者でもわかるスタイル設定の基本
CSSを使って文字の色を指定する方法は、HTMLよりも効率的で柔軟性があります。初心者でも簡単に理解できる基本的なスタイル設定から始めましょう。CSSでは、colorプロパティを使用して文字の色を指定し、RGB値、16進数のカラーコード、または英語の色名を使って定義できます。
例えば、次のようにCSSで文字の色を赤に設定できます。
<p style="color: red;">この文字は赤色です</p>この例では、<p>タグ（段落）のテキストを赤色にしています。CSSのstyle属性を使用して、HTMLタグ内でスタイルを指定する方法は、インラインスタイルと呼ばれます。初心者がまず覚えるべき簡単な方法で、特定の要素にすぐにスタイルを適用できるため便利です。
さらに、CSSを使うことで、複数の要素に対して一度にスタイルを適用することができます。例えば、次のように<style>タグを使ってページ全体の段落に色を適用することができます。
<style>
p {
color: blue;
}
</style>このコードでは、ページ内のすべての段落が青色で表示されるようになります。これを内部スタイルシートと呼びます。CSSを使うことで、文字の色だけでなく、フォントサイズや背景色などのスタイルもまとめて管理できるため、サイト全体のデザインが統一され、保守も容易になります。
ペン博士スタイル設定の基本は、HTMLコードと分離して記述することで、コードが読みやすくなる。初心者のうちはインラインスタイルを使うこともあるが、より効率的な方法として、CSSを学び、外部スタイルシートなどを使うことが推奨されるぞ。
CSSの基本ルールで色を指定する
CSSを使って文字の色を指定する際、基本となるのはcolorプロパティです。colorプロパティを使うことにより、テキストの色を簡単に定義できます。指定方法としては、カラー名、16進数、RGB（Red, Green, Blue）などを使用します。ここでは、それぞれの使い方と基本ルールについて解説します。
色名を使う
CSSでは、簡単に指定できる標準的な色名が用意されています。たとえば、次のコードでは文字色を「赤」に指定しています。
p {
color: red;
}この場合、<p>タグ（段落）の文字は赤色で表示されます。色名を使う方法は、シンプルで初心者にもわかりやすい方法です。ただし、色名のバリエーションが限られているため、細かな色指定には他の方法を使います。
16進数を使う
より正確な色を指定したい場合、16進数（Hexコード）を使用します。たとえば、次のコードは文字を青に設定しています。
h1 {
color: #0000FF
}16進数は、#の後に6桁の数字で表します。最初の2桁が赤、次の2桁が緑、最後の2桁が青を示しており、この数値の組み合わせによって色を決定します。たとえば、#000000は黒、#FFFFFFは白を表します。
RGBを使う
RGB値を使った色指定も可能です。こちらも正確な色指定ができ、透明度（RGBA）を加えることもできます。次の例では、RGB値を使ってテキストを緑色に設定しています。
span {
color: rgb(0,128,0);
}RGBはそれぞれ0〜255の範囲で指定でき、rgb(0,128,0)は緑色を示します。透明度を追加する場合、rgba()で設定できます。
HSL (Hue, Saturation, Lightness)
色相、彩度、明度を使って色を設定する方法もあります。これを使うことで、色の調整がさらに細かく可能です。次の例では、青みの強い緑を指定しています。
div {
color: hsl(120, 100%, 50%);
}ここでは、色相120度（緑）、彩度100%、明度50%の色を設定しています。
CSSの基本ルールで文字色を指定する方法は非常に柔軟で、サイト全体のデザインに統一感を持たせることができます。
内部CSSと外部CSSによる違い
CSSで文字の色を指定する際、CSSをどこに記述するかによって「内部CSS」と「外部CSS」の2つの方法があります。これらの違いを理解することは、効率的なスタイル管理や保守性の向上に役立ちます。
内部CSSは、HTMLファイル内の<head>タグに直接スタイルを記述する方法です。次の例のように、<style>タグを使ってHTML内でスタイルを定義します。
<head>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>内部CSSは、特定のHTMLファイル内でのみ使用され、比較的小規模なサイトや単一のページに適用する場合に便利です。簡単なページ構成や迅速な修正には有効ですが、複数のページにまたがって同じスタイルを適用したい場合には非効率です。
一方で、外部CSSは、別のファイル（通常は.cssファイル）にスタイルを記述し、それをHTMLファイルにリンクする方法です。HTMLファイルの<head>タグ内に<link>タグを使って外部CSSを読み込むことができます。
<head>
<link rel="stylesheet" href="styles.css">
</head>外部CSSは、複数のページに同じスタイルを適用する際に非常に便利で、サイト全体の一貫性を保ちつつ、スタイルの管理が容易になり、CSSファイルが別に分かれているため、HTMLコードがシンプルになり、読みやすくなります。
内部CSSは、迅速な変更が必要な単一ページでの利用に適している一方で、外部CSSは大規模なサイトや複数ページに共通のスタイルを適用する際に推奨されます。特に、外部CSSを使うと、1つのスタイルシートで全体のデザインを統一できるため、効率的なコーディングが可能です。
ペン博士以上のように、内部CSSと外部CSSは、それぞれの目的や規模に応じて使い分けることが重要じゃ。
HTMLとCSSの違いを理解する
HTMLタグとCSSの役割
HTMLとCSSは、Webサイトの構造とデザインを構築する上で、それぞれ異なる役割を果たします。まず、HTMLはWebページの構造を定義するための言語です。HTMLタグを使って、ページの見出し、段落、リスト、リンク、画像などの要素を作成します。たとえば、次のようなコードで、見出しと段落が定義されます。
<h1>Webデザインの基本</h1>
<p>HTMLとCSSを学ぶことは、Webサイト作成の第一歩です。</p>この例では、<h1>タグが見出しを、<p>タグが段落を定義しています。HTMLの役割は、このようにコンテンツの構造を定義し、ページ上にどのような情報が存在するかを指定することです。
一方、CSSは、HTMLで定義された構造にデザインやスタイルを適用するための言語です。具体的には、文字の色、フォントのサイズ、レイアウト、余白、背景色などを設定します。CSSを使うことで、Webページが視覚的に整ったデザインになります。例えば、以下のコードは、上記のHTMLにCSSを使ってスタイルを適用した例です。
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-size: 16px;
}このCSSは、見出し（<h1>）を青色、フォントサイズを24pxに設定します。段落（<p>）の文字色を灰色、フォントサイズを16pxに設定しています。HTMLでページの構造を定義し、CSSでその構造にデザインを施すという役割分担があるのです。
ペン博士HTMLが「コンテンツの骨組み」を作り、CSSがその上に「デザインの装飾」を施すという考え方を理解することで、効率的にWebデザインを構築できる。HTMLとCSSの役割を明確に区別することが、保守性の高いコードを書くための鍵となるぞ。
効率的に使うためのポイント
1. HTMLで必要最低限の構造を定義する
HTMLでは、ページの見出しや段落、リンク、リストなどの構造を適切に定義することが大切です。無駄なタグや冗長な記述を避け、シンプルかつ意味のある構造を作ることで、SEO（サイトの検索順位）にも有利になります。たとえば、見出しタグ（<h1>〜<h6>）はページの階層構造を明確にするために使い、見出しを正しく使うことで検索エンジンがページ内容をより理解しやすくなります。
2. CSSを使って一元管理する
CSSでは、文字の色やフォントサイズ、余白や背景色などを一元管理できます。外部スタイルシートを使用することで、複数のページにわたって同じスタイルを適用でき、保守が容易になります。例えば、全ページで共通するスタイルは外部CSSファイルにまとめることで、1つの変更が全ページに反映されるため、効率的な作業が可能です。また、CSSクラスを活用して、同じスタイルを複数の要素に適用することで、コードの簡潔化が図れます。
3. レスポンシブデザインを取り入れる
現代のWebデザインでは、PCやスマートフォン、タブレットなど異なるデバイスに対応したレスポンシブデザインが求められます。CSSのメディアクエリを使って、画面サイズに応じたスタイルを適用することができます。たとえば、次のようにCSSにメディアクエリを追加することで、画面幅が600px以下の場合に文字サイズを変更できます。
@media (max-width: 600px) {
body {
font-size: 14px;
}
}このようにして、ユーザーがどのデバイスで閲覧しても見やすいデザインを実現できます。
メディアクエリについては以下の記事で詳しく解説しているので読んでみてください。
実践ガイド！スマホ・タブレットに対応するレスポンシブデザイン作成方法
あわせて読みたい
実践ガイド！スマホ・タブレットに対応するレスポンシブデザインの作成方法を詳しく解説
ペン博士、レスポンシブデザインってよく聞きますけど、そんなに大事なんですか？PCでちゃんと見られれば十分かなと思うのですが... ほう、その疑問は実に良い！ だがの...
4. HTMLとCSSを分離してメンテナンス性を向上させる
HTML内に直接スタイルを記述するのではなく、スタイルはCSSにまとめて管理するのがおすすめです。HTMLコードはコンテンツの構造に集中でき、CSSでデザインが一括管理されるため、作業の分担がしやすくなります。特に大規模なサイトでは、この方法が保守性を大きく向上させるので非常に有効です。
このように、HTMLとCSSを効率的に使い分けることで、見やすく、機能的なWebサイトを作成することが可能です。
生徒ペン博士、HTMLと色を変える方法と、CSSで色を変える方法の違いがやっと分かりました！
ペン博士その意気じゃ。最初は小さな実装からでよい。だが、色を変える仕組みを体系的に理解すれば、どんなデザインにも対応できるようになるぞ。
生徒ありがとうございます！とても勉強になりました！
まとめ
HTMLとCSSを使った文字の色指定は、初心者にとっても理解しやすい基本的なスキルです。本記事の要点は以下の通りです。
<font>タグの現状
・かつては文字色を簡単に変更するために使用されていた
・現在は非推奨（HTML5以降では使わないことが推奨されている）
CSSでの色指定のメリット
・colorプロパティを使って効率的に文字の色を変更できる
・内部CSSと外部CSSを使い分けることで、柔軟に管理可能
・スタイルの一元管理ができ、大規模サイトでも効率的にスタイルを適用できる
レスポンシブ対応も可能
・CSSを用いれば、PC・スマホ・タブレットなどさまざまなデバイスに対応
・デザインを統一しつつ、画面サイズごとに最適な表示を実現できる
HTMLとCSSを適切に組み合わせて使うことが、デザインの一貫性を保ちつつ、読みやすく、魅力的なWebページを作成するための重要なポイントです。HTMLが構造を作り、CSSがスタイルを提供するという役割分担を理解し、柔軟に活用することで、Webデザインのスキルの向上につながります。
本記事で紹介した方法をぜひご活用ください。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
