タイトル: style属性
SEOタイトル: HTML style属性 完全ガイド（インラインCSS / 優先順位 / 使い分け / CSP との関係）
| この記事の要点 | |||
| その HTML 内 | ★★ | |
| 外部 CSS ファイル | | リンクされたページ全体 | ★ |
3 方式の比較例
1. インライン（style 属性）
赤い段落
2.
赤い段落
3. 外部 CSS ファイル
p { color: red; }カスケード（優先順位）
同じ要素に複数の CSS が当たったとき、どれが優先されるかの順序をカスケードと呼びます。一般的な優先順位は次の通りです。
!important付き宣言（最強）- インライン（style 属性）
- ID セレクタ（
#id） - クラス・属性・擬似クラス（
.class/[attr]/:hover） - 要素・擬似要素（
p/::before） - 後に書かれた宣言が勝つ
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 や