HTMLで色を指定する形式と方法を詳しく解説

公開：2024年9月3日更新：2025年10月27日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

HTMLで色を指定する形式
カラーコードで指定する
カラーネームで指定する
RGBで指定する
HSLで指定する
HTMLのタグで色を指定する方法
fontタグで文字色を指定する
bodyタグで背景色を指定する
CSSで色を指定する方法
インラインスタイルで指定する
内部スタイルシートで指定する
外部スタイルシートで指定する

HTMLで色を指定する形式

HTMLで色を指定する際、どの形式を使えばよいか迷った経験はないでしょうか。HTMLではカラーコードやカラーネーム、RGB、HSLという4つの形式で色を指定できます。

色を指定する形式として、以下4つがあります。それぞれに特徴があり、用途に応じて使い分けることによって、効率的に色を指定できます。

カラーコードで指定する
カラーネームで指定する
RGBで指定する
HSLで指定する

各形式について、詳しく解説していきます。これらの形式を理解すれば、デザインに応じた適切な色指定が可能になり、ウェブページの見た目を自由に調整できるでしょう。

カラーコードで指定する

カラーコードは16進数を使って色を指定する形式で、#に続けて6桁の英数字を記述します。16進数とは「0から9」と「AからFまでの16種類の文字」を使って数値を表現する方法のことです。最初の2桁が赤の強さ、次の2桁が緑の強さ、最後の2桁が青の強さを表します。

<p style="color: #ff0000;">赤色のテキスト</p>
<p style="color: #00ff00;">緑色のテキスト</p>
<p style="color: #0000ff;">青色のテキスト</p>

上記のコードでは、#ff0000で赤色、#00ff00で緑色、#0000ffで青色を指定しています。同じ数字が連続する場合は#f00のように3桁に省略することも可能で、例えば#ccccccは#cccと記述できます。

カラーネームで指定する

カラーネームは色の名前を英単語で指定する形式で、redやblueなどの馴染み深い単語を使って色を指定できます。HTMLでは140種類のカラーネームがサポートされていて、全てのブラウザで正しく表示されるため、初心者でも扱いやすい方法です。

<p style="color: red;">赤色のテキスト</p>
<p style="color: green;">緑色のテキスト</p>
<p style="color: blue;">青色のテキスト</p>

上記のコードでは、redで赤色、greenで緑色、blueで青色を指定しています。カラーネームは記述が簡単で覚えやすいという利点がありますが、サポートされている140色以外の色は指定できないという制限があります。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

RGBで指定する

RGBは赤・緑・青の3色を0から255の数値で指定する形式で、rgb()という関数の中に3つの数値をカンマ区切りで記述します。各色の値が0の場合はその色が全くない状態を表し、255の場合はその色が最大限に強い状態を表します。

<p style="color: rgb(255, 0, 0);">赤色のテキスト</p>
<p style="color: rgb(0, 255, 0);">緑色のテキスト</p>
<p style="color: rgb(0, 0, 255);">青色のテキスト</p>
<p style="color: rgba(255, 0, 0, 0.5);">半透明の赤色</p>

上記のコードでは、rgb(255, 0, 0)で赤色、rgb(0, 255, 0)で緑色、rgb(0, 0, 255)で青色を指定しています。rgba()を使用すると4つ目の値で透明度を指定でき、0が完全に不透明、1が完全に透明を表します。

HSLで指定する

HSLは色相・彩度・輝度の3つの要素で色を指定する形式で、hsl()という関数の中に3つの値を記述します。色相は0から360の数値で指定し、0と360が赤、120が緑、240が青を表します。彩度と輝度はパーセンテージで指定します。

<p style="color: hsl(0, 100%, 50%);">赤色のテキスト</p>
<p style="color: hsl(120, 100%, 50%);">緑色のテキスト</p>
<p style="color: hsl(240, 100%, 50%);">青色のテキスト</p>
<p style="color: hsla(0, 100%, 50%, 0.5);">半透明の赤色</p>

上記のコードでは、hsl(0, 100%, 50%)で赤色、hsl(120, 100%, 50%)で緑色、hsl(240, 100%, 50%)で青色を指定しています。hsla()を使用すると4つ目の値で透明度を指定でき、RGBAと同じく0が完全に不透明、1が完全に透明を表します。

HTMLのタグで色を指定する方法

HTMLでは、fontタグやbodyタグを使って文字色や背景色を指定できますが、現在ではCSSでの指定が推奨されています。

HTMLのタグで色を指定する方法として、以下の2つがあります。ただし、fontタグはHTML5で非推奨になっているため、新しくウェブページを作成する場合はCSSでの指定を検討してください。

fontタグで文字色を指定する
bodyタグで背景色を指定する

