HTMLで文字色を変更する方法

文字の色はHTMLの <font> タグを使って変更できますが、この方法はHTML5ではすでにサポートされていません。代わりに簡単なCSSを使ってページ内のさまざまな要素がどんな色で表示されるかを定義します。CSSで作成したウェブページのデザインは、すべてのブラウザーが対応しています。

方法 1

方法 1 の 2:

CSSを使う

PDF形式でダウンロード

1
HTMLファイルを開く　文字の色を変更するのに一番いい方法はCSS（カスケーディングスタイルシート）を使うことです。古いHTMLのプロパティ設定は、HMTL5ではすでにサポートが終了しており、CSSを使って要素のスタイル設定をする方法が広く使われています。
- この方法は、外部スタイルシート（別のCSSファイル）を利用する場合にも有効です。ここでは内部スタイルシート設定の場合を例にとって説明します。
<head>タグの内側にカーソルを合わせる　内部スタイルシートを使用する場合、このタグの内側でスタイルを定義していきます。
3
<style> を追加して内部スタイルシートを作成する　<style>タグが<head>タグの内側にある場合、<style>タグ内のCSSは、そのページの該当する要素すべてに適用されます。この時点で、HTMLファイルの先頭部分は、このようになるはずです。^{[1]X出典文献}
```
<!DOCTYPE html><html><head><style></style></head>
```
4
文字の色を変更したい要素を追加する　<style>セクションを使って、ページ上の様々な要素の見栄えを定義します。例えば、本文全体のスタイルを変更するには、このように設定します。
```
<!DOCTYPE html><html><head><style>body {}</style></head>
```
5
要素セレクタにcolor: プロパティを追加する　color:プロパティは、指定された要素にどのような文字色を使うかを指示するものです。この例では、文字色の変更がページのすべてのテキストのデフォルト要素に適用されます。つまり本文全体の色が変更されることになります。
```
<!DOCTYPE html><html><head><style>body { color:}</style></head>
```
6
テキストの色を指定する　色の指定には、色の英語名、16進数のカラーコード、RGBのカラーコードを指定する3つの方法があります。青色を使いたい場合を例にとると、blue、rgb(0, 0, 255)、#0000FFの値が使えます。
```
<!DOCTYPE html><html><head><style>body { color: red;}</style></head>
```

How.com.vn 日本語: Step 7 別のセレクタを追加し、様々な要素の文字色を変更する

様々なセレクタを使用し、ページ内の別々の部分の文字の色をそれぞれ違う色に変更することができます。

<!DOCTYPE html><html><head><style>body { color: red;}h1 { color: #00FF00;}p { color: rgb(0,0,255)}</style></head><body><h1>このヘッダは緑で表示されます。</h1><p>このパラグラフは青で表示されます。</p>この本文は赤で表示されます。</body></html>

8
要素を変更せずにCSSクラスを定義する　クラスを定義すると、クラススタイルを即座に追加し、ページ内のあらゆる要素に適用することができます。このファイルの例をとると、「.redtext」のクラスが、指定されるあらゆる要素を赤字表示にします。
```
<!DOCTYPE html><html><head><style>.redtext { color: red;}</style></head><body><h1 class="redtext">この見出しは赤で表示されます</h1><p>このパラグラフは通常の色です。</p><p class="redtext">このパラグラフは赤で表示されます</p></body></html>
```
広告

方法 2

方法 2 の 2:

インラインスタイルでプロパティを設定する

PDF形式でダウンロード

インラインスタイルのプロパティで、ページ内の特定の要素のスタイルの変更ができます。この方法は、1、2ヶ所のスタイル変更には便利ですが、全体に渡って使い続けることは勧められません。広範囲のスタイル変更には、上に説明した方法を採用します。^{[2]X出典文献}
2
変更したい要素をファイル内で見つける　インラインスタイルのプロパティを使用して、あらゆる要素の文字色が変更できます。例えば、特定のヘッダの文字色を変更したい場合、ファイル内で該当要素を見つけます。
```
<!DOCTYPE html><html><body><h1>これが文字色を変更したいヘッダです</h1></body></html>
```
3
要素にスタイルプロパティを追加する　変更したい要素の開始タグ内に、style=""を追加します。
```
<!DOCTYPE html><html><body><h1 style="">これが文字色を変更したいヘッダです</h1></body></html>
```
4
""の中にcolor:プロパティを追加する　ここまでの作業で、例えばこのような状態になります。
```
<!DOCTYPE html><html><body><h1 style="color:">これが色を変更したいヘッダです</h1></body></html>
```
5
文字を変更したい色を指定する　色の定義には3種類あります。色の英語名を使うことも、あるいはRGBや13進法のカラーコードを値として指定することもできます。例えば黄色に変更したい場合は、yellow;、rgb(255,255,0);、 #FFFF00;のどれかを追加します。
```
<!DOCTYPE html><html><body><h1 style="color:#FFFF00;">このヘッダは今度は黄色で表示されます</h1></body></html>
```
広告