CSSの基礎知識

CSSをHTML文書に組み込むには

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

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

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

HTML 
<head> 
  <title>カフェラテとカプチーノの違い</title>
  <link rel="stylesheet" href="style.css">
</head>
HTML 
<head>
  <title>当店自慢のパンケーキの秘密</title>
  <link rel="stylesheet" href="style.css">
</head>
CSS 
body{
  background-image: url(image/bg_body.png);
}
h1{
  color: white; background-color: maroon;
}

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

HTML文書のhead要素内に記述したstyle要素にCSSを直接記述することで、文書内にスタイルを指定できます。また、HTML5から定義された新しいscoped属性を使うことで、文書内の特定の範囲のみにスタイルを指定することも可能です。

HTML 
<head>
  <title>CSSの読み込み</title>
  <style type="text /css">
<!--
  h1{
    color: red;
}
-->
  </style>
</head>

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

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

HTML 
<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要素内に組み込む場合も、必ず他のプロパティの指定よりも先に来るように、先頭に記述します。

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

@charset規則を使って文字コードを指定する

外部スタイルシートを組み込む際に、CCSの文書内で日本語を使っている場合などは文字コードを指定することが望ましいです。文字コードを指定しない場合は、組み込む先のHTML文書と同じ文字コードで処理されます。＠charset規則をCSSの文書内の先頭に記述することで文字コードを指定可能です。以下の例では、文字コードをShift_JISに指定しています。

CSS 
@charset "Shift_JIS";
/*＠charset規則は、必ず文書の先頭に、スペースや改行を入れることなく記述します*/

関連記事