CSS ・ CSSの記法
インラインスタイル
style属性にCSSを書く
HTMLの要素に style 属性を付けて、その要素だけに直接CSSを書く方法です。インラインスタイルシートとも呼ばれます。
01
サンプルコード
HTML
1<p>ふつうの段落です。</p>
2<p style="color: #c0392b; font-weight: bold;">この段落だけ style 属性で赤く太字にしています。</p>
3<p class="note" style="color: #2e7d5b;">クラスの指定より style 属性が優先されます。</p>
CSS
1.note {
2 color: #7d5411;
3}
02
実行結果
ブラウザでの表示
03
解説
インラインスタイルは、要素に style 属性を付け、その値に「プロパティ: 値;」を直接書く方法です。セレクタは書きません。
その要素だけにスタイルが適用され、詳細度が非常に高い（1-0-0-0、約1000点）ため、CSSファイルの指定よりも優先されます。上の3つ目の段落では、.note の色より style 属性の色が勝っています。
優先度が高すぎて後から上書きしにくく、HTMLとデザインが混ざって管理しづらくなるため、通常のサイト制作ではなるべく使いません。JavaScriptで一時的に見た目を変えるときなどに使われます。
04
応用例・注意点
3つの書き方の比較
| 書き方 | 説明 |
|---|---|
外部スタイルシート | 別ファイル。基本はこれ |
内部スタイルシート | head の style 要素。そのページだけ |
インラインスタイル | style 属性。その要素だけ・最も優先される |
JavaScript で一時的に変更する
JavaScript の style プロパティで変えた値は、インラインスタイルとして要素に書き込まれます。
HTML
1<p id="msg">メッセージ</p>
2<script>
3 document.getElementById('msg').style.color = 'red';
4 // → <p id="msg" style="color: red;"> になる
5</script>
注意点
- 01インラインスタイルを上書きするには !important が必要になり、CSSがどんどん複雑になります。多用しないようにします。
- 02style 属性には :hover などの疑似クラスやメディアクエリは書けません。
- 03メールの本文（HTMLメール）など、外部CSSが使えない場面ではインラインスタイルが使われます。