stylesheet

　スタイルシートは、文字や背景の色、文字サイズや字体、字下げなどを指定するものです。指定には、カスケーディングスタイルシート(CSS:CascadingStyle Sheet)と呼ばれる言語を使います。cascadeとは滝のことです。
Webページの編集デザインを思い通りにするため、論理的な要素を体裁の指定に使うなど、「文書の構成要素を指定する」という本来のHTML言語の性質とは違う使い方がなされてきました。論理要素と体裁を分離するというHTML言語のあり方を維持しつつ、ページの編集デザインを細かく指定するために、スタイルシートが考案されました。ここでは、CSSの基本を述べます。

スタイル定義

スタイルを具体的に指定するのが、スタイル定義です。
例えば、H1の要素の文字を赤にしたい場合、次のように書きます。

H1 { color: red }

H1の部分はセレクタと呼ばれ、スタイル指定の対象になる要素です。{と}の中がスタイルの規則で、属性(この例ではcolor)と値(この例ではred)のペアです。一般的な形は次のようになります。

セレクタ, セレクタ, .... { 属性:値; 属性:値; ..... }

セレクタは複数書け、カンマで区切って並べます。これが規則の適用対象になります。規則も複数指定でき、セミコロンで区切ります。CSSで指定できる主な属性とその値を表に示します。

<STYLE>タグまたはstyle属性を使って、このスタイル指定をHTML文書に記述された要素と結びつけます。

<STYLE>タグ

<STYLE>タグは、<HEAD>タグの中に書き、ページ全体のスタイルを指定します。
<STYLE>と</STYLE>で囲んだ中には任意個のスタイル定義を指定できます。<STYLE>タグのtype属性は、スタイルシートの記述言語を指定するもので、"text/css"と書きます。次の例は、このページでは背景色を白に、大見出しの文字の色を赤にする指定です。この指定はページ全体に有効ですから、<H1>タグごとに文字の色を指定する必要はありません。

表スタイル定義の属性の例とその値
意味	属性名	値
文字の大きさ	font-size	em,pxなどの長さの数値(例:0.5em)5 絶対サイズ2, 相対サイズ*3
文字の太さ	font-weight	normai, bold(太字), bolder, lighter 100～900の100単位の数値(900が太い)
文字の字体	font-style	normal, italic(イタリック体), oblique(斜体)
文字装飾	font-decoration	none, underline, overline, line-through
文字の色背景色	color background-color	#rrggbb　→RGBの値を16進数2桁で記述 #rgb　→RGBの値を16進数1桁で記述 rgb(nnn,nnn,nnn) → nnnは0-255の10進数
背景画像	background-image	url(画像ファイル名)
背景画像の貼り方	background-repeat	repeat-x(横一行), repeat-y(縦一列) repeat, no-repeat
文字の装飾	text-decoration	underline, overline,line-through, blink
文字間	letter-spacing	em,pxなどの長さの数値(例:0.5em)*5
行の配置	text-align*4	left(左詰め),right(右詰め),center(中央揃え),justify(均等割り付け)
行送り	line-height	em,pxなどの長さの数値(例:0.5em)*5 フォントサイズに対する倍率(例:200%)
先頭の1行めの字下げ	text-indent*4	em,pxなどの長さの数値(例:2em)*5
要素外側の余白	margin-top margin-bottom margin-left margin-right	0は余白なし(指定しないと0とみなす) em,pxなどの長さの数値(例:2em)*5
要素内側の余白	padding-top padding-bottom padding-left padding-right	0は余白なし(指定しないと0とみなす) em,pxなどの長さの数値(例:2em)*5
要素境界線	border-style border-width border-color	none(線無し), dotted(点線), dashed(粗い点線), solid(実線), double(二重線), groove(谷線), ridge(山線), inset(内線), outset(外線) thin, medium, thick, あるいはem,pxなどの長さの数値色の指定

*1: ポイント: 1/72インチ(1インチ=2.54cm)
*2: 絶対サイズ: xx-small,x-small,small,medium,large,x-large,xx-large
*3: 相対サイズ: larger,smaller
*4: ブロックレベル要素のみに適用
*5: 長さの数値: px(ピクセル), in(インチ), cm(センチメートル), pt(ポイント)*1等の単位で表した数値(例;10pt)、フォント高さ単位(em)の数値(例:3em)

style属性

<STYLE>タグはページ全体に対しての指定でしたが、個々の要素(タグ)にスタイル定義を指定するには、次のようにstyle属性を使います。

<要素名 style=" スタイル定義 ; スタイル定義 ; ..... ">

style属性はほとんどのタグに指定できます。次は、強調タグ<EM>にフォントの大きさを指定した例です。

クラス指定

ページ中のいくつかの部分だけのスタイルを変えたい時、style属性で個々に指定するのは厄介です。そのような場合、クラス指定を使って、スタイル定義を適用する対象を区別することができます。
まず、クラス名とスタイルの内容を定義します。「スタイル定義」の節で説明したスタイル定義のセレクタ部分には、要素名を書きました。クラス指定では、その代わりに「クラス名」をピリオドに続いて指定します。
　次はspecialというクラス名で、スタイル定義をした例です。<STYLE>タグの中に、このスタイル定義を指定します。

こうすると、specialというクラス名を指定した要素にだけ、このスタイル属性が反映します。要素にクラス名を指定するのはclass属性を使います。例えば、ページ内のいくつかのパラグラフだけの文字の色を緑にしたい時、色を変更するパラグラフの<P>タグを次のようにします。

別ファイルに記述したスタイルの組み込み

スタイルシートを用いたスタイルの指定を別ファイルに書いておき、それを使うこともできます。こうすれば、複数のHTMLファイルで共通のスタイルを使うことが容易になります。
まず、そのHTMLファイルに対してどのスタイルシーます。CSSを用いる場合は、HEADタグ内に以下のようなMETAタグを記述します。

そして、LINKタグを用いて、別ファイル〔例えば、test.css)に記述したスタイルシートと連携します。

スタイルシートの基本

スタイル定義

<STYLE>タグ

style属性

クラス指定

別ファイルに記述したスタイルの組み込み