　スタイルシートを使ってみる

■ スタイルシート適用前の表示

では、スタイルシートってどんな事が出来るのか早速やってみましょう。まずはHTMLのみのサンプルを見て下さい。

サンプル - Microsoft Internet Explorer

masabooの日記

１月１日

やったぁー！！年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円
((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

１月2日

HTML&CSS

<html>
<head>
<title>サンプル</title>
</head>
<body>
<h1>masabooの日記</h1>
<h2>１月１日</h2>
<p>やったぁー！！
年末に少ない小遣いを使って買った宝くじが当たってる。
それも何と一億円<br>
((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ</p>
<h2>１月2日</h2>
</body>
</html>

■ スタイルシート適用前の表示

う～ん、HTMLのみのサンプルはとってもシンプル♪シンプルイズベストという人はこれでいいかもしれないけど、ほとんどの人はもっとキレイにしたいはずですね。ではでは、まず日付の文字色を変えてみましょう。

サンプル - Microsoft Internet Explorer

masabooの日記

１月１日

やったぁー！！年末に少ない小遣いを使って買った宝くじが当たってる。それも何と一億円
((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

１月2日

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
h2 { color:green; }
-->
</style>
</head>
<body>
<h1>masabooの日記</h1>
<h2>１月１日</h2>
<p>やったぁー！！
年末に少ない小遣いを使って買った宝くじが当たってる。
それも何と一億円<br>
((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ</p>
<h2>１月2日</h2>
</body>
</html>

はい、文字色を緑色に指定しました。ここで、見慣れないタグが出てきましたね。<head>～</head>の中に記入してある<style type="text/css">～</style>です。

このタグは、スタイルシートの設定を一つのページだけに適用する場合に使います。サンプルではh2タグの文字色を緑色に設定しているのでページ内のh2タグで指定された文字はすべて緑色になります。

続いて設定についてです。<style type="text/css">～</style>の中にh2 { color:green; }と記入されていますね。この部分がh2タグの文字色を指定しています。

パッと見て何となくわかりますよね。h2のcolor（色）がgreen（緑色）です。より詳しい適用法や設定については後のページを参考にして下さいね。

■ スタイルシート適用前の表示

続いて日付の文字の大きさと色を変えて段落の左にスペースを入れてみます。

サンプル - Microsoft Internet Explorer

masabooの日記

１月１日

やったぁー！！年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円
((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

１月2日

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
h2 { color:blue;font-size:14px; }
p  { margin-left:10px;  }
-->
</style>
</head>
<body>
<h1>masabooの日記</h1>
<h2>１月１日</h2>
<p>やったぁー！！
年末に少ない小遣いを使って買った宝くじが当たってる。
それも何と一億円<br>
((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ</p>
<h2>１月2日</h2>
</body>
</html>

どうです、h2タグで指定された日付の文字の大きさが変わってpタグの左にスペースが開きました。何となくイイ感じになったと思うのは僕だけ・・（笑）

前のサンプルでは、h2タグの文字色を指定するのにh2 { color:green; }のように記入していましたが、これにfont-size:10px;を付け足すことで文字の大きさを指定しました。それと文字色をやっぱり青色にしたいのでcolor:green;をcolor:blue;に書き直しました。

ここで皆さん、何か気づくことがありませんか？そうです、スタイルシートでデザインを指定しておけば、後からデザインを変えたいと思えばスタイルシートの設定をちょっといじればすぐに変更できます。

もし、スタイルシートを使わずに、<font>タグで<h2>タグの色を指定していた場合、全部の<font>タグの色指定を変更しなければいけませんよね。

■ まとめ

ここのページでスタイルシートについて簡単に説明しましたが、感覚的にどのようなものか理解出来ましたか？次のページからは本格的にスタイルシートの説明をしていますので、頑張って勉強して下さいね。