記述の基本 指定方法 指定を分ける クラスの指定 idの指定
CSSとは、Cascading Style Sheetsの略で、html文書を装飾し、体裁を整えるためのものです。
（htmlでは文書構造のみを指定し、見栄えに関する部分はCSSで指定するというのが基本的な考え方になります。）
開始タグのオプションでも体裁も関する指定ができますが、CSSを利用すると、以下のような利点があります。
オプションを利用すると、例えば<ol>では箇条書き記号の種類しか指定できず、文字色などその他の効果を追加したければ別のタグを利用する必要がありますが、CSSでは文字の大きさや色、行間なども一度に指定できます。
オプション指定では開始タグごとにオプションをつける必要がありますが、CSSを使えば一度の指定で複数の要素に効果をつけることができます。
種類の異なる要素に、同じ効果を指定することも可能です。
サイトを見る人の環境によっては、余分な装飾がついているために表示に問題が生じることもあります。また、余分な装飾を排除して閲覧したい人もいます。そのような場合の利便性を考えると、文書構造の指定以外では任意に指定を解除できるCSSを用いた方がよい、ということになります。
CSSを指定するには、以下の3種類の方法があります。
ここでは、ヘッダ部分に指定する方法を紹介します。
上に表示しているように、CSSの記述位置は<head>と</head>の間になります。
（headタグに挟まれた範囲であれば、titleを指定した後でなくても構いません。）
また、CSSを記述する前後には、必ず以下の文章を入れます。
<style type="text/css">←ここからCSSの指定が始まることを宣言します
<!--←閲覧側がCSSに対応していない場合に、指示を読み込ませないようにするための指定です
指定する前には、以上の2文を記述します。また、指定が終了したら
-->←指示を読み込ませないようにするための指定を終了します
</style>←CSSの指定終了
という2文を記述します。<!--と-->の間には、複数のCSSを指定することができます。
CSSの指定例を以下に示します。
（指定は全て半角英数文字で記述します。改行は入れても入れなくても構いません。）
p {
color: navy;
font-size: 120%;
}
これは、ページにあるすべての<p>から</p>で囲まれた範囲に対し、文字の色を紺色に、文字の大きさを他の字より120%大きくする、という指示になっています。
この指定を分解すると、
セレクタ {
宣言 宣言 }
で構成されています。それぞれ、以下の表で示すような役割を持ちます。
| セレクタ | CSSを利用して効果を追加したい要素（あるいはクラス名・id名（後述））をここで指定します。 （この部分を「セレクタ」といいます。） 複数の要素に対して同じ効果を追加したい場合は、p,div,olというように , (カンマ)で指定したい要素をつなげます。 | |
| { } | CSSの内容を記述する部分を「宣言」といいます。 { } で挟まれた宣言が、 { の前に記述したセレクタ（要素またはクラス、id）に指定されます。 （ { 宣言 } をまとめて「宣言ブロック」といいます。） | |
| 宣言 | 宣言は、属性:値;で構成されています。 { } にはいくつでも宣言を挟むことができます。宣言と宣言の間にスペースや改行を入れても、入れなくても構いません。また ,（カンマ）のような区切り記号を入れる必要はありません。 | |
| 属性 | どの種類の効果をどのような内容に指定するか、その種類の部分（たとえば「色を赤にする」の「色」、「線を点線にする」の「線」）を指定します。 属性の後には必ず : （コロン）がつきます。コロンの後のスペースはあってもなくても構いません。 | |
| 値 | 効果の内容の部分（たとえば「色を赤にする」の「赤にする」、「線を点線にする」の「点線にする」）を指定します。 値の後には必ず ; （セミコロン）がつきます。 | |
なお、ある要素にcssを指定すると一箇所だけでなく、そのページ内で使用されている同じ種類のタグ全て
（たとえばpに指定したら、そのページ内にある全ての<p></p>）
に囲まれた範囲の文字が修飾されるので注意してください。
「セレクタ」の項でも説明しましたが、２の「異なる要素に同じCSSの効果を追加したい」場合には、セレクタに指定する複数の要素を，（カンマ）でつなぐ方法があります。
div,p {
color: navy;
font-size: 120%;
}
上の例の場合、ページにあるすべての<div>から</div>および<p>から</p>で囲まれた範囲の両方に対し、文字の色を紺色に、文字の大きさを他の字より120%大きくする、という指示になります。
ただし、この方法で複数の要素に同じ指定を追加することはできますが、ページ内の同じ要素（例えばp）の中で指定を追加する箇所と追加しない箇所とをわけることはできません。
同じ要素でもCSSの指定を追加する・しないを分けたい場合には、セレクタに要素の代わりにクラス名またはid名を指定します。
クラス名、id名ともに、半角英数字で、他のクラス名やid名とは異なる名前をつける必要があります。
１つのCSS指定（宣言ブロック）を追加したい箇所が複数ある時に利用するのがクラスです。
CSSの指定に他の指定と区別するための名前（クラス名）をつけ、その名前をセレクタに記述します。
開始タグにクラス属性を記述することで、記述したタグに挟まれた範囲にCSSで指定した効果が追加されます。
同じクラスをページ内で何回でも指定できます。また異なる要素に同じクラスを指定することもできます。
１つのCSS指定（宣言ブロック）を１箇所にのみ指定できるのがidです。
CSSの指定に他の指定と区別するための名前（id名）をつけ、その名前をセレクタに記述します。
開始タグにid属性を記述することで、記述したタグに挟まれた範囲にCSSで指定した効果が追加されます。
同じidは１ページ内に1度しか指定できません。
|
.sel { color: navy; font-size: 120%; } |
{ の前のセレクタ部分に書かれた、.selをクラスセレクタといいます。 この例では、クラス名はselです。 （クラス名は半角英数文字で記述） クラスを指定するときは、クラス名の前に . (ピリオド)をつけて記述します。 |
| このCSSを使用したい要素の開始タグには、↓のように記述します。 | |
| <ol class="sel"> <li> <li> </ol> <p class="sel"> </p> |
このように、開始タグのオプションとして class="指定したいCSSにつけたクラス名" と記述します。 オプションで指定するクラス名にピリオドはつけません。 同じ要素でもclassオプションをつければCSSの効果がつき、classを指定しない要素ではCSSの効果がつかないということになります。 また、異なる要素でも同じclassオプションがついていれば、同じCSSの効果がつくことになります。 |
|
#box { color: navy; font-size: 120%; } |
{ の前のセレクタ部分に書かれた、#boxをidセレクタといいます。 この例では、id名はboxです。 （id名は半角英数文字で記述） idを指定するときは、id名の前に # をつけて記述します。 |
| このCSSを使用したい要素の開始タグには、↓のように記述します。 | |
|
<p id="box">
</p> |
このように、開始タグのオプションとして id="指定したいCSSにつけたid名" と記述します。 オプションで指定するid名に#はつけません。 同じ要素でもidオプションをつければCSSの効果がつき、idを指定しない要素ではCSSの効果がつかないということになります。 idオプションは1ページ内に一度しか指定できない（1ページ内に同じidを繰り返して指定できない）ので、注意してください。 |