※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 1.CSSって何？
CSSとはCascading Style Sheetsの頭文字を取ったものです。
初期の頃のHTMLは文章の構造と文字装飾がタグで表現されていました。
ところが世にさまざまなブラウザが出てくると、その動作環境がまちまちで、表示されるイメージが違ったり、レイアウトが崩れるなどしていた。
そこで、W3Cがページの構造の部分と、レイアウトや装飾の部分を分離するように勧告した。
HTMLではページや文章の構造を、CSSでレイアウトや装飾をし、各ブラウザの違いをできるだけ無くすような方向で動いている。
■ CSSの役割と動き
例えば、次のサンプルはHTMLの記述とその表示です。
■ サンプル-1- ■ 記述例
-
<dl> <dt>分類タイトル</dt> <dd>説明文の記述</dd> </dl> <dl> <dt>分類タイトル</dt> <dd>説明文の記述</dd> </dl>
- ■ 表示サンプル
-
- 分類タイトル
- 説明文の記述
- 分類タイトル
- 説明文の記述
これに次のようなCSSを追記すると．．
dl{ background-color: #cccccc; }
dt{ font-weight: bold; }
dd{ color: #339933; }
■ サンプル-2- ■ 記述例
-
<dl> <dt>分類タイトル</dt> <dd>説明文の記述</dd> </dl> <dl> <dt>分類タイトル</dt> <dd>説明文の記述</dd> </dl>
- ■ 表示サンプル
-
- 分類タイトル
- 説明文の記述
- 分類タイトル
- 説明文の記述
となります。
似たような形式が続く場合は、HTMLソース（タグ）を変更することなく、CSSの設定だけでデザインを自由に変更する事ができます。
大事なのは、
です。