【6日でできるHTML＆CSS入門】style属性で指定する

序章　―“ここだけ装飾”を一瞬で実現する style属性―

―“ここだけ装飾”を一瞬で実現する style属性―
　外部 CSS や <style> ブロックはページ全体のデザインを一括管理するのに最適ですが、「この一行だけ色を変えたい」「テストとして一度だけ大きさを調整したい」といった場面では style 属性（インライン CSS） が手早い解決策になります。ここでは style 属性の書式・利点・注意点を、動作確認できるサンプルコードとともに解説します。

１．style 属性の書式と基本仕様

1.1. 3 要素は外部 CSS と同じ

要素説明インライン記法例
セレクタ省略（要素そのものが対象）―
プロパティ変更項目color
値設定内容#ff6600

インラインの場合は「セレクタが不要」な点が最大の違いです。

1.2. 構文テンプレート

<tag style="プロパティ1:値1; プロパティ2:値2;">
  …内容…
</tag>
  • 各組は ;（セミコロン） で区切る
  • 属性値は ダブルクォーテーション で囲む

２．サンプルで学ぶ style 属性

2.1. lesson24_1.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>インラインCSS入門</title></head>
<body style="background:#fafad2; color:#222;">
  <h1 style="color:#d00000; font-size:220%;">style属性だけで装飾</h1>
  <p>外部スタイルなしでも、このタグだけ彩れます。</p>
</body>
</html>

表示結果

  • 背景：淡いレモン色
  • h1：濃い赤・大きめ文字

2.2. lesson24_2.html（要素ごとに異なる装飾）

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>タグごとに別スタイル</title></head>
<body>
  <h2 style="color:#008c8c;">見出し A</h2>
  <p>これは標準書式。</p>

  <h2 style="color:#ff8c00; font-size:150%;">見出し B</h2>
  <p style="background:#fff4e6;">こちらの段落は背景付き。</p>
</body>
</html>

表示結果

2 つの <h2> がまったく別デザイン。段落も片方だけ背景を持つ。

３．style 属性のメリット & デメリット

視点メリットデメリット
手軽さファイル分割不要、即時反映大規模になると保守困難
局所適用1 要素のみ変更可コード量が増え HTML が読みにくい
優先度外部 CSS を上書きできる“!important 病”と並び衝突要因に

Best Practice： 原則は外部 CSS、例外的な微調整だけ style 属性。

４．タグ & プロパティ早見表（本章で使用）

タグ/属性説明使用例
<body style="">ページ全体の即席カラーbackground:#fafad2;
<h1 style="">見出しだけサイズ変更font-size:220%;
color文字色color:#d00000;
background / background-color背景色background:#fff4e6;
font-sizeフォントサイズfont-size:150%;

まとめ

  • style 属性 は セレクタ不要 でプロパティと値を直接書く“局所装飾ツール”。
  • 書式は style="プロパティ:値; …" —最後の ; を忘れずに。
  • ページ全体の統一感や再利用性は外部/内部 CSS、差分微調整は style 属性と 役割分担 するのがスマートな運用です。