HTML スタイル (HTML Styles)

Volardev 編集部 April 12, 2026

HTMLの style 属性を使用すると、色、フォント、サイズなど、要素のスタイルを設定できます。

1. HTML style 属性

HTML要素のスタイルを設定するには、style 属性を使用します。

HTMLの style 属性の構文（Syntax）は以下の通りです。

<タグ名 style="プロパティ:値;">

プロパティ（property）はCSSのプロパティであり、値（value）はCSSの値です。

background-color プロパティは、HTML要素の背景色を定義します。

以下の例では、ページ全体の背景色を powderblue に設定しています。

<body style="background-color:powderblue;">

<h1>これは見出しです</h1>
<p>これは段落です。</p>

</body>

color プロパティは、HTML要素のテキストの色を定義します。

<h1 style="color:blue;">これは青い見出しです</h1>
<p style="color:red;">これは赤い段落です。</p>

font-family プロパティは、HTML要素に使用するフォントを定義します。

<h1 style="font-family:verdana;">これは Verdana フォントの見出しです</h1>
<p style="font-family:courier;">これは Courier フォントの段落です。</p>

font-size プロパティは、HTML要素のテキストサイズを定義します。

<h1 style="font-size:300%;">これは 300% サイズの見出しです</h1>
<p style="font-size:160%;">これは 160% サイズの段落です。</p>

text-align プロパティは、HTML要素のテキストの水平方向の配置（アライメント）を定義します。

<h1 style="text-align:center;">中央揃えの見出し</h1>
<p style="text-align:center;">中央揃えの段落。</p>

このセクションでは、以下の属性とプロパティについて学習しました。

項目	説明
`style`	要素にインラインスタイルを適用するための属性。
`background-color`	背景色を指定するためのプロパティ。
`color`	テキストの色を指定するためのプロパティ。
`font-family`	使用するフォントを指定するためのプロパティ。
`font-size`	テキストのサイズを指定するためのプロパティ。
`text-align`	テキストの水平方向の配置を指定するためのプロパティ。