【学習者必見】HTMLタグとCSSで文字の色を自由に変える！今すぐできる実践方法を詳しく解説

2024年12月28日2024年9月11日

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>タグを使って文字の色を指定できますが、これは推奨されない方法です。

<font>タグは簡単に色を指定できますが、HTML5以降では適切なやり方とは言えません。なぜなら、コードが読みにくくなり、保守性が損なわれるからです。特に複数のページや要素に同じスタイルを適用する場合、<font>タグを使用すると、各箇所に色指定を行わなければならず、非常に手間がかかります。また、デザインの一貫性を保つことが難しく、更新時にミスが発生しやすくなるので非効率です。

さらに、<font>タグはブラウザ間での互換性の問題を引き起こす可能性があります。最新のブラウザでは問題なく表示されることが多いものの、古いブラウザや特定の環境では予期せぬ表示崩れが生じることもあります。これらの理由から、現在では<font>タグではなく、CSSを使ってスタイルを管理することが推奨されています。

CSSを使えば、スタイルを一元管理でき、より柔軟で効率的なコードを書くことができます。特に、外部スタイルシートを使えば、複数のページや要素に同じスタイルを適用することが可能になり、更新も簡単です。

このように、<font>タグは過去に便利だったものの、現在はその使用を避け、CSSでのスタイル設定に移行することが推奨されます。

デザイン面

HTMLで文字の色を指定する際、デザイン面で考慮すべきいくつかのポイントがあります。文字色の選定は、単に視覚的な要素だけでなく、全体のデザインバランスやユーザーの読みやすさに大きな影響を与えるため、慎重に行う必要があります。

まず、コントラストは非常に重要です。文字の色と背景色のコントラストが不十分だと、読むのが難しくなります。例えば、白い背景に薄い黄色や淡いグレーの文字を使うと読みにくいです。使いやすさの観点からも、コントラスト比を十分に確保することが推奨され、背景色と文字色のコントラスト比は少なくとも4.5:1が推奨されています。

コントラスト比が4.5:1に近い組み合わせの具体例は

背景色: #767676（灰色）と文字色: #FFFFFF（白）
背景色: #595959（暗い灰色）と文字色: #F1F1F1（薄い灰色）

等になります。

次に、カラーパレットの統一です。複数の色をランダムに使用するのではなく、サイト全体のデザインに一貫性を持たせるために、カラースキームをあらかじめ設定しておくことが大切です。この設定をしておくと、ユーザーはページを視覚的に心地よく感じ、プロフェッショナルな印象を与えます。例えば、サイトのテーマカラーに合わせた色を使って、リンクや重要なメッセージにアクセントをつけることができます。

また、色覚異常を持つユーザーに配慮した色選びも重要です。例えば、赤と緑の組み合わせは色覚異常を持つユーザーにとって区別しにくいため、別の色や視覚的な要素を追加することで、すべてのユーザーにとって理解しやすいデザインにすることが求められます。

さらに、レスポンシブデザインを考慮することも欠かせません。レスポンシブデザインとは、異なるデバイスや画面サイズに応じてWebページのレイアウトや表示が自動的に最適化されるデザイン手法です。例えば、モバイル画面では小さな文字が背景に埋もれやすいため、色のコントラストやサイズの調整が必要です。

最後に、デザイン面においては、単に「見た目が良い」だけではなく、ユーザーが快適に閲覧できるかどうかを重視した配色や文字色の選定が重要です。

ブラウザの互換性

HTMLで文字の色を指定する際には、ブラウザの互換性も重要な要素です。特に異なるブラウザやバージョン間で、表示されるスタイルが一致しない場合があります。例えば、古いブラウザやモバイルブラウザなどでは、最新のCSS仕様に対応していないことがあり、思い通りのデザインが表示されない可能性があります。

一例として、<font>タグを使って文字色を指定する方法は、かつて多くのブラウザでサポートされていましが、最新のブラウザではサポートされていないか、限られた対応しかされていません。また、スタイルシートを使った色指定においても、colorプロパティがすべてのブラウザで同じように解釈されるわけではありません。特に色の表現が、旧バージョンのブラウザで異なる結果になる場合があります。

さらに、16進数コード（例：#ff0000）やRGB（例：rgb(255, 0, 0)）を使った色指定方法は、ほとんどのモダンブラウザで適切に表示されますが、一部のブラウザではRGBA（透明度を含む色指定）がサポートされていないこともあります。したがって、複雑なスタイルを適用する場合は、複数のブラウザでテストを行い、意図した通りの表示がされるか確認することが必要です。

互換性を考慮し、なるべく最新の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;
  }
}

このようにして、ユーザーがどのデバイスで閲覧しても見やすいデザインを実現できます。

メディアクエリについては以下の記事で詳しく解説しているので読んでみてください。

実践ガイド！スマホ・タブレットに対応するレスポンシブデザイン作成方法

4. HTMLとCSSを分離してメンテナンス性を向上させる

HTML内に直接スタイルを記述するのではなく、スタイルはCSSにまとめて管理するのがおすすめです。HTMLコードはコンテンツの構造に集中でき、CSSでデザインが一括管理されるため、作業の分担がしやすくなります。特に大規模なサイトでは、この方法が保守性を大きく向上させるので非常に有効です。

このように、HTMLとCSSを効率的に使い分けることで、見やすく、機能的なWebサイトを作成することが可能です。

まとめ

HTMLとCSSを使った文字の色指定は、初心者にとっても理解しやすい基本的なスキルです。HTMLの<font>タグはかつて文字の色を簡単に変えるために使われていましたが、現在では非推奨です。代わりに、CSSを使った色指定が推奨されており、colorプロパティを利用することで、文字の色を効率的に設定できます。

CSSでは、内部CSSと外部CSSの使い分けや、スタイルの一元管理が可能となり、大規模なサイトでも効率的にスタイルを適用できる点が大きなメリットです。また、レスポンシブデザインを取り入れることで、さまざまなデバイスに対応した表示を実現できます。

最終的に、HTMLとCSSを適切に組み合わせて使うことが、デザインの一貫性を保ちつつ、読みやすく、魅力的なWebページを作成するための重要なポイントです。HTMLが構造を作り、CSSがスタイルを提供するという役割分担を理解し、柔軟に活用することで、Webデザインのスキルの向上につながります。

本記事で紹介した方法をぜひご活用ください。