こんにちは、Daniel (@daniel__blog) です。
この記事では、
HTMLだけで文字の色を指定する方法
をご紹介します。
通常、外部のスタイルシート（CSSファイル）で指定します。ですが、必要に応じてHTMLファイル内でスタイルを定義することができます。
自己紹介：
この記事を書いている僕は、主にWordpressをカスタマイズするときに、HTMLをいじったりしています。
まだまだ初心者ですが、アウトプットしながら日々学んでいます。
Contents
HTMLだけで文字の色を指定する方法
大きく３パターンの方法があるようです。
文字色を指定する３パターンの方法
- 方法①：style属性で指定する
- 方法②：styleタグで指定する
- 方法③：fontタグで指定する
では、順番に見ていきましょう。
方法①：style属性で指定する
各タグ内でstyle属性を用いて指定する方法です。最もシンプルな方法です。
ちなみに、このような指定方法を「インラインスタイル」とも呼ぶそうです。
色を変更したい文字が含まれるタグ内で、以下のように記載します。
書式
<“対象タグ” style=”color:＜カラーコード＞”></”対象タグ”>
例
See the Pen
yLVGpjz by daniel__blog (@daniel__blog)
on CodePen.
方法②：styleタグで指定する
headタグ内で指定する方法です。
styleタグを挿入し、以下のように各タグのスタイルを指定できます。
書式
<head>
<style>
“対象タグ” {
color: ＜カラーコード＞;
}
</style>
</head>
例
See the Pen
onlyHTMLcolor by daniel__blog (@daniel__blog)
on CodePen.
方法③：fontタグで指定する
対象タグ内にfontタグを挿入し、色を指定する方法です。
書式
<“対象タグ”><font color=”＜カラーコード＞”></”対象タグ”>
例
See the Pen
PobXEdZ by daniel__blog (@daniel__blog)
on CodePen.
おすすめの方法は？
Style属性での指定が良いかもです
実際にHTML内だけで文字色を変更する場合は、『方法①：style属性で指定する』のが良いでしょう。
最もシンプルに文字色を変更することができます。
fontタグでの指定はやめたほうが良い
ちなみに『方法③：fontタグで指定する』やり方ですが、
HTML4.01 で非推奨
HTML5 では廃止
されているようです。ご注意ください。
まとめ
ということでこの記事では、
HTMLだけで文字の色を指定する方法
をご紹介しました！
ぜひ活用してみてください。
今回は以上です！
最後までお読み頂き、ありがとうございました。
素敵なWebデザインライフをお楽しみください。
