インラインスタイルとは、HTMLタグの中で直接CSS（カスケーディングスタイルシート）を記述して、要素ごとにスタイルを適用する方法です。例えば、文字の色やサイズ、背景色など、特定のHTML要素にのみスタイルを適用したい場合に使用します。

通常、スタイルはstyle属性を使用してHTMLタグ内に記述されます。例えば、次のようにインラインスタイルを用いることで、特定のテキストに色をつけたりフォントサイズを変更できます。

<p style="color: blue; font-size: 18px;">このテキストは青色で18pxです。</p>

インラインスタイルのメリットとデメリット

メリット

• 特定の要素にすばやく適用：インラインスタイルは、個別のHTML要素にスタイルを直接指定するため、特定の要素だけを迅速にカスタマイズできます。
• 簡単なデザイン変更：簡単なデザイン変更をテストしたいときや、特定のページだけに異なるデザインを適用したいときに便利です。

デメリット

• メンテナンスが難しい：複数の要素に同じスタイルを適用する場合、インラインスタイルを使用するとコードが煩雑になり、メンテナンスが難しくなります。
• コードが肥大化する：インラインスタイルを多用すると、HTMLコードが冗長になり、ページの読み込み速度に影響を与えることがあります。
• CSSの再利用が困難：インラインスタイルは要素ごとにスタイルを指定するため、CSSの再利用性が低く、効率が悪くなります。

インラインスタイルの使用例

テキストの色変更

テキストの色を変更する際、インラインスタイルでcolorプロパティを指定できます。

<p style="color: red;">このテキストは赤色です。</p>

背景色の設定

特定の要素に背景色を設定する際にもインラインスタイルを利用できます。

<div style="background-color: yellow;">この部分の背景色は黄色です。</div>

フォントサイズの変更

フォントサイズを変更する際も、インラインスタイルでfont-sizeを指定します。

<h1 style="font-size: 24px;">この見出しのフォントサイズは24pxです。</h1>

インラインスタイルの代替方法

外部スタイルシート（External Stylesheet）

外部スタイルシートは、CSSコードを別のファイルにまとめ、HTMLファイルにリンクする方法です。サイト全体に共通のスタイルを適用でき、コードの一元管理がしやすくなります。

<link rel="stylesheet" href="style.css">

内部スタイルシート（Internal Stylesheet）

内部スタイルシートは、HTMLファイル内の<style>タグを用いてCSSを記述する方法です。特定のページにのみスタイルを適用したい場合に便利です。

<style>
  p {
    color: green;
  }
</style>

クラスやIDの活用

複数の要素に同じスタイルを適用する場合、クラスやIDを使ったCSSの指定が推奨されます。インラインスタイルよりも効率が良く、管理がしやすいです。

<p class="important">このテキストは重要なスタイルが適用されています。</p>

.important {
  color: red;
  font-weight: bold;
}