開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

HTML:文字の色の変更

最終更新:2018-08-05 by Joe

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>

廃止のものは、使わないほうがいいね。

以上です。

 

 

閉じる