前回大まかなページ作成について書きました。
------------------------------
<html>
<head>
<title>私のサイト</title>
</head>
<body>
<h1>大見出しタグ</h1>
<p><img src="test.jpg" width="64" height="64" alt="test">段落のテスト</p>
</body>
</html>
------------------------------
ここに背景の色や文字の色や大きさを変える記述をするのですが、現在は文書構造をHTMLに装飾をCSSと分けて書きます。
これはSEO対策（検索エンジン最適化）やアクセシビリティを考えた作りとなっています。
必要な文書をスッキリとHTMLに書くことで、目が不自由な方の為の文章を読んでくれる音声ブラウザであったり、一つのHTMLファイル内で有効な文字列（キーワード）をチェックするSEO対策には有利なのです。
※色々な意味合いがありますが、ここではわかりやすい説明として記述しています。
ここから記述していく際に，ファイル管理をしやすくする為にも画像用の（imageフォルダ)とスタイルシート用の（cssフォルダ）を作り置き場所を分けていきます。
実験的に先ずはペイントでもいいですから、一つの画像を作って見ましょう。
ペイントで小さなキャンバスを作りペンやブラシで何でも良いので書いて下さい。
出来上がったファイルは一つフォルダを作成し、その中に「image」フォルダを作成し、ファイル名「test.jpg」で保存しましょう。
次に同じフォルダ内に「css」というフォルダも作りましょう。
以下のようになっていればＯＫです。
フォルダ内に「image」と「css」フォルダがある状態です
この「CSS」フォルダ内に装飾用のスタイルシートを書いていきます。
-------------------------------------------
body {
background-color: #f00;
}
-------------------------------------------
まだなんだかわからないと思いますが、とりあえずHTMLと同じようにメモ帳にコピーし、拡張子「css」で保存します。
ファイル名は「style.css」とし「css」フォルダ内に保存します。
まだ、これだけでは「test.html」に変化はありません。
このHTMLファイルにCSSで記述したものをリンクさせなければなりません。
直接、CSSをHTMLに記述させる方法もありますが、これからのホームページ制作は完全に分けて作るのがベストです。
先ほどのHTMLに次の2行を入力します。
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
入力したものはこのようになります。
------------------------------
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>私のサイト</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<h1>大見出しタグ</h1>
<p><img src="test.jpg" width="64" height="64" alt="test">段落のテスト</p>
</body>
</html>
------------------------------
上書き保存してブラウザで見てみましょう。
背景色が真っ赤になれば成功です。目にキツいのですぐに閉じてしまって下さい。
変化がわかりやすいように赤（＃F00）を指定しましたが、こんな目に悪いサイトでは誰もきませんね。
CSSファイルの記述をもう一度メモ帳で開き、変えてみましょう。
-------------------------------------------
body {
background-color: #999;
}
-------------------------------------------
さっきは赤でしたが、これはどう変わるでしょうか？
上書き保存してブラウザで見ると今度はグレーになっているはずです。
このように文章であるHTMLに手を加えずに装飾のみを変えることができるのがスタイルシート（css）の特徴です。
２行足したうちの下側が、
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
CSSへのリンクとなっており、href="css/style.css" CSSフォルダ内のｓｔｙｌｅ．ｃｓｓを呼び込んでいます。
上の行はメタタグと言って、「ＣＳＳを使いますよ」といった宣言になっています。
記述しなくとも機能はしますが、正しい記述をする為にはこの二つは対で覚えておきましょう。