CSSスタイルシート作成入門: 挿入方法、優先順位、競合解決まで徹底解説

CSSスタイルシートは、Webページの見た目を定義するために使用されます。HTML文書にスタイルを適用する方法には、いくつかの方法があります。この記事では、CSSスタイルシートの作成方法、スタイルの適用方法、そして複数のスタイルが競合した場合の優先順位について詳しく解説します。

1. スタイルシートの挿入方法 (How to Insert Style Sheets)

CSSスタイルシートをHTML文書に挿入するには、次の3つの方法があります。

  • 外部スタイルシート (External Style Sheets): 複数のページで共有するスタイルを定義する場合に適しています。

  • 内部スタイルシート (Internal Style Sheets): 特定のページだけに適用するスタイルを定義する場合に適しています。

  • インラインスタイル (Inline Styles): 特定の要素だけに適用するスタイルを定義する場合に適しています。

2. 外部スタイルシート (External Style Sheets)

外部スタイルシートは、CSSのスタイルを別ファイル（.cssファイル）に記述し、HTML文書からリンクする方法です。

  • 複数のページで同じスタイルを共有する場合に最適です。

  • 1つのファイルを更新するだけで、複数のページのデザインを変更できます。

外部スタイルシートをHTML文書にリンクするには、<link>タグを使用します。<link>タグは、HTML文書の<head>要素内に記述します。

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

  • rel="stylesheet": リンク先のファイルがスタイルシートであることを示します。

  • type="text/css": スタイルシートのタイプを指定します。

  • href="style.css": スタイルシートのファイル名を指定します。

例:

style.css

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: blue;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <title>外部スタイルシートの例</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>外部スタイルシートの例</h1>
  <p>これは段落です。</p>
</body>
</html>

3. 内部スタイルシート (Internal Style Sheets)

内部スタイルシートは、CSSのスタイルをHTML文書内の<style>タグ内に記述する方法です。

  • 特定のページだけにスタイルを適用する場合に最適です。

内部スタイルシートを定義するには、<style>タグをHTML文書の<head>要素内に記述します。

<head>
  <style>
    body {
      font-family: sans-serif;
    }
    h1 {
      color: red;
    }
  </style>
</head>

例:

<!DOCTYPE html>
<html>
<head>
  <title>内部スタイルシートの例</title>
  <style>
    body {
      font-family: monospace;
    }
    h1 {
      color: green;
    }
  </style>
</head>
<body>
  <h1>内部スタイルシートの例</h1>
  <p>これは段落です。</p>
</body>
</html>

CSSスタイルシートの作成

4. インラインスタイル (Inline Styles)

インラインスタイルは、CSSのスタイルをHTML要素のstyle属性に直接記述する方法です。

  • 特定の要素のみにスタイルを適用する場合に最適です。

  • しかし、HTMLとCSSが混在するため、コードが複雑になりがちです。

インラインスタイルを適用するには、HTML要素のstyle属性にCSSのプロパティと値を記述します。

<p style="color: blue; font-size: 18px;">これは青い段落です。</p>

例:

<!DOCTYPE html>
<html>
<head>
  <title>インラインスタイルの例</title>
</head>
<body>
  <h1 style="color: orange;">インラインスタイルの例</h1>
  <p>これは段落です。</p>
</body>
</html>

5. 複数スタイルの競合 (Multiple Styles)

1つのHTML要素に複数のスタイルが適用された場合、どのスタイルが適用されるか、優先順位があります。

  • インラインスタイル > 内部スタイルシート > 外部スタイルシート > ブラウザのデフォルトスタイル

つまり、インラインスタイルが最も優先度が高く、ブラウザのデフォルトスタイルが最も優先度が低くなります。

例:

<!DOCTYPE html>
<html>
<head>
  <title>複数スタイルの競合</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    h1 {
      color: green !important;
    }
  </style>
</head>
<body>
  <h1 style="color: blue;">複数スタイルの競合</h1>
</body>
</html>

style.css

h1 {
  color: red;
}

上記の例では、<h1>要素に3つのスタイルが適用されています。

  • 外部スタイルシート: color: red;

  • 内部スタイルシート: color: green;

  • インラインスタイル: color: blue;

この場合、優先順位は次のようになります。

  1. インラインスタイル (color: blue;)

  2. 内部スタイルシート (color: green;)

  3. 外部スタイルシート (color: red;)

したがって、<h1>要素のテキストの色は「青」になります。

6. スタイルの重ね合わせ (Cascading Styles)

CSSの「カスケーディング」とは、「重ね合わせ」を意味します。複数のスタイルシートを組み合わせて使用する場合、スタイルは互いに重ね合わさり、最終的なスタイルが決定されます。

7. 重ね合わせの順序 (Cascading Order)

スタイルの重ね合わせ順序は、次のとおりです。

  1. ブラウザのデフォルトスタイル (最低優先度): 各ブラウザには、HTML要素のデフォルトのスタイルが設定されています。

  2. 外部スタイルシート: <link>タグを使用してHTML文書にリンクされたスタイルシート。

  3. 内部スタイルシート: HTML文書内の<style>タグで定義されたスタイルシート。

  4. インラインスタイル (最高優先度): HTML要素のstyle属性で定義されたスタイル。

重要な注意点: 同じ優先順位のスタイルが競合する場合、後に読み込まれたスタイルが優先されます。

