CSS を HTML に適用する方法

CSS を HTML 文書に適用するには、いくつかの方法があります。方法によってメリットや、スタイルが適用されるときの優先順位などが変わるので、それぞれの方法の特性を理解したうえで使い分けましょう。

link 要素を使って外部スタイルシートを読み込む

HTML 文書とは別に用意した CSS ファイルである「外部スタイルシート」を、HTML 文書の head 要素内に記述した link 要素で読み込みます。1 つの CSS ファイルを複数の HTML 文書に読み込ませることで、スタイルの統一や変更が容易にできます。

<head>
  <title>カフェラテとカプチーノの違い</title>
  <link rel="stylesheet" href="style.css" />
</head>

<head>
  <title>当店自慢のパンケーキの秘密</title>
  <link rel="stylesheet" href="style.css" />
</head>

body {
  background-image: url(image/bg_body.png);
}
h1 {
  color: white;
  background-color: maroon;
}

link 要素を使って優先・代替スタイルシートを読み込む

link 要素に title 属性を指定すると、「優先」スタイルシートとなります。以下の例では、1 行目の固定スタイルシートは通常通り読み込まれ、2 行目、3 行目の優先スタイルシートは、先に記述した「スタイル 01」だけが読み込まれます。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style01.css" title="スタイル01" />
<link rel="stylesheet" href="style02.css" title="スタイル02" />

rel="alternate stylesheet" と title 属性を指定すると、閲覧者が選択できる「代替」スタイルシートを提供できます。以下の例では、閲覧者はブラウザのメニューなどから「スタイル 01」「スタイル 02」という代替スタイルシートを選択できます。

<link rel="stylesheet" "href="style.css">
<link
  rel="alternate stylesheet"
  href="style01.css"
  title="スタイル
01"
/>
<link
  rel="alternate stylesheet"
  href="style02.css"
  title="スタイル
02"
/>

同じ title 属性値を持った優先スタイルシートと代替スタイルシートはグループとして扱われます。以下の例では、閲覧者が代替スタイルシート「スタイル 02」を選択すると、優先スタイルシート「スタイル 02」が「スタイル 01」に代わって読み込まれます。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style01.css" title="スタイル01" />
<link rel="stylesheet" href="style02.css" title="スタイル02" />
<link rel="alternate stylesheet" href="style02.css" title="スタイル02" />

link 要素を使って条件付きで読み込む

media 属性にメディアクエリを指定することで、条件付きで読み込むこともできます。各外部スタイルシートは、指定された条件に当てはまる場合のみ読み込まれます。

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 768px)"
/>

style 要素を使ってスタイルを組み込む

HTML 文書の head 要素内に記述した style 要素に CSS を直接記述することで、文書内にスタイルを指定できます。

<head>
  <title>CSSの読み込み</title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

style 属性を使ってスタイルを読み込む

HTML のグローバル属性である style 属性を使うと、対象の要素にのみスタイルを指定できます。以下の例のように、属性値としてプロパティと値を直接記述します。

<p>
  私は、<span style="color: green;">緑色</span> と
  <span style="color: red;">赤色</span>の組み合わせが好きです。
</p>

@import 規則を使ってスタイルを読み込む

@import 規則は CSS の文書内や、HTML 文書の style 要素内に記述して外部のスタイルシートを読み込むための方法です。以下の例のように、@import に続けて url() 関数を記述し、括弧内に CSS ファイルの場所となる URL を指定します。なお、@import 規則は、CSS の文書内に読み込む場合も、HTML 文書の style 要素内に読み込む場合も、必ず、@charset 規則を除く他のスタイルより先に来るように記述します。また、@media 規則など、他の @規則内で使用することはできません。

@import "custom.css";
@import url("style.css");

メディアクエリを使用して、条件付きで読み込むこともできます。

@import "landscape.css" screen and (orientation: landscape);
@import url("../css/print.css") print;

@charset 規則を使って文字エンコーディングを指定する

HTML 文書の文字エンコーディングは UTF-8 になりますので、外部スタイルシートを読み込む際に、CSS ファイル内で非 ASCII 文字、例えば日本語などを使っている場合でも、CSS ファイルの文字エンコーディングが HTML 文書と同じ UTF-8 であれば問題は発生しません。通常、外部から読み込んだ CSS ファイルは、読み込む先の HTML 文書と同じ文字エンコーディングで処理されます。

しかし、何らかの事情で、CSS ファイルの文字エンコーディングに UTF-8 以外を使用したい場合は、CSS ファイル側で文字エンコーディングを指定することが望ましいです。スタイルシートの文字エンコーディングをブラウザに伝える方法はいくつかありますが、@charset 規則を CSS の文書内の先頭に記述することで文字エンコーディングを指定することが可能です。以下の例では、文字エンコーディングを Shift_JIS と定義しています。

なお、@charset 規則は、必ず文書の先頭に、スペースや改行を入れることなく記述しなければなりません。もし複数の @charset 規則が記述された場合、最初に記述されたものだけが有効になります。また、@media 規則など、他の @規則内で使用することはできません。

@charset "Shift_JIS";

W3 Watch Reference

CSS リファレンス