第２章 見栄えを良くする
見栄えを良くするには、スタイルシートを使って色、大きさ、表示位置などを指定します。スタイルシートの使い方には色々ありますので
「付録１：必要最小限のタグとスタイルシート」を参照して下さい。ここでは基本となる、スタイルを別のファイルにまとめる方法で説明します。
２-１.スタイルシートの書き方
スタイルシートの書き方は、大変わかりやすく次のように記述します。
color:red すなわち定義されるもの「色(color)」とその値「赤(red)」を : (半角コロン）で繋ぎます。
そして、これを適用したい部分を指定すれば完成です。指定の方法にいくつかあるので、具体例で説明します。例えばページ全体の文字の色を赤くしたい場合は、BODYタグに対してcolor:redを適用します。以下の３種類があります。
- BODYタグに直接記述する。
<BODY STYLE="color:red">
- ヘッダー部に記述する。
<STYLE TYPE="text/css">
<!--
BODY{color:red}
-->
</STYLE>
- スタイルシートを別のファイルに記述する。
BODY{color:red} と記述したファイルをmystyle.cssと名前を付けて同じフォルダに保存し、
HTMLファイルのヘッダー部で次のように記述して読み込む。
<LINK REL=stylesheet TYPE="text/css" HREF="mystyle.css">
１．が最も簡単ですが、タグ毎に記述する必要があります。２．はファイル全体に対して一度定義するだけですが、他のＨＴＭＬファイルでも同じ定義を再度記述する必要があります。ということで、ここでは３．の方法で説明します。
また、例えば文字の色は赤、背景は青色というように複数定義したい場合は
;（半角セミコロン）で区切って記述します。
color:red;background:blue
<SPAN>や<DIV>タグは部分的にスタイルを指定するタグで大変便利ですが、同じタグで異なるスタイルを適用したい場合があります。その場合は、CLASSを使います。すなわち、
.文字列1 {color:white;background:blue}
.文字列2 {color:red} とし、
<SPAN CLASS=文字列1>〜</SPAN>
<SPAN CLASS=文字列2>〜</SPAN>
のように使います。（文字列は半角英数字で自由に記述します。）
２-２.index.htmlを書き直す
先ず、スタイルシートをまとめて記述するファイル名を決めます。ここでは
mystyle01.cssとします。（名前は自由ですが、拡張子は
.cssにします。全て半角英数字にします。
index.htmlと同一のフォルダに保存します。）そして、index.htmlファイルでこのファイルを読み込むために、ヘッダー部（<HEAD>〜</HEAD>）に次のように記述しておきます。
<LINK REL=stylesheet TYPE="text/css" HREF="mystyle01.css">
（１）ページ全体の文字の色と背景の指定
ページ全体の文字の色(olive)と背景色(aqua)の指定は、mystyle01.cssに次のように記述します。
mystyle01.css
BODY{color:olive;background:aqua}
これをブラウザで見てみましょう。
ここをクリックして下さい。
「マイホームページ」の文字を斜体(
font-style:italic)の太字(
font-weight:bold)で２倍の大きさ(
font-size:200%)にし、背景色を青(
background:blue)、文字の色を赤(
color:red)にし「マイ」だけは黄色(
color:yellow)にして中央に配置(
text-align:center)してみましょう。
mystyle01.cssに
.ib2{font-style:italic;font-weight:bold;font-size:200%;background:blue;color:red;text-align:center}
.ylw{color:yellow}
を加え、
index.htmlの「マイホームページ」の部分を
<DIV CLASS="ib2"><SPAN CLASS="ylw">マイ</SPAN>ホームページ</DIV>
とします。
これをブラウザで見てみましょう。
ここをクリックして下さい。
最初の文章の左右に１０％の余白(
margin-left:10%;margin-right:10%)をとりましょう。そして背景を白色(
background:white)にし、文字との間に余白を５ピクセル(
padding:5px)とります。文章の途中の改行（<BR>）は削除します。
mystyle01.cssに
.bgwh{background:white;margin-left:10%;margin-right:10%;padding:5px}
を加え、
index.htmlの最初の文章の部分を
<DIV CLASS="bgwh"> これは、私の……思っています。</DIV>
とします。
これをブラウザで見てみましょう。
ここをクリックして下さい。
真ん中の文章は背景を黄色(
background:yellow)にし、左右の余白を２０％(
margin-left:20%;margin-right:20%)とりましょう。そして各項目は文字を少し大きく(
font-size:120%)して青色(
color:blue)にし、太字(
font-weight:bold)にします。
mystyle01.cssに
.bgy{background:yellow;margin-left:20%;margin-right:20%}
.blb{font-weight:bold;font-size:120%;color:blue}
を加え、
index.htmlの真ん中の文章を
<DIV CLASS="bgy">
内容は<BR>
<SPAN CLASS="blb">
（１）私の紹介<BR>
（２）今日の日記<BR></SPAN>
です。
</DIV>
とします。
これをブラウザで見てみましょう。
ここをクリックして下さい。
最後の文章は文字を少し小さく(
font-size:75%)してみましょう。そして半分から右側(
margin-left:50%)に表示します。
mystyle01.cssに
.sml{font-size:75%;margin-left:50%}
を加え、
index.htmlの最後の文章を
<DIV CLASS="sml">
内容はまだ……
……
……ご期待ください。
</DIV>
とします。
以上をまとめると、
style01.cssは
BODY{color:olive;background:aqua}
.ib2{font-style:italic;font-weight:bold;font-size:200%;background:blue;color:red;text-align:center}
.ylw{color:yellow}
.bgwh{background:white;margin-left:10%;margin-right:10%;padding:5px}
.bgy{background:yellow;margin-left:20%;margin-right:20%}
.blb{font-weight:bold;font-size:120%;color:blue}
.sml{font-size:75%;margin-left:50%}
index.html は
<HTML>
<HEAD><TITLE>マイホームページ</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="mystyle01.css">
</HEAD>
<BODY>
<DIV CLASS="ib2">
<SPAN CLASS="ylw">マイ</SPAN>ホームページ
</DIV>
<BR>
<DIV CLASS=bgwh>
これは、私のホームページです。私が一人で作りました。メモ帳だけで作っています。皆に楽しんでいただけるようなホームページにしたいと思っています。
</DIV>
<BR>
<DIV CLASS=bgy>
内容は
<SPAN CLASS=blb>
（１）私の紹介<BR>
（２）今日の日記<BR></SPAN>
です。
</DIV>
<BR>
<DIV CLASS=sml>
内容はまだ少ないですが、これから順次内容を増やして、充実させて
いく予定ですので、ご期待ください。
</DIV>
</BODY>
</HTML>
これをブラウザで見てみましょう。
ここをクリックして下さい。
[
第３章へ]