各方法について、詳しく解説していきます。これらのタグは古いウェブページでよく使われていますが、現在は保守性の観点からCSSでの指定が推奨されているため、参考程度に理解しておきましょう。

fontタグで文字色を指定する

fontタグは文字の色やサイズを指定するHTMLタグで、color属性を使って文字色を変更できます。このタグはHTML5で非推奨になっていて、主要なブラウザがいつサポートを終了するかわからないため、新しいウェブページでは使用しないことをお勧めします。

<font color="#ff0000">赤色のテキスト</font>
<font color="blue">青色のテキスト</font>
<font color="red" size="5">大きな赤色のテキスト</font>

上記のコードでは、color属性にカラーコードやカラーネームを指定することで文字色を変更しています。複数の属性を指定する場合は、属性と属性の間に半角スペースを入れる必要があります。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

bodyタグで背景色を指定する

bodyタグはウェブページ全体の背景色や文字色を指定するHTMLタグで、bgcolor属性で背景色、text属性で文字色を変更できます。この方法も現在は非推奨とされていて、CSSのbackground-colorプロパティを使用することが推奨されています。

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body bgcolor="#f5f5f5" text="#333333">
  <h1>見出し</h1>
  <p>ページ全体の背景色と文字色を指定しています。</p>
</body>
</html>

上記のコードでは、bgcolor属性で背景色を薄いグレーに、text属性で文字色を濃いグレーに指定しています。この方法は古いウェブページで広く使われていましたが、デザインとコンテンツを分離するという観点から、現在はCSSでの指定が標準となっています。

CSSで色を指定する方法

CSSで色を指定する方法として、以下の3つがあります。それぞれに特徴があり、ウェブページの規模や管理方法に応じて使い分けることによって、効率的に色を管理できます。

インラインスタイルで指定する
内部スタイルシートで指定する
外部スタイルシートで指定する

各方法について、詳しく解説していきます。これらの方法を理解すれば、ウェブページの規模や用途に応じた適切なCSSの記述方法を選択でき、保守性の高いコードを書けるでしょう。

インラインスタイルで指定する

インラインスタイルは、HTMLタグに直接style属性を記述して色を指定する方法で、特定の要素だけを素早く修正したい場合に便利です。style属性の中にcolorプロパティを記述することで文字色を、background-colorプロパティを記述することで背景色を変更できます。

<p style="color: #ff0000;">赤色のテキスト</p>
<p style="background-color: #ffff00; color: #000000;">黄色の背景に黒文字</p>
<h1 style="color: blue; border-left: 4px solid blue;">青色の見出し</h1>

上記のコードでは、style属性の中に直接CSSを記述して色を指定しています。複数のプロパティを指定する場合は、セミコロンで区切ります。この方法は手軽ですが、HTMLファイルのサイズが大きくなりページの表示速度が遅くなる可能性があるため、一般的には推奨されません。

内部スタイルシートで指定する

内部スタイルシートは、HTMLファイルのhead要素内にstyleタグを記述して色を指定する方法で、そのページ全体のスタイルを一箇所で管理できます。セレクタを使って特定の要素やクラスに対してスタイルを適用できるため、インラインスタイルよりも効率的に色を管理できます。

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
  <style>
    body {
      background-color: #f5f5f5;
    }
    h1 {
      color: #ff0000;
      border-left: 4px solid #ff0000;
    }
    p {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>見出し</h1>
  <p>テキスト</p>
</body>
</html>

上記のコードでは、styleタグの中にCSSを記述して、ページ全体の背景色、見出しの文字色、段落の文字色を指定しています。この方法は特定のページだけに適用したいスタイルがある場合や、外部スタイルシートで指定したスタイルを上書きしたい場合に適しています。

外部スタイルシートで指定する

外部スタイルシートは、別のCSSファイルにスタイルを記述して色を指定する方法で、複数のHTMLファイルで共通のスタイルを適用できます。CSSファイルを作成してlink要素でHTMLファイルに読み込むことで、ウェブサイト全体のデザインを一箇所で管理できるため、保守性が高くなります。

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>見出し</h1>
  <p>テキスト</p>
</body>
</html>

/* style.css */
body {
  background-color: #f5f5f5;
}
h1 {
  color: #ff0000;
  border-left: 4px solid #ff0000;
}
p {
  color: #333333;
}

上記のコードでは、HTMLファイルとは別にstyle.cssというファイルを作成して、そこにスタイルを記述しています。link要素のhref属性にCSSファイルのパスを指定することで、HTMLファイルに読み込まれます。この方法は複数のページで同じスタイルを使用する場合に最も適していて、一箇所の修正で全ページのスタイルを変更できます。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。