サイトを外観を編集する際、文字色は意外に見落とされがちです。デフォルトの色である黒や、テーマで定義されている本文や見出しの色をそのまま使用するのは一般的です。
しかし、HTMLでウェブサイトの文字色を変更する利点がいくつかあります。HTMLを編集して文字色を変更すると聞くと、一見複雑な作業に思えますが、実はとても簡単です。今回は、HTMLで文字色を変更する利点、様々なカラーコード、そして3つの変更方法をご紹介します。
HTMLで文字色を変更するメリット
文字の色を適切なものに変更することで、サイトの可読性とアクセシビリティを向上することができます。例えば、暗い配色のウェブサイトでは、文字の色が黒ではテキストが読みづらくなります。
また、ブランドのカラーパレットの色を使用することで、見栄えとブランディングの強化にもつながります。すべてのマーケティングチャネルで統一した色のテキストを表示することで、ブランドの一貫性が高まります。
それでは、早速HTMLで文字の色を定義する方法と変更方法を見ていきましょう。
色の定義方法（カラーコードの種類）
ウェブデザインで色を定義するには、名前、RGB値、16進コード、HSLなどいくつかの方法があります。以下、それぞれの方法の仕組みをご紹介します。
色名
色名は、CSSスタイルで色を定義する最もシンプルな方法です。HTMLカラーの名前は現在140色サポートされており、たとえば「blue」を指定すると特定の要素を青色にすることができます。
ただし、すべての色がサポートされているわけではないため、名前のない色は使用することができません。
RGBとRGBA
続いては、RGBおよびRGBAです。RGBはRed（赤）、Green（緑）、Blue（青）の頭文字をとったもので、実際にパレットで色を混ぜるのと同じように、赤、緑、青の割合を指定して色を定義します。
RGBは、RGB(153,0,255)のように定義し、赤、緑、青の順で数値を指定します。
各色の値は0〜255の間で指定可能で、0はその色が全くない状態、255はその色が最大限に強い状態を示します。
RGBAは赤、緑、青に加えて不透明度を表すアルファ値を指定することができます。0（不透明）から1（透明）の間で定義します。
HEX
HEXは、16進数で表されるカラーコードで、RGBと似たような仕組みになっています。#800080というように表現され、最初の2桁が赤、次の2桁が緑、最後の2桁が青の強さを定義します。
HSLとHSLA
HTMLでは、HSLを使用することも可能です。HSLは色相（Hue）、彩度（Saturation）、輝度（Lightness）を示します。
色相は、0〜360までの数値で指定します。標準的な色相環（カラーホイール）では赤は0/360付近、緑は120、青は240になります。彩度はパーセンテージを使用して定義します。0は白黒、100はフルカラーを示します。輝度もパーセンテージで定義され、0%は黒、100%は白を示します。
例えば、上のスクリーンショットの紫色は、hsl(276, 100%, 50%)と定義することができます。
HSLは、RGBのようにHSLAで不透明度を指定することができます。0が不透明、1が透明になり、上の紫色の不透明度を少し下げるには、hsl(276, 100%, 50%, .85)というように定義します。
続いて、これらのカラーコードを用いて文字の色を変更する方法を見ていきます。
fontタグで文字色を変更する（非推奨）
HTML5が登場し、コーディング標準になる前は、fontタグとcolor属性を使用して文字の色を変更するのが一般的でした。color属性に色名か16進コードで色を指定します。
16進カラーコードを使用する場合は、以下のようになります。
<font color="#800080">紫色のテキスト</font>色名を使用する場合は、以下のようになります。
<font color="purple">紫色のテキスト</font> <font>はHTML5でサポートされなくなり、現在は非推奨となっています。文字色の変更はデザイン上の決定であり、デザインはHTMLの主な役割でないことを考慮すれば、<font> が非推奨になったのは理にかなっていると言えます。
現在、文字色の変更を行うには、代わりにCSS（カスケーディングスタイルシート）を使用します。
CSSで文字色を変更する（推奨）
CSSを使用して文字の色を変更するには、colorプロパティと適切なセレクタを組み合わせます。CSSでは色名、RGB、16進数、HSLで色を定義することができ、以下3つの方法があります。
インラインスタイル
インラインスタイルは、HTMLファイルに直接追加することができます。<p>のようなHTMLタグを使用し、CSSのcolorプロパティでスタイルを指定します。
<p style="color: purple">紫色の1つの段落</p>16進数の値を使用する場合は、以下のようになります。
<p style="color:#800080">紫色の1つの段落</p>RGBの場合は以下のとおり。
<p style="color:RGB(153,0,255)">紫色の1つの段落</p>HSLを使用する場合は、以下のようになります。
<p style="color:hsl(276, 100%, 50%)">紫色の1つの段落</p>上のコード例は、ウェブサイトの1つの段落の色を変更するものですが、段落だけでなく見出しやリンクの色を変更することもできます。
上の<p>を<h2>に置き換えると、見出しの色が変わり、<a>に置き換えるとリンクの色が変わります。また、<span>要素を使用して任意のテキストの色を変更することも可能です。
段落全体や見出しの背景色を変えるのも同様で、代わりにbackground-color属性を使用し、色名、16進数、RGB、HSLのいずれかで色を指定します。
<p style="background-color: purple">内部スタイルシート
内部スタイルシートは<style>の中にあり、HTML文書のheadタグの間に配置されます。
色名を使用する場合は、以下のようになります。
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>上のコードは、ページ上のすべての段落の色を紫色に変更します。インラインスタイルと同様、別のセレクタを使用して見出しやリンクの色を変更することも可能です。
16進コードを使用すると、以下のようになります。
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>以下は、RBGAを使用して不透明度も定義するコード例です。
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: RGB(153,0,255,0.75),
}
</style>
</head>HSLの場合は以下のとおり。
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>外部スタイルシート
別の方法として、外部スタイルシートを使用することもできます。これは、通常style.css、またはstylesheet.cssと呼ばれる別のスタイルシートファイルに配置されるCSSを意味します。
外部スタイルシートは、サイトの外観を決めるもので、文字の色やサイズ、余白、フォントファミリー、背景色などを指定します。
この方法で文字色を変更するには、セレクタを使用してHTMLの必要な部分のスタイルを指定します。たとえば、以下はサイトの全文の色を変更するコード例です。
body {color: purple;}文字色の変更には、色名だけでなく、RGB、16進数、HSLも使用することができます。スタイルシートを編集する際には、コードエディターで編集することをお勧めします。
どの方法を選択すべきか
以上、3つの方法をご紹介しましたが、用途によって適切な方法は異なります。
インラインスタイルはHTMLファイルに直接追加することができるため、通常は最も手っ取り早い方法になります。1つのページの特定の段落や見出しの色を変更したい場合に便利です。
しかし、インラインスタイルは、HTMLファイルのサイズを大きくため、ページの表示速度が遅くなる可能性があります。さらに、インラインスタイルはHTMLを乱雑にする傾向があり、CSSを使ってHTMLの文字色を変更するインライン方式は一般的に推奨されません。
内部スタイルシートは、<head>と<style>の間にコードを書きます。インラインスタイルと同じように、素早く修正したい場合や、外部スタイルシートで指定したスタイルを上書きしたい場合に適しています。
インラインスタイルとの大きな違いは、インラインスタイルが特定のページのみに適用されるのに対して、内部スタイルシートはheadタグが読み込まれたすべてのページに適用されます。
外部スタイルシートは、専用のシートを使用してスタイルを定義します。基本的には、この外部スタイルシートを使用して、すべてのスタイルを一箇所で編集できる状態にするのがベストです。また、プレゼンテーション（見た目、デザイン）はCSSで定義し、コンテンツの構造を定義することで、コードが読みやすくなり、保守管理も容易になります。
なお、インラインスタイルや内部スタイルシートは、外部スタイルシートで指定したスタイルを上書きできることは念頭に置いてください。
fontタグとCSSの違い
HTMLで文字色を変更するとして、fontタグとCSSの2つの方法を挙げました。以下、両者のメリットとデメリットを見てみましょう。
fontタグの利点と欠点
HTMLのfontタグは、何より使いやすいのが最大のメリットです。一般に、CSSの方が複雑であり、<font color="purple">よりも記述に時間がかかります。HTML5を使用していない古いウェブサイトをお持ちの場合は、fontタグで文字色を変更することができます。
しかし前述した通り、fontタグはHTML5で非推奨になり、主要なブラウザがいつサポートを終了するかわからないため、できる限り使用しないことをお勧めします。サイトが壊れて正しく機能しなくなったり、最悪の場合は訪問者にまったく表示されなくなったりする可能性があります。
CSSの利点と欠点
CSSにも、利点と欠点があります。まず最大のメリットとして、CSSは文字色の変更だけでなく、ウェブサイトのすべてのスタイルを指定する適切な方法であるということです。
先にも触れましたが、プレゼンテーション（見た目）とコンテンツが分離されることで、コードの保守管理と維持が容易になります。
欠点としては、CSSとHTML5は旧来のコードの書き方と比較して、習得に時間がかかります。
CSSで文字色を変更する方法は複数あり、それぞれに利点と欠点があります。
HTMLの文字色を変更する際のベストプラクティス
最後に、HTMLの文字色を変更する際に取り入れたい、ベストプラクティスをご紹介します。
カラーピッカーを使用する
無作為に色を選ぶのではなく、カラーピッカー（色選択ツール）を使用して適切な色を選びましょう。カラーピッカーは、色を指定するのに必要になる色名と16進数、RGB、HSL値を示してくれます。
コントラストを確認する
暗いテキストと暗い背景、または明るいテキストと明るい背景では、文字が読みづらくなります。コントラストチェッカーを使用して、サイトの色が目に優しく、文字が読みやすいことを確認しましょう。
検証ツールで気になる色を調べる
ブラウジング中に気に入った色を見つけたら、コードを調べてその色の16進数、RGB、またはHSL値を取得することができます。Chromeでは、調べたいテキストを選択して右クリックし、「検証」を選択するだけでOKです。検証パネルが開き、サイトのHTMLコードと対応するスタイルを調べることができます。
まとめ
HTMLの文字色を変更することで、ウェブサイトの可読性とアクセシビリティを改善することができます。また、サイトの外観とブランドの一貫性を確保するのにも役立ちます。
今回は、4つのカラーコード（色名、16進コード、RGB、HSL）をご紹介し、インライン、内部スタイルシート、外部スタイルシート、そしてfontタグを使用して、文字色を変更する方法を取り上げました。これで文字色の変更方法を十分に理解できたはずです。
CSSとfontタグを使用した文字色の変更方法について、ご質問やご意見がありましたら、以下のコメント欄でお知らせください。
コメントを残す