HTMLテキストの色設定

HTML テキストの色設定

HTML では、テキストの色を設定することでページをよりカラフルに見せることができます。テキストの色の設定は、テキストの段落、見出し、リンクなどのさまざまな要素に適用できます。この記事では、HTMLで文字の色を設定する方法と、CSSを使って文字の色をより便利に制御する方法を紹介します。

1. HTML テキストの色の基本設定

HTML では、色の名前または 16 進数の色の値を使用してテキストの色を定義できます。一般的に使用される HTML の色の名前は次のとおりです。

• 赤：赤
• 緑：緑
• 青：青
• 黒：黒
• white:White

次の方法で色を適用できます:

<p style="color:red;">这是红色的文本。</p>
<p style="color:green;">这是绿色的文本。</p>
<p style="color:blue;">这是蓝色的文本。</p>
<p style="color:black;">这是黑色的文本。</p>
<p style="color:white; background-color:black;">这是白色的文本。</p>

上の例では、style 属性を使用して色を設定しました。 style 属性に color 属性を追加することで、テキストの色を設定できます。

色名の使用に加えて、16 進数の色の値を使用してテキストの色を定義することもできます。以下にいくつかの例を示します。

<p style="color:#ff0000;">这是红色的文本。</p>
<p style="color:#00ff00;">这是绿色的文本。</p>
<p style="color:#0000ff;">这是蓝色的文本。</p>
<p style="color:#000000;">这是黑色的文本。</p>
<p style="color:#ffffff; background-color:#000000;">这是白色的文本。</p>

上の例では、# 文字の後にカラー コードを続けて色を設定しました。カラーコードは6つの16進数で構成されており、それぞれ赤、緑、青の明るさの値を表します。たとえば、#ff0000 は赤を表し、ff は赤の最大輝度値を表します。

2. CSS を使用してテキストの色を設定する

上記の例では、style 属性を使用してテキストの色を設定しました。ただし、大規模な Web サイトやプロジェクトの場合は、複数のページや要素に同じスタイルを適用する必要があります。この場合、CSS を使用してページの外観とスタイルを制御できます。

まず、内部スタイル シートを使用してテキストの色を設定する方法を見てみましょう。内部スタイルシートとは、HTML文書の先頭の