スタイルシート（CSS）基礎講座
スタイルシートって何だろう？
スタイルシートでどこまで出来る？
まずはこちらのサイトをご覧ください。私はSOHOで中小企業のウェブサイトを制作してますのでそちらのサイトなのですが、スタイルシートでデザインしています。
もしスタイルシートを使わなかったらどうなるでしょう？こちらのページをご覧ください。（リンク先のページは同じページに戻るようにしています。）あれ？HTML基礎講座で最終的に出来上がったページとあまり変わりありませんね。
うそだぁ」と思った方、こちらのページとこちらのページの「ソースの表示」をしてみてください。ほら、リンク先のアドレスを除けばほとんど同じでしょう。
唯一違うのが、HTMLソースの17行目あたりを良く見ると、
<link href="style/wdstyle.css" rel="stylesheet" type="text/css">
こんなことが書かれているものとそうでないものと…
そうです。ここでスタイルシートを指定しています。ここでは、「wdstyle.css」というスタイルシートファイルをリンクさせて使っていることがわかります。この違いだけなのです。
「ねぇ、ちょっと…見たことない文字が入ってるんだけど」と気づいた方もいらっしゃるでしょう。「class="box"」とかって書かれていますね。そうなんです。この記述が重要なんです。あとで説明しますからこの「class="～～"」というのを頭の隅に残しておいてくださいね。
スタイルシートを使うことによってこのようにデザインすることが可能なのです。
どうしてHTMLではなくCSSでデザインするの？
ページのデザインはHTMLのみでも出来ますが、なぜわざわざスタイルシート（CSS）を使うのでしょう？それのわけとして以下の点が上げられます。
- 文法上はCSSを使うことが望ましいとされている。
- 複数ページの制作が容易に統一できる。
- HTMLがシンプルで閲覧者に優しい。
- 検索エンジンにもやさしい。
- デザインのリニューアルが簡単。
- HTMLでは不可能なデザインが可能。
などいくつものメリットがあります。
スタイルシート(CSS)ファイルってどんなの？
まずはスタイルシートがどんな風に書かれているか見てみましょう。 うーん、さっぱりわかりませんねぇ。とりあえずこんな風に書かれてるんだということだけ覚えておいてください。それではひとつずつ解説していきましょう。 それでは次のページで、まずスタイルシートのファイルを作りましょう。
