スタイルシートについて

CSS(Cascading Style Sheets)とはWebページのデザインを設定するための技術でHTMLと切り離してデザインできることでWeb上で広く使われています。 HTML 文書にスタイルシートを適用させ様々なスタイルを生み出すことが可能です。 CSS はスタイルシートの実装の一つですが一番普及しているスタイルシートなので現在、単にスタイルシートと言うとCSSをさすことが多いです。
とりあえず本校ではCSSはHTMLで作ったページをもっと見栄え良く外装をさらにスマートに見させるコンピュータープログラミング言語だと考えてください。スタイルシートを活用することで様々な可能性が広がります。例えばデザイン、見栄えを一括で指定できることや、ブラウザによっては自分の好きなスタイルシートファイルを適用することができること。 大きな字で読みたい人も（これは文字の大きさでもできますが…）、自分の好みのスタイルを適用することができます。またHTMLと分ければ文書容量が格段に小さくなるなど他にもスタイルシートを使うことでのメリットは大きいです。デメリットは使っているブラウザーによって動作が異なることがあることぐらいでしょうか・・。

スタイルシートの設定

まずスタイルシートを実際に記述するには次の３種類の方法があります。
1. style属性に記述する
2. head要素内にstyleタグを作成し、そこに記述する。
3. head要素内にlink要素で外部スタイルシートファイルを設定する
人によって、いろいろとやり方はあるとは思いますが、ここでは３番の方法をお勧めします。具体的にはHTMLで書いたhead要素の中にリンクを張り、外部でスタイルシートのファイルを作るやり方です。そのほうが構造と見栄えを分離すると言う意味では理に適ったやり方だと思います。スタイルを適用したい HTML ファイルとは別に CSS ファイルを１つ作成して、そのシートに複数のページからリンクを張ります。CSSのファイルは必ずHTMLのフォルダと同じフォルダ内にセーブしてください。

スタイルシートを作る

では実際にスタイルシートを作ってみましょう。サンプルとソースを実際に見ながらそれを基礎に学んで行きます。
まずスタイルシートHTMLと同じくNotepad（メモ帳）で作っていきます。PCを使っている方は【スタート】→【オールプログラム】→【アクセサリー】の中からノートパッドを起動させます。作成した外部の CSS ファイルには、<style> タグやコメント部分は必要ありません。設定したいタグとタグに対するプロパティとその値を記述するだけです。外部 CSS ファイルは、拡張子（.css）で保存します。この保存形式で、ブラウザが CSS ファイルだということを認識します。

CSS ファイルが出来たら、適用したい HTML ファイルからリンクを張ります。先にリンクを張って実際に、どういった効果があるのかをチェックしながら作っていくとわかりやすいです。
リンクには <link> タグを使います。外部 CSS ファイルの名前を「css_sample.css 」としてみましょう。そしてHTMLのｈeadの部分に外部に作ってあるスタイルシートへのリンクを張ります。以下のソースの赤い文字の部分がリンクとなります。

<html>
<head>
<title>HP作成大学</title>
<link rel="stylesheet" href=" css_sample.css "　type="text/css">
</head>
<body>
<div>コンテンツ</div>
</body>
</html>

では次のページから実際にスタイルシートの設定をしてみましょう。　　　　　　　　　　　　　　次へ進む