この記事の要点

style 属性は HTML 要素に直接 CSS を書く方法。<p style="color:red"> のように使う CSS 適用の 3 方式（インライン / <style> 要素 / 外部スタイルシート）のうち最も優先度が高い（!important を除く） 再利用性と保守性が低いため、本番コードでは原則として外部スタイルシート（CSS ファイル）を使う 使いどころ: JS による動的スタイル変更、メール HTML、限定的な微調整、プロトタイプ CSP（Content Security Policy）の style-src によりインライン style はブロックされることがある。本番では nonce / hash 対応が必要

style 属性とは

HTML の style 属性は、要素に直接 CSS を書き込む「インラインスタイル」の指定方法です。style="プロパティ:値; ..." の形式で記述し、その要素にだけ CSS が適用されます。

基本構文

<p style="color: #f00; font-size: 16px;">赤い文字</p>

<div style="background: yellow; padding: 1em; border: 1px solid black;">
  黄色背景のボックス
</div>

<a href="/" style="text-decoration: none; color: navy;">リンク</a>

CSS の組み込み方 3 方式

HTML に CSS を適用する方法は 3 つあり、style 属性はその 1 つです。

方式	書き方	適用範囲	優先度
インライン（style 属性）	<p style="...">	その要素のみ	★★★ 最高
<style> 要素	<style>p{...}</style>	その HTML 内	★★
外部 CSS ファイル	<link href="style.css">	リンクされたページ全体	★

3 方式の比較例

1. インライン（style 属性）

<p style="color: red;">赤い段落</p>

2. <style> 要素

<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p>赤い段落</p>
</body>

3. 外部 CSS ファイル

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

<!-- style.css -->
p { color: red; }

カスケード（優先順位）

同じ要素に複数の CSS が当たったとき、どれが優先されるかの順序をカスケードと呼びます。一般的な優先順位は次の通りです。

1. !important 付き宣言（最強）
2. インライン（style 属性）
3. ID セレクタ（#id）
4. クラス・属性・擬似クラス（.class / [attr] / :hover）
5. 要素・擬似要素（p / ::before）
6. 後に書かれた宣言が勝つ

style 属性は ID セレクタより強いため、外部 CSS で上書きするには !important が必要になることが多く、保守性を著しく落とします。

JavaScript からの style 操作

JS から要素の style プロパティを操作すると、style 属性が動的に書き換わります。プロパティ名はキャメルケースになる点に注意（font-size → fontSize）。

const el = document.querySelector('#box');
el.style.color = 'red';
el.style.backgroundColor = 'yellow';
el.style.fontSize = '24px';

// 一括設定
el.style.cssText = 'color:red; background:yellow; font-size:24px';

// 削除
el.style.color = '';

style 属性のデメリット

問題	内容
再利用不可	同じスタイルを別要素で使いたいときコピペになる
保守性が低い	色を変えるのに全 HTML を grep する羽目に
キャッシュが効かない	HTML の一部なので CSS ファイルのようなブラウザキャッシュが使えない
HTML が肥大化	本文と装飾が混ざり可読性低下
CSP で禁止される可能性	セキュリティポリシー的に厳しい
メディアクエリが書けない	レスポンシブ対応が困難

使いどころ

style 属性を使う妥当な場面もあります。

• JavaScript による動的スタイル変更（要素の表示/非表示、アニメーション）
• HTML メール（多くのメールクライアントは外部 CSS や <style> を無視するためインラインが必須）
• プロトタイプ・モック（CSS ファイルを作るほどでない試作）
• 1 箇所だけの微調整（CMS 上で限定的に位置だけ調整したい等）
• CSS-in-JS の一部実装パターン

CSP（Content Security Policy）

セキュリティを重視するサイトでは、style-src ディレクティブで 'unsafe-inline' を禁止していることがあり、その場合 style 属性は動作しません。本番投入時は次のいずれかで対応します。

• 外部 CSS / <style> に移行する
• nonce 属性を付与する（CSP の style-src 'nonce-xxx' と一致）
• hash で許可する（CSP の style-src 'sha256-xxx'）

FAQ

Q: style 属性で擬似クラス（:hover 等）は書ける？
A: 書けません。擬似クラス・擬似要素・メディアクエリは <style> 要素または外部 CSS でしか定義できません。

Q: 複数プロパティはどう書く？
A: セミコロン区切り。style="color:red; background:yellow; padding:1em;"

Q: 変数（CSS カスタムプロパティ）も書ける？
A: 書けます。style="--main-color:red; color: var(--main-color);"

関連

• <style> 要素 — HTML 内に CSS をまとめて書く方法
• <link> 要素 — 外部 CSS の読み込み
• CSS 詳細度 — セレクタの優先度
• !important — 強制的に優先する宣言
• CSP — コンテンツセキュリティポリシー