CSS とは
- CSS とは Cascading Style Sheet の頭文字をとったもの
- カスケードしたスタイルとは，どのように HTML 要素を表示するか定めるもの
- HTML 3.2 で問題となった点を解決するために開発された。
- html ファイルとは別のファイルに書いて，保存される。
- 別ファイルに書く事で，複数の html ファイルを同時にコントロールできる。
- 通常 .css という拡張子がついたファイルに格納される
CSS のデモ
CSS のメリット
HTML ファイルは，文書の内容を記述するものであり，その中に文書を フォーマットするためのタグを埋め込むのは良くないとされる。
- 文書の内容は html に記述し
- 文書のフォーマットは CSS に記述する
<h1>例えばこれは h1 です</h1>
<p>これはパラグラフです</p>
のようにである。これが<color>タグのようにhtml文書中に 勝手に埋め込めるようになってしまった html 3.2 では，大きな Web サイトを作る設計者を困らせることになった。 <color>タグや<font>タグが文書中に散在していると 修正に時間がかかってしまうことになる。この場合，css ファイルで 定義し，css ファイルの定義を変えることで複数の html 文書を 一遍に変更できるからである。
これが html 4.0 が開発された経緯である。html 4.0 ではフォーマット に関連するタグはすべて css で定義し，文章の構造に関わる部分だけを html に残すことを推奨している。
今日では，すべてのブラウザが css に対応している。
CSS の文法
CSS の基本構造は次のとおり
ここで，h1の部分を「セレクタ」と呼ぶ。 そして{}の中にそのセレクタで宣言したい内容を記述する。上の例では color:blueと font-size:24pxとが宣言文である。 宣言文は必ずセミコロン; で終わる必要がある。
宣言文はコロン:によって前を「プロパティ」後ろを「値」という。
CSS の例
演習
上の例を試してみてください。
CSS のコメント
html 文中では，<!-- と --> とで囲まれた部分がコメントとなった。 CSS では /* で始まり */ で終わる部分がコメントとなる。コメントはネスト（入れ子）にはできない。
p {
text-align:cener;
/*ここにもコメントを入れてみます */
color: black;
background-color: gray;
}
ID セレクタとクラスセレクタ
html タグの要素を修飾するのにくわえて，自分自身で "id" と "class" という セレクタを定義できる。
ID セレクタ
CSS は HTML の要素のスタイル（見栄え）を設定するために用いられるが， CSS では自分で指定した "id" と "class" とを指定できる。 id セレクタは，一度しか使われないようなスタイル用に使用される ことが多い。id セレクタを指定するために "#" が使われる。
text-align:center;
color:red;
}
試してみてください。ただし id の名前を数字で始めてはいけません。 Firefox ではエラーになるようです。
クラスセレクタ
クラスセレクタは，要素のスタイルを指定するために用いられます。 "id" セレクタと違って，クラスセレクタは様々な要素に適用されます。 クラスセレクタは始めに "." が置かれます。
text-align:center;
}
さらに，特定の html タグだけに有効なクラスセレクタを定義することもできます。
background
CSS の background プロパティには，そのページの背景の効果を指定するために使われる。 使えるプロパティは以下のとおり
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
background-color プロパティはある要素の背景色を指定するために用いられる。 例えば，
などとすれば，<body>パーツのすべての背景色を指定したことになる。
background-color は次の3とおりの方法で指定できる
- 名前：pink とか red とか
- RGB： "RGB(255,255,0)" のように指定する
- 16進数：#ffff00 など
background-image
background-image プロパティでは，背景の画像が指定できる。デフォルトでは表示されているページのサイズより，指定した画像のサイズが小さければ繰り返し画像が表示される。