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

HTMLカラースタイル

ウェブサイトの見栄えを良くするには、色が非常に重要です。

16進コード（16進色表現）

16進数は、色の6桁の表現です。最初の2桁（RR）は赤の値、次の2桁は緑の値（GG）、最後の2桁は青の値（BB）を表します。

16進値は、AdobePhotoshopなどの任意のグラフィックソフトウェアから取得できます。各16進コードの前には、ポンドまたはハッシュ記号＃が付きます。以下は、16進表記を使用したいくつかの色のリストです。以下は16進色の例です-

HTMLカラースタイル

色を表すためにHTMLでHexスタイルを実装する例を見てみましょう-

例

<!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>

出力

HTMLカラースタイル

RGBカラー値

RGBカラー値は、rgb（）プロパティを使用して指定されます。このプロパティは、赤、緑、青にそれぞれ1つずつ、合計3つの値を取ります。値は、0〜255の整数またはパーセンテージにすることができます。

以下は、RGBで表される色の一部です-

HTMLカラースタイル

色を表すために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>

出力

HTMLカラースタイル

HSLカラー値

HTMLでは、HUEを設定することもできます。つまり、「H」は色相、「S」は彩度、「L」は明度を表します。

色を表すために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>

これにより、次の出力が生成されます-

HTMLカラースタイル



  1. HTML<colgroup> タグ

    タグは、テーブル内の1つまたは複数の列のグループです。すべての列のスタイルを設定します。 以下は、タグ-の属性です。 スパン −列グループがスパンする必要がある列の数はspan属性で設定されます 例 タグ-を実装する例を見てみましょう。 <!DOCTYPE html> <html> <head> <style>    table, th, td {       border: 2px solid black;    } </style> </head&

  2. HTMLDOMスタイルのemptyCellsプロパティ

    HTML DOMスタイルのemptyCellsプロパティは、テーブルの空のセルの表示方法を指定するために使用されます。デフォルトでは、このプロパティは表示するように設定されています。 以下は、-の構文です。 emptyCellsプロパティの設定- empty-cells: show|hide|initial|inherit; ここで、「show」は空のセルの境界線を表示しますが、「hide」は表示しません。 「初期」はデフォルト値に設定し、「継承」は親プロパティ値を継承します。 emptyCellsプロパティの例を見てみましょう- 例 <!DOCTYPE html> <