シンプルでわかりやすいHTMLスタイルの書き方：<style> タグを使いこなそう

2024-05-20

HTMLの <body> タグ内に <style> タグを使用してスタイルを適用する方法

外部 CSS ファイルを使用する:
- スタイル定義を .css ファイルに記述し、<head> タグ内で <link> タグを使用して HTML ファイルに読み込む方法です。
- 利点: 複数のページで共通するスタイルを効率的に管理できる、コードが読みやすくなる
- 欠点: ファイルの読み込みが必要となるため、ページの読み込み速度が遅くなる可能性がある
<body> タグ内に <style> タグを使用する:
- スタイル定義を <body> タグ内に直接記述する方法です。
- 利点: 簡単でシンプル、外部ファイルへの読み込みが不要
- 欠点: コードが冗長になり、メンテナンス性が悪くなる、他のページにスタイルを適用できない

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <p>本文</p>

  <style>
    p {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
    }
  </style>
</body>
</html>

上記の例では、<body> タグ内に <style> タグを使用して、p 要素のフォントファミリー、フォントサイズ、文字色を設定しています。このスタイルは、この HTML ファイル内のすべての p 要素に適用されます。

<style> タグのスコープ

<body> タグ内に配置された <style> タグで定義されたスタイルは、その <style> タグ以降に出現する要素にのみ適用されます。つまり、他の <style> タグや外部 CSS ファイルで定義されたスタイルよりも優先的に適用されます。

<style> タグの使用に関する注意点

<body> タグ内に <style> タグを使用すると、コードが冗長になり、メンテナンス性が悪くなる可能性があります。
複数のページで共通するスタイルを定義する場合は、外部 CSS ファイルを使用することをお勧めします。
<style> タグを使用してスタイルを定義する場合は、セレクターを明確に記述し、意図しない要素にスタイルが適用されないように注意する必要があります。

サンプルコード：<h1> から <h6> まで見出しを装飾

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>見出し装飾</title>
</head>
<body>
  <h1>見出し 1</h1>
  <h2>見出し 2</h2>
  <h3>見出し 3</h3>
  <h4>見出し 4</h4>
  <h5>見出し 5</h5>
  <h6>見出し 6</h6>

  <style>
    h1 {
      font-size: 32px;
      color: red;
    }

    h2 {
      font-size: 24px;
      color: blue;
    }

    h3 {
      font-size: 18px;
      color: green;
    }

    h4 {
      font-size: 16px;
      color: purple;
    }

    h5 {
      font-size: 14px;
      color: teal;
    }

    h6 {
      font-size: 12px;
      color: gray;
    }
  </style>
</body>
</html>

このコードを実行すると、以下のようになります。

<h1> 見出しは赤色で 32 ピクセルのフォントサイズで表示されます。

この例はほんの一例です。font-family, font-weight, text-decoration, margin, padding などの他の CSS プロパティを使用して、見出しをさらに装飾することができます。

以下の例では、p 要素内のテキストを中央揃えし、1.5 倍行間隔にする方法を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>段落装飾</title>
</head>
<body>
  <p>本文です。本文です。本文です。本文です。本文です。本文です。</p>

  <style>
    p {
      text-align: center;
      line-height: 1.5;
    }
  </style>
</body>
</html>

この例では、<style> タグを <body> タグ内に配置しています。これは、このスタイルが HTML ファイル内のすべての p 要素に適用されることを意味します。

body タグ内に <style> タグを使用すると、HTML ファイル内でスタイルを簡単に定義することができます。ただし、この方法は、外部 CSS ファイルを使用するよりもメンテナンス性が悪くなる可能性があることに注意する必要があります。

例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>本文</p>
</body>
</html>

/* style.css */
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
}

欠点:
- コードが冗長になる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <style>
    p {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
    }
  </style>
</head>
<body>
  <p>本文</p>
</body>
</html>

利点:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <p>本文</p>

  <style>
    p {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
    }
  </style>
</body>
</html>

1 つのページのみで使用するスタイルを定義する場合は、<head> タグ内 または <body> タグ内 の <style> タグを使用しても良いでしょう。
ただし、<body> タグ内 の <style> タグは、コードが冗長になりやすく、メンテナンス性が悪くなるため、できるだけ避けたほうが良いでしょう。

上記以外にも、以下のような方法でスタイルを適用することができます。