HTMLだけで文字の色を指定する方法【結論:style属性がおすすめです】

こんにちは、Daniel (@daniel__blog) です。

この記事では、

HTMLだけで文字の色を指定する方法

をご紹介します。

通常、外部のスタイルシート(CSSファイル)で指定します。ですが、必要に応じてHTMLファイル内でスタイルを定義することができます。

Daniel
Daniel

自己紹介:
この記事を書いている僕は、主にWordpressをカスタマイズするときに、HTMLをいじったりしています。

まだまだ初心者ですが、アウトプットしながら日々学んでいます。

HTMLだけで文字の色を指定する方法

大きく3パターンの方法があるようです。

文字色を指定する3パターンの方法

  • 方法①: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デザインライフをお楽しみください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です