◀ 3.

HTML style属性 完全ガイド（インラインCSS / 優先順位 / 使い分け / CSP との関係）

▶
編集
この記事の要点
  • 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 — コンテンツセキュリティポリシー
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. link要素
  2. style要素
  3. style属性
  4. @import
2026-06-11 07:29:05 guest 178

人気ページ

最近更新/作成されたページ