スタイルシート (Cascading Style Sheet: CSS) とは、HTML に代わって文書の視覚的効果を表すもので、HTML と組み合わせて使用します。従来、HTML は文章の構造(タイトルやヘッダーなど)と視覚的効果(フォントや色など)をタグやその属性で表してきました。

しかし、文章の構造とその表現方法は明確に分けた方が良いとの機運が高まり、HTML 4.01 strict や XHTML では文章の構造のみを表現するようになり、視覚的効果を表すタグや属性は廃止されました。HTMLに代わり文書のレイアウトなどを表すものとしてスタイルシートが使われます。

スタイルシートの指定方法

スタイルシートを指定するには、次の2つの方法があります。

HTML文書の中でスタイルシートを指定

HTML文書の中でスタイルシートを指定するには、次の2つの方法があります。

HTMLの各要素のstyle属性にスタイルシート属性を指定する

スタイルシートをHTMLの各要素のstyle属性に指定することができます。

< 要素タイプ名 style=" スタイルシート属性 "> ... </ 要素タイプ名 >

セミコロン記号で区切って複数のスタイルシート属性を指定することもできます。次はH1要素タイプにスタイルシートを指定した例です。

<h1 style="font-size: large; color: red">スタイルシート</h1>

style要素にセレクタを記述する

HTMLのstyle要素セレクタを記述すると、セレクタにマッチする要素にスタイルシートが適用される。HTMLのstyle要素にセレクタを記述する例を次に示す。

<html>
<head>
<title>CSS sample</title>
<style type="text/css">
<!--
h2 { font-size: large; color: red }
-->
</style>

</head>

上記の例の場合、このHTML文書に含まれるすべてのh2要素に対して、 font-size:largecolor:red の2つのスタイルシート属性が適用される。

セレクタの記述が <!----> で挟まれてコメントになっているのは、スタイルシートが使用できないブラウザでコメントとして扱われるようにしているためである。

スタイルシートを外部ファイルで定義した場合は、HTMLの LINK要素タイプでその外部ファイルのスタイルシートを参照するように指定します。

<head>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

外部ファイル stylesheet.css の中でスタイルシートの定義を行います。

h1 { font-size: large; color: red }

CSSスタイルシートのコメント

/* 」と「 */ 」に囲まれた部分はコメント(注釈)となる。コメントは複数行にわたってもよい。ただし、入れ子(ネスト)にすることはできない。

他の言語にあるような「 // 」や「 # 」といった単一行コメントは、CSSスタイルシートには無い。

コメントの使用例を次に示す。

h1 {
    background-color: red;    /* 背景は赤色 */
}

スタイルシート(CSS)の優先順位

セレクタによる優先順位

セレクタには次の優先順位がある。

  1. IDセレクタ
  2. クラスセレクタ
  3. タイプセレクタ
  4. 全称セレクタ

設定者による優先順位

設定者には次の優先順位がある。

  1. 製作者スタイルシート
  2. ユーザスタイルシート
  3. デフォルトスタイルシート

製作者スタイルシートとは、ウェブサイトの製作者が閲覧者にどのように見せたいかを設定するスタイルシートである。HTML文書内でスタイルシートを定義する。ユーザスタイルシート及びデフォルトスタイルシートより優先される。

ユーザスタイルシートとは、ウェブサイトの閲覧者が自分の見やすいように表示するよう設定するスタイルシートである。ウェブブラウザでスタイルシートを指定する。デフォルトスタイルシートより優先される。

デフォルトスタイルシートとは、ウェブブラウザのデフォルトのスタイルシートである。