HTMLで、要素の色を変更する方法です。
HTMLでの、文字の色の変更方法
HTMLで文字の色を変更するには、CSSをcolor プロパティを設定します。
下記は、HTML要素の style 属性に、直接 CSS を書き込む方法です。
<p style="color:red">文字の色を、赤くするお。</p>
色の指定方法
色は、「RGBカラーコード」「色名」のいずれかで指定できます。
/* 色名で指定する */
color:black;
/* RGB を16進数(00 ~ FF)で指定する */
color:#f6a322;
/* RGB を10進数で指定する */
color:rgb(255,87,60);
特定の文字だけの色を変える
特定の文字の色だけ変更したいときは、span タグを使って、文字の範囲を指定します。
<p>文字の色を、<span style="color:red">ここだけ緑に</span>するお。</p>
CSSで、複数の HTML 要素の色を同時に変更する
複数の要素の色を同時に変更するには、上述の style 属性を利用せず、style タグを使っって、CSSを記述する必要があります。この場合、どのHTML要素に対して、スタイルを適応するかを指定します。
下記は、ファイル上のすべての p に色の変更を適応する例です。
<p>HTMLで、文字の色を変えるのは簡単です。</p>
<p>このように、color スタイルを指定すれば、すぐに変わります。</p>
<p>これであなたも、HTMLマスター。</p>
<style>
p{
color:blue
}
</style>
上記は p という要素の種類を利用していますが、クラスを利用することも出来ます。クラスの選択は、クラス名の前に「.(ドット)」を追記するのでした。
<p>クラスで簡単に、<span class="highlight">要素</span>を選択できます。</p>
<style>
.highlight{
color:green
}
</style>
このようなに、対象のHTML要素の指定する文字列を「セレクタ」と呼びます。
以上です。
【参考】color 属性はHTML5 で廃止済み!
色の変更は、HTML要素の color 属性も利用することが可能ですが、最新のHTMLを制定するHTML5では、すでに廃止されることが決定しています。
廃止されても、すぐに使えなくなるわけではないですが(Webブラウザーがその機能を削除しない限り、色の変更は表示されますが)できるだけ利用しないようにしましょう。
<p color="red">color 属性はHTML5で、廃止済みです!</p>
以上です。
廃止のものは、使わないほうがいいね。