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

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

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

では、スタイルシートってどんな事が出来るのか早速やってみましょう。まずはHTMLのみでのサンプルを見て下さい。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

まさぼ〜の日記

1月1日

やったぁー!!年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円
((( ;゚Д゚)))ガクガクブルブル

1月2日

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
<H1>まさぼ〜の日記</H1>
<H2>1月1日</H2>
<P>やったぁー!!年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円<BR>
((( ;゚Д゚)))ガクガクブルブル</P>
<H2>1月2日</H2>
</BODY>
</HTML>

スタイルシート適用後の表示@

う〜ん、HTMLのみのサンプルはとってもシンプル♪シンプルイズベストという人はこれでいいかもしれないけど、ほとんどの人はもっとキレイにしたいはずですね。ではでは、まず日付の文字色を変えてみましょう。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

まさぼ〜の日記

1月1日

やったぁー!!年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円
((( ;゚Д゚)))ガクガクブルブル

1月2日

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
H2 { color:green; }
-->
</STYLE>

</HEAD>
<BODY>
<H1>まさぼ〜の日記</H1>
<H2>1月1日</H2>
<P>やったぁー!!年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円<BR>
((( ;゚Д゚)))ガクガクブルブル</P>
<H2>1月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(緑色)です。より詳しい適用法や設定については後のページを参考にして下さいね。

スタイルシート適用後の表示A

続いて日付の文字の大きさと色を変えて段落の左にスペースを入れてみます。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

まさぼ〜の日記

1月1日

やったぁー!!年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円
((( ;゚Д゚)))ガクガクブルブル

1月2日

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
H2 { color:blue;font-size:10pt; }
P  { margin-left:10px;  }
-->
</STYLE>

</HEAD>
<BODY>
<H1>まさぼ〜の日記</H1>
<H2>1月1日</H2>
<P>やったぁー!!年末に、少ない小遣いを使って買った宝くじが当たってる。それも何と一億円<BR>
((( ;゚Д゚)))ガクガクブルブル</P>
<H2>1月2日</H2>
</BODY>
</HTML>

どうです、H2タグで指定された日付の文字の大きさが変わってPタグの左にスペースが開きました。何となくイイ感じになったと思うのは僕だけ・・(笑)
前のサンプルでは、H2タグの文字色を指定するのにH2 { color:green; }のように記入していましたが、これにfont-size:10pt;を付け足すことで文字の大きさを指定しました。それと文字色をやっぱり青色にしたいのでcolor:green;をcolor:blue;に書き直しました。

ここで皆さん、何か気づくことがありませんか?そうです、スタイルシートでデザインを指定しておけば、後からデザインを変えたいと思えばスタイルシートの設定をちょっといじればすぐに変更できます。もし、スタイルシートを使わずに、<FONT>タグで<H2>タグの色を指定していた場合、全部の<FONT>タグの色指定を変更しなければいけませんよね。

まとめ

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