【HTML Living Standard】color属性値の使い方
color属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
colorプロパティは、かつてHTML要素の表示色を指定するための属性値として使用されていた情報を保持するプロパティです。具体的には、<font>要素などの属性として使われ、その要素に含まれるテキストの色を直接設定する役割を担っていました。例えば、特定の文字列を赤色で表示したい場合に、<font color="red">テキスト</font>のように記述することで、その色をウェブブラウザに指示することが可能でした。
しかし、現在のHTML Living Standardでは、color属性およびそれを主要な属性としていた<font>要素は非推奨とされており、使用は推奨されていません。これは、ウェブコンテンツの「構造」を定義するHTMLと、「見た目（スタイル）」を定義するCSS（Cascading Style Sheets）を分離するというウェブ標準の設計思想に基づいています。HTMLは文書の意味や構造に集中し、要素の表示に関するスタイルはすべてCSSで制御することが、現代のウェブ開発では最も良いとされています。
したがって、現在では、要素の色を指定する際には、HTMLタグ内に直接color属性を記述する代わりに、CSSのcolorプロパティを使用することが強く推奨されます。CSSを用いることで、ウェブサイト全体のデザインの一貫性を保ちやすくなり、メンテナンス性が向上し、アクセシビリティの改善にも繋がります。システムエンジニアを目指す上では、HTMLは構造、CSSはスタイルという役割分担を理解し、CSSによるスタイリングを習得することが重要です。
構文(syntax)
1<p style="color: red;">このテキストは赤色になります。</p>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML カラーコードで文字色を指定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML カラーコードの例</title> 7</head> 8<body> 9 <!-- style属性を使用して、HTML要素のテキストの色をCSSのcolorプロパティで指定します。 --> 10 <!-- これはHTML Living Standardで推奨される、要素に色を指定する方法です。 --> 11 12 <!-- 色は「キーワード名」で指定できます。 --> 13 <p style="color: red;">このテキストは赤色です。</p> 14 15 <!-- 色は「16進数コード」（Hex color code）で指定することもできます。 --> 16 <!-- #RRGGBB の形式で、各2桁が赤、緑、青の光の強さを表します（00～FF）。 --> 17 <p style="color: #0000FF;">このテキストは青色です。</p> 18 19 <!-- 色は「RGB関数」で指定することもできます。 --> 20 <!-- rgb(赤, 緑, 青) の形式で、各値は0～255の範囲で指定します。 --> 21 <p style="color: rgb(0, 128, 0);">このテキストは緑色です。</p> 22</body> 23</html>
このサンプルコードは、HTML要素のテキストの色を指定する方法を示しています。HTML Living Standardでは、要素の見た目に関する指定はCSS（カスケーディング・スタイル・シート）で行うことが推奨されており、HTMLタグのstyle属性を用いてCSSのcolorプロパティを設定するのが一般的です。
colorプロパティは、指定されたHTML要素（この場合は<p>タグのテキスト）の文字色を設定する役割を持ちます。これは直接的な引数や戻り値を持つものではなく、その値として様々な形式で色を指定することで、要素のスタイルが変化する挙動を示します。
色の指定方法にはいくつかの種類があります。一つ目は「red」のような色キーワード名で指定する方法です。これは直感的で分かりやすい特徴があります。二つ目は「#0000FF」のような16進数コード（Hex color code）を使用する方法です。この形式は#RRGGBBで表され、赤（Red）、緑（Green）、青（Blue）の光の強さを00からFFまでの2桁の16進数で表現し、非常に多くの色を細かく指定できます。三つ目は「rgb(0, 128, 0)」のようなRGB関数で指定する方法です。この形式はrgb(赤, 緑, 青)と表され、それぞれの色の強さを0から255までの数値で指定し、16進数コードと同様に多様な色を表現することが可能です。
これらの方法でcolorプロパティの値を設定することで、ウェブページ上のテキストを視覚的に豊かにすることができます。
現在のHTML Living Standardでは、要素のテキストの色を指定する際に、直接color属性を使用せず、CSSのcolorプロパティを用いるのが正しい方法です。以前のHTMLで使われていたfontタグのcolor属性は非推奨なので、現在は使用しないでください。
サンプルコードのようにstyle属性内にCSSを直接記述する方法は「インラインスタイル」と呼ばれ、手軽ですが、デザインの統一性や管理のしやすさの観点から、通常は外部のCSSファイルでスタイルを一元的に管理することが推奨されます。色の指定方法は、redのようなキーワード名、#0000FFのような16進数コード、rgb(0, 128, 0)のようなRGB関数の3種類があり、これらを状況に合わせて使い分けます。
HTMLカラーコードの基本と使い方
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML カラーコードの基本</title> 7 <style> 8 /* 9 * HTML Living Standardでは、色の指定を含むプレゼンテーションに関する記述は 10 * CSS (Cascading Style Sheets) を用いることが強く推奨されています。 11 * ここでは、CSSを使ってテキストの色を様々な形式で指定する方法を示します。 12 */ 13 body { 14 font-family: Arial, sans-serif; /* 読みやすいフォントを指定 */ 15 margin: 20px; /* ページの余白を設定 */ 16 line-height: 1.6; /* 行の高さを調整して読みやすくする */ 17 } 18 19 /* 1. 名前付きカラー (Keyword Colors) */ 20 /* よく使われる色には、'red' や 'blue' のように直接名前で指定できます。 */ 21 .color-named { 22 color: red; 23 } 24 25 /* 2. 16進数カラーコード (Hexadecimal Colors) */ 26 /* #RRGGBB の形式で、各R(赤), G(緑), B(青) の色の強度を00からFFで指定します。 */ 27 .color-hex { 28 color: #008000; /* 緑色 */ 29 } 30 31 /* 3. RGBカラーコード (RGB Colors) */ 32 /* rgb(赤, 緑, 青) の形式で、各色の強度を0から255の数値で指定します。 */ 33 .color-rgb { 34 color: rgb(0, 0, 255); /* 青色 */ 35 } 36 37 /* 4. RGBAカラーコード (RGBA Colors) */ 38 /* rgb(赤, 緑, 青, 透明度) の形式で、透明度(Alpha)を0.0(完全透明)から1.0(不透明)で指定できます。 */ 39 .color-rgba { 40 color: rgba(255, 165, 0, 0.7); /* オレンジ色、透明度70% */ 41 } 42 43 /* 5. HSLカラーコード (HSL Colors) */ 44 /* hsl(色相, 彩度, 明度) の形式で、色相(Hue: 0-360), 彩度(Saturation: 0-100%), 明度(Lightness: 0-100%)で指定します。 */ 45 .color-hsl { 46 color: hsl(240, 100%, 50%); /* 青色 */ 47 } 48 49 /* 6. HSLAカラーコード (HSLA Colors) */ 50 /* hsl(色相, 彩度, 明度, 透明度) の形式で、HSLに透明度(Alpha)を追加できます。 */ 51 .color-hsla { 52 color: hsla(120, 100%, 25%, 0.5); /* 暗い緑色、透明度50% */ 53 } 54 </style> 55</head> 56<body> 57 <h1>HTMLにおける色の指定方法（CSSによる実装）</h1> 58 59 <p class="color-named">このテキストは<strong class="color-named">名前付きカラー (<code>red</code>)</strong> で表示されます。</p> 60 <p class="color-hex">このテキストは<strong class="color-hex">16進数カラーコード (<code>#008000</code>)</strong> で表示されます。</p> 61 <p class="color-rgb">このテキストは<strong class="color-rgb">RGBカラーコード (<code>rgb(0, 0, 255)</code>)</strong> で表示されます。</p> 62 <p class="color-rgba">このテキストは<strong class="color-rgba">RGBAカラーコード (<code>rgba(255, 165, 0, 0.7)</code>)</strong> で透明度付きで表示されます。</p> 63 <p class="color-hsl">このテキストは<strong class="color-hsl">HSLカラーコード (<code>hsl(240, 100%, 50%)</code>)</strong> で表示されます。</p> 64 <p class="color-hsla">このテキストは<strong class="color-hsla">HSLAカラーコード (<code>hsla(120, 100%, 25%, 0.5)</code>)</strong> で透明度付きで表示されます。</p> 65</body> 66</html>
このサンプルコードは、HTML Living Standardにおいてウェブページの色をどのように指定するかを示しています。HTMLの要素に直接色を適用する記述（例えばcolor属性）は非推奨とされており、代わりにCSS（Cascading Style Sheets）のcolorプロパティを使ってテキストの色を設定することが強く推奨されています。
CSSのcolorプロパティは、テキストの色を指定するためのものです。このプロパティには、いくつかの異なる形式で色の値を設定できます。
一つ目は「名前付きカラー」で、redやblueのように一般的な色名を直接指定します。
二つ目は「16進数カラーコード」で、#RRGGBBの形式を使用します。RR、GG、BBはそれぞれ赤、緑、青の光の強度を00からFF（16進数）で表現します。
三つ目は「RGBカラーコード」で、rgb(赤, 緑, 青)のように0から255の数値で各色の強度を指定します。
四つ目は「RGBAカラーコード」で、rgba(赤, 緑, 青, 透明度)のようにRGBに加えて、0.0（完全透明）から1.0（不透明）までの透明度（アルファ値）を指定できます。
五つ目は「HSLカラーコード」で、hsl(色相, 彩度, 明度)の形式で指定し、色相、彩度、明度というより直感的な方法で色を表現します。
最後に「HSLAカラーコード」は、HSLに加えて透明度を0.0から1.0の範囲で指定できます。
これらの方法を用いることで、ウェブページのテキストに多様な色を柔軟に適用することが可能になります。
HTML Living Standardでは、ウェブページの見た目（色など）の指定にはCSS（Cascading Style Sheets）を使用することが強く推奨されています。本サンプルコードも、HTMLタグ内で直接色を指定するのではなく、<style>タグ内にCSSとして色の指定を記述しています。これは、HTMLの構造とスタイルの定義を分離することで、コードの可読性や保守性を高めるためです。色の指定方法には、redのような名前付きカラー、#008000のような16進数カラーコード、rgb(0, 0, 255)のようなRGB/RGBA、hsl(240, 100%, 50%)のようなHSL/HSLAなど多様な形式があります。これらを状況に応じて使い分けることで、表現豊かなデザインを実現できます。特にRGBAやHSLAでは透明度も指定できるため、より高度な視覚表現が可能です。