8. スタイルの優先順位の詳細 (Deep Understanding of Multiple Styles Priority)

スタイルの優先順位は、セレクタの特異性によって決まります。セレクタの特異性が高いほど、優先順位が高くなります。

セレクタの特異性は、次の4つのレベルで計算されます。

レベル 説明 例 特異性の値
インラインスタイル style 属性で定義されたスタイル <h1 style="color: red;"></h1> 1000
ID セレクタ id 属性に基づいて要素を選択します #myHeader { ... } 100
クラスセレクタ、属性セレクタ、擬似クラス class 属性、属性、擬似クラスに基づいて要素を選択します .highlight { ... } 10
要素セレクタ、擬似要素 要素のタイプに基づいて要素を選択します p { ... } 1

例:

/* 特異性: 101 */
#myDiv p { 
  color: blue; 
}

/* 特異性: 10 */
.myClass { 
  color: red; 
}

/* 特異性: 1 */
p { 
  color: green; 
}

上記の例では、#myDiv p セレクタの特異性が最も高いため、id="myDiv" を持つ要素内の <p> 要素のテキストは青色になります。

9. スタイルの優先順位の順序 (Multiple Styles Priority Order)

優先順位の低いものから順に、以下に示します。

  1. 汎用セレクタ (*): すべての要素に適用されます。

  2. 要素セレクタ (Type Selectors): 指定した種類のすべての要素に適用されます (例: p, h1, div)。

  3. クラスセレクタ (Class Selectors): 指定したクラス名を持つすべての要素に適用されます (例: .highlight)。

  4. 属性セレクタ (Attribute Selectors): 指定した属性を持つすべての要素に適用されます (例: [type="text"])。

  5. 擬似クラス (Pseudo-classes): 特定の状態にある要素に適用されます (例: :hover, :active)。

  6. ID セレクタ (ID Selectors): 指定したIDを持つ要素に適用されます (例: #myHeader)。

  7. インラインスタイル: HTML要素のstyle属性で定義されたスタイル。

  8. !important ルール (例外): 他のすべてのスタイルよりも優先されます。

!important ルール は、特定のスタイルを強制的に適用する場合に使用されます。ただし、!important ルールを使用すると、スタイルシートの保守性が低下する可能性があるため、注意して使用してください。

10. 重み計算の例 (Weight Calculation Example)

次のHTMLコードとCSSコードがあるとします。

<!DOCTYPE html>
<html>
<head>
  <title>重み計算の例</title>
  <style>
    p {
      color: blue; /* 特異性: 1 */
    }
    .highlight {
      color: red; /* 特異性: 10 */
    }
    p.highlight {
      color: green; /* 特異性: 1 + 10 = 11 */
    }
    #myParagraph {
      color: purple; /* 特異性: 100 */
    }
  </style>
</head>
<body>
  <p id="myParagraph" class="highlight">この段落の色は何色？</p>
</body>
</html>

この例では、 <p> 要素に複数のスタイルが適用されています。

  • p: color: blue; (特異性: 1)

  • .highlight: color: red; (特異性: 10)

  • p.highlight: color: green; (特異性: 11)

  • #myParagraph: color: purple; (特異性: 100)

#myParagraph セレクタはIDセレクタであるため、特異性が最も高くなります。 したがって、 <p> 要素のテキストの色は「紫」になります。

11. CSS優先順位の法則 (CSS Priority Rules)

CSSの優先順位を決定するための基本的な法則を以下にまとめます。

  1. セレクタの特異性: 特異性が高いセレクタのスタイルが優先されます。

  2. スタイルシートの読み込み順序: 同じ特異性を持つスタイルの場合、後に読み込まれたスタイルが優先されます。

  3. 作成者スタイル vs ブラウザスタイル: 作成者（Webページ制作者）が定義したスタイルは、ブラウザのデフォルトスタイルよりも優先されます。

  4. 継承スタイル vs 指定スタイル: 特定のプロパティに対して、継承されたスタイルよりも、直接指定されたスタイルが優先されます。

  5. !important ルールの適用: !important ルールが適用されたスタイルは、他のすべてのスタイルよりも優先されます。

これらの法則を理解することで、CSSスタイルシートを作成する際に、スタイルの競合を予測し、解決することができます。

CSSスタイルシートに関するQ&A

Q1: 外部スタイルシート、内部スタイルシート、インラインスタイルのどれを使用すればよいですか？

A1: 一般的には、外部スタイルシートを使用することをお勧めします。外部スタイルシートを使用すると、複数のページで同じスタイルを共有することができ、Webサイトの保守性が向上します。特定のページにのみ適用するスタイルがある場合は、内部スタイルシートを使用します。インラインスタイルは、できるだけ使用を避け、他の方法でスタイルを適用できない場合にのみ使用してください。

Q2: !important ルールを多用してもよいですか？

A2: !important ルールは、スタイルの優先順位を強制的に変更するため、多用するとスタイルシートの保守性が低下する可能性があります。 !important ルールは、他の方法でスタイルを適用できない場合にのみ使用してください。

Q3: CSSの優先順位を学ぶことは、なぜ重要ですか？

A3: CSSの優先順位を理解することは、Webページのスタイルを正確に制御するために非常に重要です。優先順位を理解することで、予期しないスタイルの競合を回避し、Webページのデザインを思い通りに作成することができます。

その他の参考記事:(cascading style sheets)は、h1 { background: blue; } のように書くことで文章を装飾できる。