CSSの指定方法（style要素、style属性、class属性、id属性）

カテゴリ：CSS編

CSSを記述する3つの方法

CSSを記述する方法は以下の3通りがあります。
なお、CSSの再利用性上、外部ファイル化が一般的な記述方法となります。

style属性にインラインで記述

スタイルシートを設定したい要素にstyle属性で記述します。

例）

<h1 style="font-size: x-large;">x-largeの文字サイズで表示します</h1>

重要 インライン記述は後述するセレクタによる指定よりも優先されます。

ページヘッダのstyle要素に直接記述

head要素内に、style要素を使用して記述します。

例）

<style>
h1 { font-size: x-large; }
</style>

外部ファイル化

ファイル拡張子がcssのファイルを作成し、そのファイルに記述します。
そしてhead要素内に、link要素を使用して上記のcssファイルを読み込ませます。

例）
header.cssファイルに以下を記述

h1 { font-size: x-large; }

link要素でheader.cssファイルを読み込ませる

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

CSSを適用する対象の指定方法

CSSを定義する際に、どの要素にプロパティを適用させるかをセレクタで指定する必要があります。

CSSの構文

セレクタとプロパティ、プロパティ値の構文は以下となります。

CSSの構文）

セレクタ { プロパティ名: プロパティ値; }

セレクタは大まかに分けると以下の3通りがあります。

要素名で指定

要素名で指定する場合、セレクタを要素名にします。
要素名で指定した場合、指定したすべての要素に適用されます。

すべてのa要素の文字色を緑色に指定する場合：

a { color: green; }

idで指定

idで指定した場合、そのidを指定した要素に適用されます。

Note idはページ内で一意でなければなりません。ページ内に同じid名を複数回使用することは構文違反となります。

menuという名前のidを持つ要素の背景色を緑色、文字色を白色に指定する場合：

#menu { color: white; background-color: green; }

idと要素名で指定

以下のようにidの前に要素名を記述することで、idと要素で指定することも可能です。

menuという名前のidを持つa要素の背景色を緑色、文字色を白色に指定する場合：

a#menu { color: white; background-color: green; }

classで指定

classで指定した場合、そのclassを指定したすべての要素に適用されます。

Note classはページ内に同じclass名が何度出現しても問題ありません。

noteという名前のclassを持つ要素をグレーの枠線で装飾する場合：

.note { border: gray 1px solid; }

classと要素名で指定

以下のようにclassの前に要素名を記述することで、classと要素で指定することも可能です。

noteという名前のclassを持つp要素をグレーの枠線で装飾する場合：

p.note { border: gray 1px solid; }

優先順位

idとclassの両方が指定されており、且つプロパティが重複する場合、classよりもidが優先されます。
また、idやclassに要素名の指定もある場合と無い場合とでは、要素名の指定もある方が優先されます。

従って優先順位が高い順に記載すると以下となります。

1. 要素#id
2. idのみ
3. 要素.class
4. classのみ
5. 要素のみ

公開日時：2019年06月11日 22:50:33