スタイルシートについて
スタイルシート（CSS）とは、ひとことで表現するなら「Webページのレイアウトを定義する技術」と言えるでしょう。
もともと、表現方法を指定するためのものではなかったそうですが Webの発展により、色やフォントサイズの指定、レイアウトのためのテーブルの利用、文章の体裁やデザイン（見栄え）などを定義するようになっていったようです。
簡単に言うと、スタイルシートを使うことにより1つ1つタグで指示しなければならないところを部分的にかえたり、ページ全体に指定したり、全てのページに適用したりすることができるようになります。
例えば、季節ごとに壁紙を変えたり、文字の色や大きさを変えたりするのに、本来なら全てのページをタグなどで指定し直さなければならないのですが、スタイルシートではこれらを簡単に変更することができます。ページ数が増えれば増えるほど、必要となるでしょう。
方法はそのページだけに適用する場合は<head>〜</head>の中に記述したり、すべてのページに適用する場合は外部ファイルを作って読み込ませるなどの方法があります。
また、スタイルシートを使用する場合はHTMLの知識が必要となるので、HTMLでホームページを作れるようになってからのほうが理解しやすいでしょう。「めんどくさい」という方は、決まりごとに注意すればコピー & ペーストで十分作成できます。
スタイルシートの書き方
| 宣言 ┌──────────────┐ | |||
| h1 | { color | : | green } |
| └─┘ セレクタ | └─┘ プロパティ | └─┘ 値 | |
セレクタ
スタイルを指定する対象
宣言
設定するスタイル
プロパティ
セレクタに対してどんな設定をするか（色や大きさなど）
値
プロパティに対しての値
この例で説明すると、h1 要素（セレクタ）に対して色（プロパティ）をグリーン（値）に指定しています。 つまり、このスタイルを設定した文書内で <h1> 〜 </h1>で挟んだ範囲はグリーンで表示されるようになります。
このように、セレクタは指定したスタイルを適用させる対象で、プロパティと値はセレクタに対しどのようなスタイルにするのかを指定します。
プロパティを複数（文字の色や形など）指定したい場合は、{ 〜 } の中に、「 ; 」セミコロンで区切って記述します。
<html>
<head>
<title>T,N,O〜タダでネットでお小遣い</title>
<style type="text/css">
h1 {
color: green;
font-style: italic
}
</style>
</head>
<body>
<h1>タダでネットでホームページを作ろう！</h1>
<h2>HTMLの基礎からはじめましょう</h2>
<p>
ホームページを作ることは、難しいことではありません。
楽しみましょう！！
</p>
</body>
</html>
この場合、<style>タグで挟まれた範囲をグリーン（ color: green ）のイタリック体（ font-style: italic ）で表示されるように指定しています。
<style>タグでスタイルを設定すると、対応していないブラウザはソースがそのまま表示されてしまう場合があります。
表示されないために、<!-- と -->でスタイルの指定個所をコメントアウトします。 編集しやすいようにコメントを入れたい場合は、「 /* 」と「 */ 」でコメントを挟みます。
<style type="text/css"><!--
h1 {
color: green; /* h1をグリーンのイタリック */
font-style: italic
}
-->
</style>
こんな感じです。
ソースを見やすく
プロパティ、コロン、値の前後には半角スペースやタブ、改行を入れることができるので、ソースを見やすくすることができます。
引用符
HTMLでは値を引用符「" "」ダブルクォーテーションなどで挟みますが、スタイルシートでは引用符で挟むと、文字列として解釈されてしまうので注意して下さい。
例： green 値として認識する
"green" 文字列として認識されてしまう
URL
スタイルシートで URL などを指定する場合は、「 url( ) 」で指定します。URLは引用符で挟むこともできます。
例： url( http://tno-yotaka37upc.com/ )
url( "../css/css.html" )
スタイルシートの設定
HTMLで使用される文字コード、スタイルシート言語、スクリプト言語などを<head>〜</head>の間に記述します。
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Style-Type" content="text/javascript">
スタイルシートの利点
スタイルシートを使うことにより一つ一つタグで指示しなければならないところを部分的にかえたり、ページ全体に指定したり、全てのページに適用したりすることができるようになります。
例えば、季節ごとに壁紙を変えたり、文字の色や大きさを変えたりするのに、本来なら全てのページをタグなどで指定し直さなければならないのですが、スタイルシートではこれらを簡単に変更することができます。
ページ数が増えれば増えるほど、必要となるでしょう。方法はそのページだけに適用する場合は<head> 〜 </head>の中に記述（上サンプル参照）したり、すべてのページに適用する場合は 外部ファイルを作って読み込ませるなどの方法があります。
その場合、<head> 〜 </head>の中に<link rel="stylesheet" href="ファイル名.css" type="text/css">と記述します。
<style>〜</style>内のソースをコピーしてメモ帳などにペースト（貼り付け）して拡張子をファイル名.cssに変えます。
HTMLの<head> 〜 </head>内に記述してある<style>〜</style>は削除して下さい。
複数の外部ファイルを作り、ページごとにそれぞれのスタイルを適用することもできます。
このように、HTMLのソースを修正しないでスタイルを変更できるので、とても便利です。
