この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:29:05

タイトル: style属性
SEOタイトル: 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="...">その要素のみ★★★ 最高