簡単CSS講座！

　はい、それじゃCSSの勉強しましょ。

CSSって何？

　カスケーディング・スタイル・シートの略。これ聞いて何するものかが分かったら天才。CSSっていうのは、文字色、サイズ、太字はもちろん、一つのタグ（たとえばPタグ）を使うと、ページ中の全てのPタグに文字色とかの情報がくっつくってわけ。文字単位で枠をつけたり、余白をなくしたりとか、極めつけは文字や画像を好きなところにおける！ってこと。じゃ、そのやり方をやっていこう。

まずは用途別に

一箇所だけにスタイルを指定したい：<タグ名 Style="スタイル要素"></タグ名>

ページ中にあるタグにスタイルを指定したい：HEADに
<STYLE type="text/css"><!--
タグ名{スタイル要素}
--></STYLE>(いくらでも増やせる)

クラスを指定してそのクラスの入っているタグにスタイルを指定：HEADに
<STYLE type="text/css"><!--
.クラス名{スタイル要素}
--></STYLE>(いくらでも増やせる)

CSSファイルを別に作って
これは後で説明。

スタイル要素のところに、指定したいスタイルを入れていくんだ。要素を覚えたらこれをテンプレートにして自分で作ってみよう。

スタイル一覧

　こいつをスタイル要素の中に入れていこう。それだけでいろいろ出来るぞ。たとえばここはPタグにBORDERで色を個別指定したんだ。うまくやれば立体も出来るよ。ここはこの文字だけにAタグをつけて、そこにスタイルを入れて背景色をつけたよ。マーカーみたいでしょ。ソースを見てごらん。

　そしてスタイル要素を複数入れたいとき。そのときは、ただ後ろに書いていくだけ。たとえば、文字色と太字を同時にやりたかったとしたら、こうなる。
color:色;font-weight:bold;
ちなみに、「：」の前後に間を入れて見やすくしても、改行してもいい。こんなかんじに。

color      :色;
font-weight:bold;
半角でスペースを入れれば安全。
文字色 color:色;
背景色 background-color:色;
背景画像 background-image:url(ファイル名);
文字サイズ font-size:サイズpt;
※ptはpxとか%でもOK(サイズ指定の物は全部変えられるよ)
下線 text-decoration:underline;
上線 text-decoration:overline;
取り消し線 text-decoration:line-through;
上3つ合体 text-decoration:underline overline line-through;
文字間 letter-spacing:サイズpt;
※文字と文字の間がこんな風に開く
行間 line-height:サイズpt;
※行の間が開く。文字サイズを一緒に使ったほうがいい。
文字サイズ+空白分で指定しないといけないからね。
　
太字 font-weight:bold;
傾き文字 font-style:italic;
文字の位置
(これ真ん中)		 text-align:center;
※左はleft、右はright
パディング個別指定
(余白。文字のすぐ回り)		 padding-top:上px;padding-left:左px;padding-right:右px;padding-bottom:下px;
パディング一括指定 padding:サイズpx;
ボーダー個別指定
(線。パディングの周り)		 border-width:上サイズpx 右サイズpx 下サイズpx 左サイズpx;border-style:solid;border-color:上色 右色 下色 左色;
※サイズを一緒にするときは、上サイズpxの後から左サイズpxまで消す
ボーダー一括指定 border:サイズpx solid 色;
マージン個別指定
(余白。ボーダーの周り)		 margin-top:上px;margin-left:左px;margin-right:右px;margin-bottom:下px;
マージン一括指定 margin:サイズpx;
パディング、ボーダー、マージンの位置関係が難しいが、余白を開ける時はパディングだけを使っていればいい。ボーダーの周りに余白が欲しい時はマージンを使うといい。

クラスについて

　クラス指定は楽だぞ。じゃ、早速例を見せよう。HEADに次のスタイルを入れたとしよう。
<STYLE type="text/css"><!--
.abc{color:red;font-weight:bold;}
.abeni{border:5px solid blue;}
--></STYLE>
クラス名のところに入るのは、好きな文字でいい。2バイト文字(全角文字)以外なら好きに出来る。

　そして、テーブルタグの中にこういう風に入れると・・・
<TD class="abc">こうなるんだ。</TD>

こうなるんだ。

　となる。これはどこにでも使えるよ。ここもabcのスタイルを指定してる。

　リンクしたいところに、こうしたらどうかな？
<A href="index.html" class="abeni">枠つきリンク</A>

枠つきリンク

　なかなかいいだろ？もちろん、リンクじゃないところでも出来るよ。

CSSファイルとか・・・一括でデザイン変更

　これを一番使ってる。その次に使ってるのはタグにスタイルを突っ込むヤツだな。とりあえずやり方を。

　んじゃメモ帳開いて。そしたら使うことになるであろうスタイルを作っていくんだ。HEADに入れるような形でね。クラス指定でもタグ指定でもいいよ。全部作れたら保存なんだけど、ここで注意。「半角のファイル名(基本だね).css」にするんだ。txtじゃなくて、cssだよ。
　保存したら、次はそのスタイルを使いたいページ(多分全部のページだろう)の</TITLE>と</HEAD>の間に、こういうのを入れていくんだ。
<LINK rel="stylesheet" href="さっき保存したファイル名.css">
そしたらあとは、さっき作ったファイルに書かれたクラスとかを使ってページを作る。すると、別のファイルになっているはずの「なんたら.css」に書かれたスタイルが適用されてるってわけさ。難しいかな？まぁとにかくやってみろ。

もう一歩進んだもの

　カーソルが変わってるサイトがあるよね？
それはこのページで紹介してるよ。自分のページだけどさ。

　リンクの上にマウスが乗ると、色が変わったり、線が出てきたりしてるサイトも良くあるよね。これも実は楽勝なんだぜ。
このスタイルは必ずHEADに入れてね。
　これは線の無いリンクに上線と下線をつけるやつ。線の付いたリンクにするなら1行目を消す
a{text-decoration:none;}
a:hover{text-decoration:underline overline;}
　こっちは線の無いリンクに背景色と文字色をつける。線の付いたリンクにするなら1行目を消す
a{text-decoration:none;}
a:hover{color:文字色background-color:背景色;}

　スタイルがごちゃごちゃしてきて、どれが何に使うのだったか忘れたって？そしたら、コメントを入れるのさ。
HTMLでいうと<!---->にあたるものが、/*コメント*/なんだ。コメントの所に好きに入れよう。ただし、コメントと同じ行にスタイルを重ねちゃいけないよ。例を言うと、
<STYLE type="text/css"><!--
/*コメント*/.abc{color:red;font-weight:bold;}
--></STYLE>
見たいなのはダメなんだ。こうすること
<STYLE type="text/css"><!--
/*コメント*/
.abc{color:red;font-weight:bold;}
--></STYLE>