HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでの色指定方法を徹底解説！Hex・RGB・HSLの基本的な使い方

ウェブサイトに魅力的な見た目と快適な使い心地をもたらすためには、色の選択が非常に重要です。HTMLでは、色を指定する方法として主に「Hex（16進数）」「RGB」「HSL」の3つの形式があります。本記事では、それぞれの特徴と具体的な書き方を、実際に動作するサンプルコードとともにわかりやすく解説します。

Hexコード（16進数による色の表現）

16進数（ヘックス）カラーコードは、色を6桁の英数字で表現する方法です。最初の2桁（RR）が赤（Red）、次の2桁（GG）が緑（Green）、最後の2桁（BB）が青（Blue）の強度をそれぞれ表します。

16進数の値は、Adobe Photoshopなどのグラフィックソフトから簡単に取得できます。各カラーコードの先頭には必ず「#」（シャープ記号）を付けます。以下は、16進数表記で表される代表的な色の一覧です。

HTMLでの色指定方法を徹底解説！Hex・RGB・HSLの基本的な使い方

それでは、HTMLでHexスタイルを使って色を表現する具体例を見ていきましょう。下記のコードでは、colgroup要素とcol要素を組み合わせて、テーブルの列ごとに背景色を設定しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color:#00FF00;">
      <col style = "background-color:#00FFFF;">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

表示結果

このコードを実行すると、最初の3列（Id・Name・Percentage）が緑色（#00FF00）、4列目（Rank）が水色（#00FFFF）で表示されます。

HTMLでの色指定方法を徹底解説！Hex・RGB・HSLの基本的な使い方

RGBカラー値

RGBカラー値は、rgb() プロパティを使用して指定します。このプロパティは、赤（Red）、緑（Green）、青（Blue）の3つの値を順に受け取ります。各値は0〜255までの整数、またはパーセンテージで指定できるのが特徴です。

以下は、RGB表記で表される代表的な色の一覧です。

HTMLでの色指定方法を徹底解説！Hex・RGB・HSLの基本的な使い方

続いて、HTMLでRGBスタイルを使って色を表現する例を確認しましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color:rgb(255,0,0);">
      <col style = "background-color:rgb(255,255,0);">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

表示結果

このコードでは、最初の3列が赤（rgb(255,0,0)）、4列目が黄色（rgb(255,255,0)）で塗りつぶされます。

HTMLでの色指定方法を徹底解説！Hex・RGB・HSLの基本的な使い方

HSLカラー値

HTMLでは、HSL形式でも色を指定できます。「H」は色相（Hue）、「S」は彩度（Saturation）、「L」は輝度（Lightness）を意味します。色相は0〜360度の角度で、彩度と輝度はパーセンテージで表現します。直感的に色のイメージを調整しやすいのがHSLの利点です。

それでは、HTMLでHSLスタイルを使って色を表現する例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color: hsl(300, 75%, 85%); ">
      <col style = "background-color: hsl(200, 30%, 40%);">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

表示結果

このコードを実行すると、最初の3列が淡いピンク系の色（hsl(300, 75%, 85%)）、4列目が落ち着いた青系の色（hsl(200, 30%, 40%)）で表示されます。

HTMLでの色指定方法を徹底解説！Hex・RGB・HSLの基本的な使い方

まとめ

HTMLでの色指定には、デザインツールとの親和性が高い「Hex」、光の三原色で直感的に指定できる「RGB」、色相・彩度・輝度で調整しやすい「HSL」の3つの方法があります。用途や好みに応じて使い分けることで、より洗練されたウェブページを作成できます。ぜひサンプルコードを参考に、実際に試してみてください。

  1. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装

  2. HTML DOMのemptyCellsプロパティとは？使い方とサンプルコードを解説

    HTML DOMのemptyCellsプロパティは、テーブル内の空セル（中身が入っていないセル）をどのように表示するかを指定するために使用されます。デフォルトでは、このプロパティは「show」に設定されており、空セルにも枠線が表示されるようになっています。 emptyCellsプロパティの構文 emptyCellsプロパティを設定する際の基本的な構文は以下の通りです。 empty-cells: show|hide|initial|inherit; 各値の意味は次のようになります。 show：空セルにも境界線（枠線）を表示します。 hide：空セルの境界線を非表示にします。 initial：こ