CSSとはCascading Style Sheetsの略で、HTML/XHTML文書に対して見栄え（レイアウトやデザイン、書式などの見た目）を指定する為の言語です。
従来、HTMLは文書の構造や意味を定義する為の言語で、見栄えや体裁などの見た目の事については深く定義されていませんでした。しかしWebの発展と共にWebページの装飾性が要求され、次第に「文書構造を定義する部分」と「見栄えを定義する部分」のどちらもがHTMLで指定されるようになりました。
これはHTMLの概念から大きく掛け離れた仕様であった為、HTML4.01が勧告された際に、「文書構造」と「見栄え」を分離し、文書構造の定義は従来通りHTMLで、見栄えの指定は新たに導入したCSSで定義する様、仕様が改められました。
2010年現在、主に使用されているCSSのバージョンはCSS2となります。
スタイルシートの基本書式は下記の通りとなります。
セレクタ名の後に
{ （中括弧） } を記述し、中括弧の間に 「プロパティ
: 値」 を記述します。プロパティと値は「 : （コロン）」で区切って記述します。また値の後ろには必ず「 ; （セミコロン）」 を記述します。
CSSは全て半角英数小文字にて記述してください。
セレクタ { プロパティ : 値 ; }
セレクタとはスタイルを適用させる対象です。
プロパティと値には、セレクタに対してどのような指定をするか、指定するスタイルの種類とその具体的な値を記述します。
スタイルシートは「セレクタのプロパティを値にする」という形式でHTML文書に組み込んで行きます。
CSSの記述は書式が守られていれば自由に改行や半角スペースを挿入する事が出来ます。ただし命令の途中で改行や半角スペースを挿入する事は出来ません。
一般的な記述方法として下記の通り、中括弧で改行をかけプロパティが読みやすいように記述します。
セレクタ { [改行]
プロパティ : 値 ; [改行]
}
また、同一セレクタに対してプロパティは複数指定する事が可能です。プロパティを複数設定する場合、最後のプロパティの 「 ; （セミコロン）」は省略する事が出来ます。
※セミコロンが付いていても問題ありません。
セレクタ {
プロパティ : 値 ;
プロパティ : 値 ;
プロパティ : 値
}
セレクタと { （中括弧）の間や、プロパティと値の間や前後には、空白（半角スペース・tab・改行）を挿入する事が出来ます。
※ただし全角スペースは使用出来ません。
セレクタ [半角スペース] {
[半角スペース] もしくは [tab] プロパティ [半角スペース] : [半角スペース] 値 [半角スペース] ;
}
セレクタ名にHTML要素名（HTMLタグ）を指定します。セレクタ名に指定したHTML要素全てにスタイルを適用する基本的なセレクタです。
HTML要素に基本となるスタイルを一括指定する場合などに使用します。
HTML要素名 {
プロパティ : 値 ;
}
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>段落1</p>
<p>段落2</p>
h1 {
color:#FF0000;
}
h2 {
color:#00FF00;
}
h3 {
color:#0000FF;
}
p {
color:#FFCC00;
}
セレクタ名に「*（アスタリスク）」を指定すると、全ての要素に指定したスタイルを適用します。
* {
プロパティ : 値 ;
}
特定の要素にのみスタイルを適用したい場合はクラスセレクタを使用します。
クラスセレクタ名の記述は、先頭に「.（ピリオド）」を記述し、続いて任意のクラス名を定義します。
クラスセレクタは汎用セレクタであり、複数の要素にクラスを適用する事が出来ます。
クラス名を定義する際の注意
.クラス名 {
プロパティ : 値 ;
}
HTMLにクラスを適用するには、クラスを適用したいHTML要素に「class属性」を指定し、class属性の値に「クラス名」を指定します。class属性の値を指定する際のクラス名には「.（ピリオド）」の記述は不要です。
<HTML要素名 class="クラス名">表示要素</HTML要素名>
<p>段落1</p>
<p>段落2</p>
<p class="iro01">段落3</p>
<p>段落4</p>
p {
color:#FF0000;
}
.iro01 {
color:#0066CC;
}
特定の要素にのみスタイルを適用したい場合はIDセレクタを使用します。
ID名の記述は、先頭に「#（シャープ）」を記述し、続いて任意のID名を定義します。
IDセレクタは「唯一のものとして特定する為の識別子」である為、同一のHTML/XHTML文書内で同じIDを複数の要素に指定する事は出来ません。※1文書中に一度しか使用出来ない。
ID名を定義する際の注意
#ID名 {
プロパティ : 値 ;
}
HTMLにIDを適用するには、IDを適用したいHTML要素に「id属性」を指定し、id属性の値に「ID名」を指定します。id属性の値を指定する際のクラス名には「#（シャープ）」の記述は不要です。
<HTML要素名 id="ID名">表示要素</HTML要素名>
<p>段落1</p>
<p>段落2</p>
<p id="iro01">段落3</p>
<p>段落4</p>
p {
color:#FF0000;
}
#iro01 {
color:#0066CC;
}
Copyright momo 2006 All rights reserved.