HTMLにCSSを適用させる3つの方法

HTMLにCSSを適用させるには、どうしたら良いでしょうか？

本ページでは、HTMLにCSSを適用させる3つの方法を説明します。

HTMLにCSSを適用させる方法の比較

HTMLにCSSを適用させる方法は、3つあります。外部CSSファイルを使う方法、style要素を使う方法、style属性を使う方法です。

以下は、その説明です。

【HTMLにCSSを適用させる方法】
方法	説明	有効範囲	優先度
外部CSSファイル	style.cssなどのファイルでCSSを定義します。	複数ページ	2
style要素	HTMLのhead内で、syle要素を使って定義します。	1ページ	2
style属性	各タグにstyle属性を使って定義します。	ページの一部	1

優先度は、同じプロパティが使われた(上の2つはセレクタも同じ)時に、どの方法が優先されるかです。例えば、外部CSSファイルでcolor:red;、style属性でcolor:blue;と宣言した時は、style属性が優先されて文字の色は青になります。

外部CSSファイルと、style要素は同じ優先度で、後で定義した方が有効になります。

外部CSSファイルを利用した定義方法です。

CSSを記述したファイルを、cssフォルダなどにstyle.cssなどのファイル名で保存します。

HTMLへの読み込みは、以下のようにします。

【外部CSSファイルを読み込むHTML記述例】

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

上記のように、head内にlink要素を使って読み込む外部CSSファイルを指定します。赤字部分は、保存したフォルダやファイル名によって変えてください。

複数のHTMLページで同じ外部CSSファイルを読み込めば、同じレイアウトになります。このため、この方法を使うのが基本です。

以下のように、複数link要素を記述して、異なる外部CSSファイルを読み込むこともできます。

【複数の外部CSSファイルを読み込むHTML記述例】

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

同じプロパティが使われていた時は、後から読まれたスタイルが優先されます。このため、これまで作成したページに影響を与えないように、新たなページでスタイルを追加(上の例では新たなページだけstyle2.cssを適用)したい時などに使えます。

また、外部CSSファイル内で以下のように記述すると、外部CSSファイルから他の外部CSSファイルを読み込ませることができます。

【外部CSSファイルから外部CSSファイルを読み込む】

@import url("style2.css");
@import url("style3.css");

これは、@charsetの直後に記述する必要があります。これで、style2.cssとstyle3.cssが読み込まれます。

CSSファイルを分割して管理する時に便利ですが、ファイルサイズが大きくなると読み込み時間が遅くなる点は留意が必要です。

style要素を利用した定義方法です。

head内で定義します。以下は、例です。

【style要素を利用してスタイルを定義するHTMLの例】

<head>
<style>
  p {
    color: red;
  }
</style>
・・・
</head>

上記により、p要素の文字が赤色になります。

この方法は、style要素を使ったページだけで有効になります。link要素で先に外部CSSファイルを読み込み、後でstyle要素を記述すると、外部CSSファイルのスタイルを上書きできます。このため、外部CSSファイルを利用しているけど、このページだけ少し変えたいといった時に利用します。

セレクタは、外部CSSファイルと同様の書き方ができます。また、メディアクエリも使えます。

style属性を利用した定義方法です。

要素に対してstyle属性を利用して、直接定義します。以下は、例です。

【style属性を利用して要素に直接スタイルを定義するHTMLの例】

<p>ここは、<span style="color:red;">赤字<span>です。</p>

上記により、「赤字」部分だけ文字が赤色になります。もし、2つ以上の宣言を記述する場合は、color:red;background-color:yellow;などと記述します。セミコロン(;)が区切りを示します。

この方法は、style属性を使った要素だけで有効になります。このため、一部の色を変えたいなど、ページの一部でスタイルを変更する時に利用します。