CSSファイルで見た目を劇的に変化させよう！
料理の味は見た目で決まるわけじゃないですよね。
一見、全然美味しくなさそうな料理でも食べてみたら「う〜ん、旨い！」なんてこともしばしば！
その逆も然りですね。でも食べにくかったり、あまりに見た目が悪いとどんなに美味しくても、味見もしてもらえません。
HTMLの美味しさをCSSが上手に演出するってことですかな！
1.CSSファイルの役割を実感しよう！
CSSの本名はCascading Style Sheetといいます。
２種類のファイル のページでもいいましたが、CSSは、HTMLで記された文章や画像の配置や装飾を担当しています。
このようなことを担当しているファイルをスタイルシートといい、スタイルシートにも何種類かあるそうです。
CSSもそのうちの１つなのですが、世の中の多くのブラウザ（インターネットを表示する画面）はCSSに対応しているので、このホームページでは、スタイルシート＝＞CSSとして書いておりますです・・・
「百聞は一見にしかず」なのでまず、サンプルページ を見てくださいな。
どこかで読んだ文章が並んでますね。
それぞれのソースを見ても分かりますが、（ソースを見るには画面の適当なところで「右クリック」→「ソースの表示」でしたよね。）実は、サンプルページの画面はあなたが今読んでいるこのページ（「CSSファイルの役割」）のHTMLファイルhead部にある
<link rel=stylesheet href="style.css" type="text/css">
の二つのタグをを取っちゃっただけなんです。
このタグ、なんだか分かりますよね！前ページで出てきましたもんね！
つまり、スタイルシートを使わずに画面表示させてみたんです。
ここで感じて欲しいことは、
同じHTMLファイル（内容--コンテンツ）を作ってもCSSというお化粧によって見た目は、全然変わってくる
ということなんです。
検索エンジン的にいうとサンプル画面のページもこのページ「CSSファイルの役割」のページも書いてある文章、その位置関係、それぞれの言葉や文章の重要度の割り当ては、全く同じなので、両者とも同じように、認識します。（たぶん・・・）
でも、人がそれを見たときは、かなり違って見えますよね！
繰り返しになりますが、このページとサンプルページのHTMLファイルは同じです。つまり内容（コンテンツ）は全く変わらないのです。
このページとサンプルページの違いがスタイルシートがやっていることなんです。
スタイルシートってすごいですね！
HTMLファイルとCSSファイルの役割の違い、分かりましたね！
2.フォルダを作って画像をしまっておこう！
2-1.画像の取り込み方法
スタイルシートを作る前にちょっと準備をしておきましょうか。
下の画像が気になりますが、その前に「homepage」フォルダの中に「img」という名前のフォルダを作って下さい。
やり方は、「index.html」や「css.style」を作った時と同じです。・・・というか「homepage」フォルダを「マイドキュメント」（ちなみにマイドキュメントもMy Documentsという立派なフォルダです。）の中に作ったあなたにならもう簡単な作業ですね！
もし、忘れちゃった人がいたらそぉ〜と 「フォルダを作ろう」のページ を読みましょう。
そして、さっきから気になっていたピンク丸、白丸の変な画像を「img」フォルダに取り込みます。
これ、やりかたまちがえないでくださいねっ！！
上の画像にカーソルを持っていって右クリック→「名前を付けて画像を保存」をクリック
保存する場所は「マイドキュメント」の中の「homepage」の中の「img」なので、保存する場所(I)を「img」とします。
（やり方：例）下の画面のように「マイピクチャ」が出てきた場合
「マイピクチャ」は「マイドキュメント」の中にあるので、上矢印が書いてある小さいフォルダの絵（下画面で言うと「１つ上のフォルダへ」と書いてある上の小さなフォルダの絵（左側）です。）をクリックすると保存する場所(I)がマイドキュメントになります。
するとその下にマイドキュメントの中にあるフォルダやファイルが表示されます。当然先ほど作った「homepage」もここに表示されているはずです。
その「homepage」をダブルクリック→「img」をダブルクリック
今回は、ファイル名は「kabe03」のままでいいので、このまま右下「保存」をクリック
これで、画像を取り込むことが出来ました。よかったよかった・・・
ちなみに「画像」もファイルの一種です。
この場合「kabe03」という名前の「gif」という種類の画像ファイルということになります。
画像ファイルには「gif」「jpg」「png」「bmp」・・・まだまだ色々ありますが、そのうちの一種です。
2-2.画像の取り込み時の注意！
これは、結構大事なことなので、しっかり読んで覚えておいてくださいね！
2-2-1
画像を取り込むときは、上のように対象の画像の上で右クリックのあと
名前を付けて画像を保存
で自分のフォルダーの中に取り込んでそこから呼び出してください。
2-2-2
あなたも今後、すばらしいホームページを作っていき、その時色々な画像を探して、「素材屋さん」を見てまわることと思います。
「素材」を使用させてもらうときは、必ず注意書きを読みましょう。
それぞれの素材屋さんごとにルールが違うのでしっかり読んでルールを守って使用させてもらいましょう。
このホームページの画像も素材屋さんのものを使わせていただいています。
私が指定したもの以外は、このサイトの素材を持ち帰ることは禁止いたします。
ルールを守ってこその楽しくてすばらしいホームページです。よろしくお願いしますね！
※尚、このホームページで使用させていただいた色々な素材は、リンクページ の「お世話になったサイト様」でご紹介しております。
それでは、下の画像３点を先ほどの方法で、あなたの「img」フォルダに持ち帰ってください！
名前はそのままで変更しないで使います。
2-3.サンプル画像
下の３点のサンプル画像をお持ち帰り下さい。
