CSS講座
CSSって？
HTML講座をマジメにやってきた人ならば、実感することでしょうが、HTMLのみではカッコイイページの作成は出来ません。HTMLは、あくまでもただのテキスト文章にタグを付けて、文章の意味を明確にしてあげるだけのものです。
ということで、デザイン・レイアウトなどの見た目の部分は、CSS （Cascading Style Sheets）というもので制御してあげる必要があります。CSSは、スタイルシートと呼ばれることもあります。ここでは、そのCSSを解説していきたいと思います。
CSS講座は、HTML講座の内容が（完全でなくても）分かっているという前提で書かれています。まずは、HTML講座にも目を通しておいてくださいね。
CSSのコンセプト
まあ、むかし話だと思って読んでください。このサイトのHTML講座のみをやってきた人が読むと、混乱する原因になるかもしれませんし・・・
元々、ホームページを作成するのには、HTMLしかありませんでした。そのため、フォントの大きさや色は、タグで指定していたのです。例えば、文字を赤い太字で表示させるには、
<b><font color="red">昔の「文字を赤にして、太字にする方法」</font></b>
のように指定していました。
また、レイアウトでは、画面の全体を大きなテーブル（表）にしてしまい、画面をいくつものセルに分割して、レイアウトを行うという手法がとられていました。これを、テーブルレイアウトと呼びます。
それに対して、これから学んでいくレイアウト方法をCSSレイアウトと呼んでいくことにします。
⇒
CSSのコンセプトは文章構造と見た目の分離です。今までHTMLだけで行ってきたページのデザインに関する指定は全て、CSSで指定することになります。
見た目を分離することによって生まれるメリットは、
- HTML文章（ソース）がスッキリする
- 複数ページのデザイン管理が楽になる
- デザインに関する細かな指定ができるようになる
- アクセシビリティーの向上に繋がる
こんなところでしょうか。CSSを理解していくうちに、これらの事は実感できるかと思います。
CSSの基礎
HTML講座と最初にやることは同じです。下のソースコードをメモ帳（ez-HTMLなどでも可）に貼り付けて、test.htmlという名前で保存してください。やり方を忘れてしまったという人は、HTMLの基礎で行った手順を思い出してください。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr" >
<head>
<title></title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
</body>
</html>
次は、下のソースコードをtest.cssという名前で、先ほどtest.htmlを保存したのと同じ場所に保存してください。
p { color: red; }
次に、test.htmlをメモ帳で開き、bodyタグの内側に、pタグで囲んだ好きな文章を書いて、ブラウザに表示してみてください。
赤い字で表示されました・・・よね？
次は、test.cssの中身を下にのように書き換えてみてください。
body { background-color: gray; }
p { color: white; }
背景全体が灰色で、pタグで囲んだ文字は白く表示されると思います。
では、次はどうなるでしょうか？
body { background-color: gray; }
p { color: white; font-size: 200%; font-weight: bold; }
背景は灰色で、pタグで囲んだ文字は白く、大きな太字で表示されます。
なんとなく、お分かりいただけたでしょうか？ちなみに、サンプル３はこのように書くことも出来ます。
body {
background-color: gray;
}
p {
font-weight: bold;
font-size: 200%;
color: white;
}
多分、こちらの方が見やすいでしょう。直感的に、どこで改行をするのはマズイか判断できるでしょう。また、{ }の間にあるヤツ（？）は、順番を入れ替えてもOKです。
