CSSの適用方法 3種類

HTMLにCSSを適用するには次の３つの方法があります。

  1. style 属性でスタイルを指定する（HTMLファイルに記述）
  2. style 要素でまとめてスタイルを指定する（HTMLファイルに記述）
  3. link 要素で外部スタイルシートを読み込む（CSSファイルに記述）

この３つのうち、推奨されているのは３番目の外部スタイルシートを読み込む方法です。

それぞれの方法について見ていきます。

1. style 属性でスタイルを指定する（HTMLファイルに記述）

HTML 要素の style 属性を使って直接スタイルを指定します。

次の指定例では、p 要素の color プロパティを 「red」、font-size プロパティを「15px」に指定しています。 複数指定する場合はセミコロン(;)で区切ります。


<p style="color: red; font-size: 15px">...</p>

2. style 要素でまとめてスタイルを指定する（HTMLファイルに記述）

<style>...</style>の中にスタイルを指定します。 通常は head 要素の中に style 要素を記述します。


<head>
.
.
<style>
p {
    color: red;
    font-size: 15px;
}
h1 {
    font-size: 20px;
}
</style>
</head>

3. link 要素で外部スタイルシートを読み込む（CSSファイルに記述）

HTMLファイルとはべつに外部スタイルシート（CSSファイル）を用意し、 link 要素でCSSファイルを読み込みます。CSSファイルの拡張子は「.css」とします。

外部スタイルの先頭に「@charset」で文字コードを指定します。通常は「UTF-8」を指定します。

HTMLファイル側の記述


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

CSSファイル側の記述（style.css）

@charset "UTF-8";
p {
    color: red;
    font-size: 15px;
}
h1 {
    font-size: 20px;
}

スタイル指定が重複した時の優先順位

複数のスタイル指定方法があるので、指定が重複してしまう場合もあります。 その場合は、後から読み込まれた指定ほど優先順位が高くなります。

文章は上から下へ処理されていきますので、 通常の優先順位は下のようになります。

スタイル優先順位

文書内の指定で重複した場合は、より限定的で詳細な指定を行っているスタイルが優先されます。 例えば、要素に対して指定したスタイルと、クラスに対して指定したスタイルが重複する場合は、 クラスに対して指定したスタイルが優先されます。

優先させたい場合は「!important」を使う

優先させたいスタイルに対して「!important」キーワードを使うことで、 そのスタイルが優先されます。


p {
    color: red; !important
    font-size: 15px; !important
}

上の場合は p 要素の「color: red;」と「font-size: 15px;」の指定が優先されます。

HTML・CSS入門