Index

非推奨の書き方

インラインスタイル

インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 style 属性の中に記述します。 HTML 文書におけるインラインスタイルの実装は次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

**この方法での CSS の使用は、可能な限り避けてください。**まず、 CSS の実装の中では最も保守の効率が悪いものです。

一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。

第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。

コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。

インラインスタイルが一般的な状況はいくつかあります。

作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。

例えば、 CMS では HTML の本文しか編集できない場合があります。

また、できるだけ多くのメールクライアントとの互換性を実現するために、 HTML メールでインラインスタイルが多用されているのを見ることもあるでしょう。