CSSの順番のルールは？

CSSの順序規則：優先順位を理解してスタイルを正しく適用しよう

Webページのデザインにおいて、CSSは必要不可欠な要素です。しかし、CSSの記述順序によってスタイルの適用結果が変わることがあり、初心者の方にとっては混乱を招く原因にもなります。そこで、この記事では「CSSの記述順序と優先順位」について詳しく解説していきます。HTMLのコード例や分かりやすい表を使って、CSSの適用ルールを理解し、意図したデザインを実現するスキルを身につけましょう。

1. CSSを書く順番：基本は「後勝ち」

CSSは基本的に「一番最後に書いたものが優先される」というルールがあります。ブラウザはHTMLやCSSを上から順番に読み込んでいくため、後から読み込まれたスタイルが優先的に適用されるのです。

例：後から読み込まれたスタイルが適用される


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSの優先順位</title>
  <style>
    p {
      color: blue; /* 青色に設定 */
    }
    p {
      color: red; /* 赤色に設定 */
    }
  </style>
</head>
<body>
  <p>このテキストの色は？</p>
</body>
</html>

この例では、同じ<p>タグに対して、"color: blue;"と"color: red;"の2つのスタイルが設定されています。ブラウザは後から読み込んだ"color: red;"を優先するため、テキストの色は赤色になります。

2. CSSの優先順位を決める要素

CSSの優先順位は、単に記述順序だけで決まるわけではありません。より具体的に優先順位を決定づける要素は以下の4つです。

!important: 最も優先度が高い。スタイル指定の最後に!importantを付けると、他のどのスタイルよりも優先される。
インラインスタイル: HTMLタグ内に直接記述するスタイル。HTMLの構造とCSSが密接に関係するため、可読性は低くなりますが、優先度は高くなります。
IDセレクタ: #id名 で指定するスタイル。ページ内で一意の要素に適用されるため、特定の要素のスタイルを一括で変更したい場合に便利です。
クラスセレクタ: .クラス名 で指定するスタイル。同じクラスを持つ複数の要素に適用できるため、共通のスタイルを一括で設定したい場合に便利です。
タグセレクタ: タグ名 で指定するスタイル。HTMLの要素すべてに適用されるため、特定の種類の要素のスタイルを一括で変更したい場合に便利です。

これらの要素が組み合わさる場合、以下の表に従って優先順位が決定されます。

優先順位	種類	説明	例
1	`!important`	スタイル指定の最後に`!important`を付ける	`p { color: red !important; }`
2	インラインスタイル	HTMLタグ内に直接記述する	`<p style="color: blue;">`
3	IDセレクタ	`#id名` で指定する	`#main-title { font-size: 24px; }`
4	クラスセレクタ	`.クラス名` で指定する	`.highlight { background-color: yellow; }`
5	タグセレクタ	`タグ名` で指定する	`p { line-height: 1.5; }`

3. 具体的な例と解説

例1：クラスセレクタとタグセレクタの組み合わせ


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSの優先順位</title>
  <style>
    p {
      color: blue; 
    }
    .highlight {
      color: red; 
    }
  </style>
</head>
<body>
  <p>青いテキスト</p>
  <p class="highlight">赤いテキスト</p>
</body>
</html>

最初の<p>タグは、タグセレクタpのスタイルが適用され、青色で表示されます。
2つ目の<p>タグには、クラスセレクタ.highlightが適用されるため、タグセレクタよりも優先度が高く、赤色で表示されます。

例2：!importantの使用


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSの優先順位</title>
  <style>
    #main-title { 
      font-size: 24px; 
    }
    p { 
      font-size: 16px !important; 
    }
  </style>
</head>
<body>
  <p id="main-title">見出し</p>
</body>
</html>

<p>タグには、IDセレクタ#main-titleとタグセレクタpの両方が適用されます。
通常、IDセレクタの方が優先度が高いですが、pタグのfont-sizeには!importantが付いているため、IDセレクタよりも優先され、フォントサイズは16pxで表示されます。

4. まとめ

CSSの記述順序と優先順位を理解することは、Webデザインを行う上で非常に重要です。基本は「後勝ち」ですが、セレクタの種類や!importantの利用によって、より細かく優先順位をコントロールできます。今回の内容を参考に、意図した通りのスタイルを適用し、美しいWebページを作成してください。

よくある質問

Q1: CSSの記述順序で困らないためには、どうすれば良いですか？

A1: なるべくCSSの記述は、外部ファイルにまとめておくことをおすすめします。HTMLファイルとCSSファイルを分けておくことで、コードの見通しが良くなり、スタイルの管理がしやすくなるだけでなく、後から修正が必要になった場合でも、特定のスタイルだけを修正するだけで済むため、効率的に作業を進めることができます。

Q2: `!important`は多用しても良いのでしょうか？

A2: !importantは、強力な機能である一方、多用するとコードの可読性が低下し、予期せぬスタイルの適用につながる可能性があります。!importantは、本当に必要な場合にのみ、限定的に使用することを心がけましょう。

Q3: CSSの優先順位について、もっと詳しく学ぶには？

A3: MDN Web Docsなど、信頼できるWeb開発の参考サイトで、"CSS Cascade"や"CSS Specificity"といったキーワードで検索すると、より詳細な情報を得られます。

参考文献

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