HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでフォントの色を設定する方法【初心者向け解説】

HTMLでフォントの色を設定するには、style属性を使用します。style属性は要素に対してインラインスタイルを指定するための属性で、HTMLの<p>タグなどと組み合わせて、CSSのcolorプロパティを指定することで文字色を変更できます。

なお、HTML5では<font>タグはサポートされておらず、非推奨（廃止予定）となっています。そのため、現在ではフォントの色を指定する際には、<font>タグではなくCSSスタイルを使用するのが標準的な方法です。

style属性使用時の注意点

style属性で指定したスタイルは、インラインスタイルとして最優先で適用される点に注意が必要です。具体的には、以下のようなスタイル指定を上書きしてしまいます。

  • HTMLの<style>タグ内で定義されたスタイル
  • 外部スタイルシート（CSSファイル）で定義されたスタイル

そのため、サイト全体で一貫したデザイン管理を行いたい場合は、インラインスタイルの乱用を避け、外部スタイルシートでの一元管理を検討するとよいでしょう。

サンプルコード

以下のコードを実行すると、HTMLでフォントの色を設定する方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Font color</title>
   </head>
   <body>
      <h1>Products</h1>
      <p style="color:blue">This is demo content.</p>
   </body>
</html>

この例では、<p>タグに style="color:blue" を指定することで、段落内のテキストが青色で表示されます。「blue」の部分を「red」や「#ff0000」などのカラーコードに変更すれば、好きな色に自由にカスタマイズ可能です。

  1. HTML DOMのstyle.colorプロパティとは？使い方とサンプルコードを解説

    HTML DOMのstyle.colorプロパティは、要素内のテキストの色を取得（get）および設定（set）するために使用されるプロパティです。テキストの色は、以下のいずれかの形式で指定できます。16進数カラーコード（例：#ff0000）rgb() 関数（例：rgb(255,0,0)）rgba() 関数（透明度を含む指定）hsl() 関数（色相・彩度・輝度による指定）hsla() 関数（透明度を含むHSL指定）定義済みのカラーキーワード（例：red、blue、green など）style.colorプロパティの構文colorプロパティを設定する際の基本的な構文は次のとおりです。object.

  2. HTML DOM Styleのfontプロパティとは？設定方法と使い方を解説

    HTML DOMのStyleオブジェクトが持つfontプロパティは、CSSのフォントに関する6つの個別プロパティ（font-style、font-variant、font-weight、font-size、line-height、font-family）を一括して取得・設定するために使用されます。このうちfont-size（フォントサイズ）とfont-family（フォントファミリー）は必須の値であり、省略された他の値にはデフォルト値が自動的に適用されます。 fontプロパティの値を取得する構文 現在設定されているfontプロパティの値を取得する場合は、以下の構文を使用します。 object.