HTMLにCSSを追加する方法

<p style="color: red; font-size: 16px;">これは赤色でサイズ16のテキストです。</p>

この方法は、個々の要素に対してスタイルを適用するために使用されますが、大規模なウェブサイトの場合はメンテナンスが困難になる可能性があります。

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>これは赤色でサイズ16のテキストです。</p>
</body>

この方法では、HTMLファイル内の複数の要素に同じスタイルを適用することができますが、複数のHTMLファイルで同じスタイルを使用する場合は、スタイルのコピーが必要になります。

外部スタイルシート: 外部のCSSファイルを作成し、HTMLファイルでそれを参照することで、複数のHTMLファイルで同じスタイルを共有することができます。以下は例です。

まず、styles.cssという名前の新しいCSSファイルを作成します。

styles.cssファイルの

p {
  color: red;
  font-size: 16px;
}

次に、HTMLファイル内の<head>タグ内に、外部スタイルシートを参照するための<link>タグを追加します。

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>これは赤色でサイズ16のテキストです。</p>
</body>

この方法では、複数のHTMLファイルで同じスタイルを簡単に共有することができます。スタイルの変更が必要な場合は、単一のCSSファイルを編集するだけで済みます。

以上が、HTMLにCSSを追加する方法のいくつかの例です。これらの方法を使用することで、ウェブページのデザインを効果的にカスタマイズすることができます。