実行できるCSSドキュメント: インライン CSS

Q: インライン CSS とは何ですか？

インライン CSS は要素の style 属性に書く CSS です。例: 。セレクタは使わず、宣言はその 1 つの要素だけに適用されます。

Q: HTML に CSS を書く 3 つの方法は何ですか？

インライン (要素の style 属性)、内部 (ページ内の 要素)、外部 ( 内の で読み込む別の .css ファイル) の 3 つです。サイト全体には外部ファイルを使うのが一般的です。

Q: インライン CSS は外部 CSS より優先されますか？

ほとんどの場合、優先されます。style 属性の宣言は、詳細度に関係なくスタイルシートのどのセレクタにも勝ちます。スタイルシートが勝てるのは !important を付けたときだけで、インラインの !important はそれにも勝ちます。

Q: インライン CSS は使わないほうがよいですか？

サイト全体のスタイルには向いていません。同じ記述の繰り返しになり、:hover やメディアクエリが使えず、上書きもしにくいからです。プログレスバーの幅やユーザーが選んだ色のように、JavaScript やテンプレートが要素ごとに設定する値には問題なく使えます。

Q: インライン CSS で hover は使えますか？

使えません。style 属性に書けるのは宣言だけなので、:hover などの疑似クラス、::before などの疑似要素、@media ルールは書けません。 要素かスタイルシートに書きましょう。

インライン CSS とは

インライン CSS は、HTML 要素の style 属性に直接書く CSS です。値は property: value; という宣言の並びで、その要素だけに適用されます。

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

セレクタも波かっこもありません。属性を書いた要素そのものが対象です。宣言はセミコロンで区切ります。最後のセミコロンは省略できますが、残しておくと次の宣言を追加するときに安全です。

書き方

<element style="property: value; property: value;">

部分	例	補足
属性	`style="..."`	グローバル属性なので、すべての HTML 要素で使えます
宣言	`color: #2563eb;`	スタイルシートのルール内と同じ書き方です
複数の宣言	`padding: 8px; border: 1px solid #e5e7eb;`	`;` で区切ります
中に引用符を書く	`style="font-family: 'Courier New', monospace;"`	ダブルクォートの属性の中ではシングルクォートを使います

宣言以外は書けません。:hover、::before、@media、セレクタは style 属性には入りません。

HTML に CSS を書く 3 つの方法

CSS をページに適用する方法は 3 つあります。このページでは 1 つ目を扱います。外部 CSS と内部 CSS は別のページで解説しています。

方法	CSS を書く場所	適用範囲	主な用途
インライン	1 つの要素の `style` 属性	その要素	一度きりの値、JavaScript が設定する値
内部	ページ内の `<style>` 要素	そのページ	1 ページのデモ、メールテンプレート、クリティカル CSS
外部	`<link>` で読み込む `.css` ファイル	読み込んだすべてのページ	サイト全体のスタイル

同じ段落を 3 つの方法でスタイルした例です (プレビューでは 2 つ目のファイルを読み込めないため、外部ファイルはコメントで示しています):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

3 つ目の段落は .note ルールの padding と角丸を残し、背景だけを置き換えています。インラインスタイルがその 1 つのプロパティだけを設定しているからです。

インラインスタイルが優先される理由

スタイルシートのルールとインラインスタイルが同じプロパティを設定すると、インラインスタイルが勝ちます。セレクタの詳細度は関係なく、ID セレクタでも負けます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

例外は !important だけです。スタイルシートで !important を付けた宣言は通常のインライン宣言に勝ち、インラインの !important はその両方に勝ちます。インラインスタイルがサイトの保守を難しくするのはこのためです。スタイルシートから変更するには !important が必要になり、!important の付け合いが始まります。優先順位の全体は !important のページで解説しています。

インライン CSS が適している場面

インラインスタイルが向いているのは、値がデザインではなくデータの場合です。つまり要素ごとに変わり、テンプレートや JavaScript が書き込む値です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

見た目 (色、高さ、角丸) はスタイルシートに書き、バーごとに異なる幅だけをインラインにしています。JavaScript は element.style を通じて同じ属性を書き込みます:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

クリック後、段落の HTML は style="color: rgb(245, 158, 11); font-weight: bold;" になります。ハイフンを含むプロパティ名は JavaScript ではキャメルケースになります (font-weight は fontWeight)。

多くの場合、CSS 変数を使うのがいちばんすっきりします。インラインでは変数だけを style="--progress: 35%" のように設定し、スタイルシート側でそれを使います。CSS 変数を参照してください。

インライン CSS でできないこと

状態や疑似要素が書けない。 style 属性に :hover、:focus、::before は書けません。
メディアクエリが使えない。 インラインの幅をスマートフォンで変えることはできません。
繰り返しになる。 同じインラインスタイルのボタンが 10 個あれば、修正箇所も 10 か所です。
上書きしにくい。 スタイルシートから勝てるのは !important だけです。
Content Security Policy。 style-src に 'unsafe-inline' がない厳しい CSP では、HTML に書いた style 属性がブロックされます。

よくある間違い

style の中にセレクタや波かっこを書く。 style="p { color: red }" は無視されます。書けるのは宣言だけです。
: の代わりに = を使う。 color=red ではなく color: red です。
ダブルクォートを入れ子にする。 style="font-family: "Arial"" は属性がそこで終わってしまいます。中ではシングルクォートを使います。
単位を忘れる。 style="width: 200" は無視されます。200px と書きましょう。単位を省略できるのは長さが 0 のときだけです。
サイト全体をインラインでスタイルする。 繰り返すスタイルはスタイルシートのクラスに移し、インラインスタイルは要素ごとの値だけに使いましょう。

よくある質問

インライン CSS とは何ですか？

インライン CSS は要素の style 属性に書く CSS です。例: <p style="color: red;">。セレクタは使わず、宣言はその 1 つの要素だけに適用されます。

HTML に CSS を書く 3 つの方法は何ですか？

インライン (要素の style 属性)、内部 (ページ内の <style> 要素)、外部 (<head> 内の <link rel="stylesheet" href="styles.css"> で読み込む別の .css ファイル) の 3 つです。サイト全体には外部ファイルを使うのが一般的です。

インライン CSS は外部 CSS より優先されますか？

ほとんどの場合、優先されます。style 属性の宣言は、詳細度に関係なくスタイルシートのどのセレクタにも勝ちます。スタイルシートが勝てるのは !important を付けたときだけで、インラインの !important はそれにも勝ちます。

インライン CSS は使わないほうがよいですか？

サイト全体のスタイルには向いていません。同じ記述の繰り返しになり、:hover やメディアクエリが使えず、上書きもしにくいからです。プログレスバーの幅やユーザーが選んだ色のように、JavaScript やテンプレートが要素ごとに設定する値には問題なく使えます。

インライン CSS で hover は使えますか？

使えません。style 属性に書けるのは宣言だけなので、:hover などの疑似クラス、::before などの疑似要素、@media ルールは書けません。<style> 要素かスタイルシートに書きましょう。