CSSをもっとわかりやすく解説

なんというタイトルなんでしょうか。。　ヾ(- -；)コラコラ
色々と話を聞く中で「CSSがわかりずらい」と感じている人が意外と多いようです。
私が解説しているHTMLやCSSのページの中で、「要素」「セレクタ」「プロパティ」などという言葉が出てきますが、これだけで「うわぁぁぁ!難しそう!」と感じるそうです。

CSSを覚える前に、まずHTMLのタグについて多少知っておかないといけません。
なんてったって、タグでページの構造を作っているからこそCSSが使えるのですから。。
CSSだけ覚えたって意味ナイですからね。

まず、何もない空っぽのページ(一番基礎となるHTMLのタグだけ書いた状態)では、以下のような感じになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">			・HTMLがどのバージョンで書かれているかを指定する
<HTML>			・HTMLで書かれていることを宣言する
	<HEAD>		・文書に関する情報を記述する
		<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">	・どの文字コードで書いているかを指定する
		<TITLE></TITLE>	・文書のタイトルを記述する
	</HEAD>
	<BODY>		・ページの中身を記述する
	</BODY>
</HTML>

この状態をブラウザで表示させると、<BODY>～</BODY>の間に何も書かれていないので、真っ白なページになります。

では、この<BODY>～</BODY>の間に、わりとよく使うHTMLのタグを書いてみます。

<BODY>				・ページの中身を記述する
	<H3>解析集計結果</H3>			・見出し
	<P>解像度</P>			・段落
	<TABLE border="1">			・テーブル
		<TR>		・横一列の行
			<TD>1024x768</TD>	・データのセル
			<TD>75.5%</TD>
		</TR>
		<TR>		・横一列の行
			<TD>800x600</TD>	・データのセル
			<TD>8.1%</TD>
		</TR>
	</TABLE>
</BODY>

この中で使われているタグは、「H3」「P」「TABLE」「TR」「TD」の5種類になります。
では、これをブラウザで表示させると次のようになります。

ここで、～のタグで挟まれている部分の文字色を「赤」に変えることにします。
HTMLのタグを使うとすると、～といった具合に、～タグを追加することになります。

<BODY>				・ページの中身を記述する
	<H3>解析集計結果</H3>			・見出し
	<P>			・段落
	<FONT color="#FF0000">解像度</FONT>			・文字色の指定
	</P>
	<TABLE border="1">			・テーブル
		<TR>		・横一列の行
			<TD>1024x768</TD>	・データのセル
			<TD>75.5%</TD>
		</TR>
		<TR>		・横一列の行
			<TD>800x600</TD>	・データのセル
			<TD>8.1%</TD>
		</TR>
	</TABLE>
</BODY>

では、項目の数が増えたらどうでしょう。
すべての～のタグに～タグを追加しなければいけなくなります。
さらに、文字の色を「青」に変えたくなったとき、すべての～タグを書き直さなければいけなくなります。
こんなときに便利なのがCSSなのです。

　→　次へ　「HTML文書内にまとめて記述する方法」