目次
スタイルシート (Cascading Style Sheet: CSS)とは、HTML に代わって文書の視覚的効果を表すもので、HTML と組み合わせて使用します。従来、HTML は文章の構造（タイトルやヘッダーなど）と視覚的効果（フォントや色など）をタグやその属性で表してきました。
しかし、文章の構造とその表現方法は明確に分けた方が良いとの機運が高まり、HTML 4.01 strict や XHTML では文章の構造のみを表現するようになり、視覚的効果を表すタグや属性は廃止されました。HTMLに代わり文書のレイアウトなどを表すものとしてスタイルシートが使われます。
スタイルシートの指定方法
スタイルシートを指定するには、次の3つの方法があります。
- 各タグのstyle属性で指定する
- <STYLE>タグで指定する
- 外部ファイルにスタイルシートを定義して、そのURLを<LINK>タグで指定する
style属性
スタイルシートをHTMLの各要素のstyle属性に指定することができます。
セミコロン記号で区切って複数のスタイルシート属性を指定することもできます。次はH1要素タイプにスタイルシートを指定した例です。
<STYLE>タグ
スタイルシートをHTMLの STYLE要素タイプで指定することもできます。
<head>
<title>CSS sample</title>
<style type="text/css">
<!--
h1 { font-size: large; color: red }
-->
</style>
</head>
スタイルシートの定義が <!-- と --> で挟まれてコメントになっているのは、スタイルシートが使用できないブラウザではコメントとして扱われるようにしているためです。
<LINK>タグ
スタイルシートを外部ファイルで定義した場合は、HTMLの LINK要素タイプでその外部ファイルのスタイルシートを参照するように指定します。
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
外部ファイル stylesheet.css の中でスタイルシートの定義を行います。
複数の要素に対してスタイルを定義する際は、要素をカンマ記号で区切って一度に定義することができます。
クラス
スタイルシートの定義に任意の名前を付けることができます。これをクラスと言います。クラスを定義する際は、クラスの定義であることを表すために必ずピリオド記号から始めます。
赤い大きな文字にするスタイル定義に notice というクラス名を付ける例を次に示します。
この notice クラスを使用するには、HTML要素のclass属性にクラス名を指定します。
<p class="notice">sample</p>
特定の要素に対してクラスを定義することもできます。特定の要素に対してクラスを定義するには、「要素名.クラス名」の形式で定義します。
h2要素に対して定義したクラスは、h2要素のclass属性から指定できます。他の要素のclass属性では指定できません。
ある特定のクラス内の要素に対してスタイルシートを指定するには、クラス名と要素タイプ名を半角スペースで区切ってスタイルシートを指定します。
例えば、<div class="navi"> と </div> の間に存在するA要素タイプに対してスタイルシートを指定するには、次のようにします。
A要素タイプでも navi クラス内にあるか否かで上記スタイルシートが適用されるかどうかが決まります。
ID
スタイルシート定義にIDを付けることができます。IDを定義する際は、IDの定義であることを表すためにシャープ記号からはじめます。
IDを付けたスタイルを使用するには、HTML要素のid属性に指定します。クラスと異なり、ひとつのHTMLドキュメント中に複数の要素が同じIDを持つことはできません。