７．実用的なスタイルシート例

７．１ スタイルシートに対する考え方
７．２ 作例をスタイルシートでまとめる
７．３ このホームページの例
　

７．１ スタイルシートに対する考え方

　文字の大きさや色を指定する方法として従来は、
<FONT SIZE="+2" COLOR=red>
とすれば大きい文字で赤色になりますね。それをわざわざ、
<SPAN STYLE="font-size:150%;color:red">
と記述する利点はあるのだろうか、と疑問に思いますよね。少なくともSTYLE=の文字の分だけ多く記述する必要があり不利ですね。 確かに上記のように個々にスタイルを指定していたら、同じような記述が繰り返し出てきて、うんざりしてしまいますね。

　ここで、スタイルシートの指定方法を思い出して下さい。スタイルシートだけを別のファイルに記述して、ＨＴＭＬファイルへ読み込む方法がありましたね。これを利用すると、自分好みのタグを作成してＨＴＭＬファイルに記述できる、と考え方が変わります。このように考え方が変わると、スタイルシートを使うのが楽しくなります。

　すなわち、次のように記述したファイルをstyle.css（名前は自由、拡張子は.css）としてＨＴＭＬファイルと同じフォルダに保存します。
#red2{font-size:200%;color:red}
#blueb{color:blue;font-weight:bold}
これは、<SPAN ID=red2>タグは「２倍で赤色文字」、<SPAN ID=blueb>タグは「青色で太字」に設定することを示しています。

　そして、ＨＴＭＬファイルのヘッダに次のように記述して、style.cssファイルを読み込みます。
<HEAD>
‥‥
<LINK REL=stylesheet TYPE="text/css" HREF="style.css">
</HEAD>

　本文には次のように記述します。
<SPAN ID=red2>ここは２倍の大きさで赤色の文字です。</SPAN><BR>
ここは普通の文字です。
<SPAN ID=blueb>ここは青色で太字です。</SPAN>
ここから普通の文字です。

右側のボタンをクリックして結果を見てみましょう。
一つのHTMLファイルの中で、同じIDは一回しか使えないことになっています。何度も使う場合はCLASSを使いましょう。
.red2{font-size:200%;color:red}とし
<SPAN CLASS=red2>ここは２倍の大きさで赤色の文字です。</SPAN>と記述します。
[ページのトップへ]

７．２ 作例をスタイルシートでまとめる

　第１章と第２章で作成したホームページをスタイルシートにまとめてみましょう。先ず、ページのイメージを考え、新しいタグを作る気分でスタイルシートで表現してみます。それを一つのファイルにし、拡張子を.cssとしてＨＴＭＬファイルと同一のフォルダに保存します。ＨＴＭＬファイルでは、自分が作成したタグを記述します。フォルダとファイルの関係を確認しておきましょう。 
	フォルダ        ファイル
	homepage--------index.html  （ホームページ）
	 |              emuindex.css（index用スタイルシート）
	 |
	 +---html-------honbun1.html（自己紹介のページ）
	 |              honbun2.html（Ｘ山への挑戦のページ）
	 |              emuhtml.css （html用スタイルシート）
	 |
	 +---image------watasi.jpg（私の写真）
	                yama.jpg  （山の写真）
	                back1.jpg （背景用画像）

７．２．１ イメージをスタイルシートにする

（１）index用スタイルシート

  1. ページ全体の背景色はうすい黄色で左側に螺旋綴じの画像を入れる。文字の色は黒色。
    BODY{background:URL(image/back1.gif) #ffc repeat-y;color:#000}
  2. 文字に関して、
    • タイトル文字はイタリック体の太字で大きさ１．５倍。
      #title{font-style:italic;font-weight:bold;font-size:150%}
    • 注意を引く文字は太字で大きさを２倍とし赤色とする。
      #chui{font-weight:bold;font-size:200%;color:red}
    • 目次の文字は太字で大きさ１．２倍。
      #mokuji{font-weight:bold;font-size:120%}
  3. 配置に関して、
    • 中央に配置する部分。
      .center{text-align:center}
    • 右側揃えにする部分。
      .right{text-align:right}
    • 横幅８０％で高さ１５０ピクセルのブロックを中央につくり、浮き上がらせる。内側の余白は１０ピクセル。
      #block{margin-left:10%;margin-right:10%;height:150px;border:4px outset;padding:10px}
    • 高さ５ピクセル、緑色の水平線。
      #sen{background:green;font-size:5px}
以上、太字の部分を記述したファイルをemuindex.cssとして保存する。
BODY{background:URL(image/back1.gif) #ffc repeat-y;color:#000}
#title{font-style:italic;font-weight:bold;font-size:150%}
#chui{font-weight:bold;font-size:200%;color:red}
#mokuji{font-weight:bold;font-size:120%}
.center{text-align:center}
.right{text-align:right}
#block{margin-left:10%;margin-right:10%;height:150px;border:4px outset;padding:10px}
#sen{background:green;font-size:5px}

（２）html用スタイルシート

  1. ページ全体の背景色はうすい黄色で左側に螺旋綴じの画像を入れる。文字の色は黒色。
    BODY{background:URL(../image/back1.gif) #ffc repeat-y;color:#000}
  2. 見出しの文字は太字で大きさ１．３倍、色は赤。
    #midasi{font-weight:bold;font-size:130%;color:red}
  3. 配置に関して、
    • 本文は左右に５％の余白をつける。
      #honbun{margin-left:5%;margin-right:5%}
    • 中央に配置する部分。
      .center{text-align:center}
    • 枠線で囲む部分。
      #waku{border:1px solid green;padding:5px}
    • 高さ５ピクセルの緑色の水平線。
      #sen{background:green;font-size:5px}
  4. 写真は枠に入れる。
    IMG{border:6px ridge}
以上、太字の部分を記述したファイルをemuhtml.cssとして保存する。
BODY{background:URL(../image/back1.gif) #ffc repeat-y;color:#000}
#midasi{font-weight:bold;font-size:130%;color:red}
#honbun{margin-left:5%;margin-right:5%}
.center{text-align:center}
#waku{border:2px solid green;padding:6px}
#sen{background:green;font-size:5px}
IMG{border:6px ridge}

７．２．２ ＨＴＭＬファイルを書き直す

（１）index.html

<HTML>
<HEAD><TITLE>エムの旅日記</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="emuindex.css">
</HEAD>
<BODY>
<DIV ID=title CLASS=center>エムの旅日記</DIV>
<DIV ID=sen>　</DIV>
<BR>
これは、<SPAN ID=chui>私（エム）</SPAN>の旅の記録です。
<BR><BR>
<DIV ID=block>
<SPAN ID=mokuji>
◆<A HREF="html/honbun1.html">自己紹介</A><BR>
<BR>
◆<A HREF="html/honbun2.html">Ｘ山への挑戦</A><BR>
</SPAN>
</DIV>
<DIV CLASS=right><BR>更新日：03-02-18</DIV>
</BODY>
</HTML>

（２）honbun1.html

<HTML>
<HEAD><TITLE>自己紹介</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="emuhtml.css">
</HEAD>
<BODY>
<DIV ID=honbun>
<DIV ID=midasi CLASS=center>自己紹介</DIV>
<DIV ID=sen>　</DIV>
<BR><BR>
★私はエムです。<BR>
<IMG SRC="../image/watasi.jpg" ALIGN=right>
☆これが私です。いい男でしょう。<BR CLEAR=all>
<BR><BR>
<DIV CLASS=center>
<SPAN ID=waku>
<A HREF="../index.html">[INDEX]</A>
<A HREF="honbun2.html">[Ｘ山への挑戦]</A>
</SPAN>
</DIV>
</BODY>
</HTML>

（３）honbun2.html

<HTML>
<HEAD><TITLE>Ｘ山への挑戦</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="emuhtml.css">
</HEAD>
<BODY>
<DIV ID=honbun>
<DIV ID=midasi CLASS=center>Ｘ山への挑戦</DIV><BR>
<DIV ID=sen>　</DIV>
<BR><BR>
〇月〇日、私はＸ山に登りました。<BR>
<IMG SRC="../image/yama.jpg" ALIGN=right>
その時の写真がこれです。４５度の急傾斜面を一気に登りました。<BR CLEAR=all>
<BR><BR>
<DIV CLASS=center>
<SPAN ID=waku>
<A HREF="../index.html">[INDEX]</A>
<A HREF="honbun1.html">[自己紹介]</A>
</SPAN>
</DIV>
</BODY>
</HTML>

右側のボタンをクリックして結果を見てみましょう。
[ページのトップへ]

７．３ このホームページの例

　このホームページで使っているスタイルシートの一部を紹介します。ホームページを参照しながらご覧下さい。

（１）ページ全体に関するもの

(a)背景と文字
BODY{background:URL(../image/back14.gif) #f0f0f0 fixed;font-family:"ＭＳ Ｐ明朝";line-height:120%;color:#000}
URL(../image/back14.gif)で背景画像を指定し、#f0f0f0は画像が読み込まれない場合の背景色で、fixedは背景がスクロールしないことを指定しています。
"ＭＳ Ｐ明朝"は全体のフォントがＭＳ Ｐ明朝で表示されることを指定しています。
120%は行間隔が通常の１．２倍になるように指定しています。
#000は文字の色が黒で表示するように指定しています。

(b)リンク
A:link{color:blue}
A:visited{color:blue}
A:hover{color:red;background:#ff9}
linkは訪問する前のリンクの色です。visitedは訪問した後の色です。hoverはマウスを置いた時の色です。backgroundは背景色です。

（２）配置に関するもの

(a)本文を書く枠
#bdy{margin:5px;padding:4px;background:#ffc;border:1px solid green}
これは<DIV ID=bdy>〜</DIV>と記述して使用します。
margin:5pxで外側の余白を５ピクセルとし、padding:4pxで内側の余白を４ピクセルとします。背景色はうすい黄色（#ffc）で、枠を１ピクセルの緑色の線で囲みます（border:1px solid green）。

(b)左側の余白
.sp1{margin-left:16px}
.sp2{margin-left:32px}
.sp3{margin-left:64px}
これらは<DIV CLASS=sp1>〜</DIV>などと記述して使用します。
それぞれ左側余白が１６ピクセル〜６４ピクセルとれます。

(c)このページのスタイルを記述している枠
.styl{margin-left:16px;margin-right:16px;margin-bottom:4px;border:1px solid blue;background:#f0f0f0;padding:5px}
<DIV CLASS=styl>〜</DIV>と記述して使用します。
border:1px solid blueで青色の枠線を引きます。margin-bottom:4pxで枠と下の文字との間隔を４ピクセル取っています。padding:5pxで枠と内部の文字との間隔を５ピクセル取っています。

（３）文字に関するもの

(a)見出し文字
H2{width:100%;filter:Blur(strength=4,direction=135);color:#c00}
このページの一番上の見出しです。これは影の付いた文字になりますが、インターネットエクスプローラしか対応していません。

(b)目立たせる文字
.mdt{color:#03c;font-weight:bold}
.chu{color:#c30;font-weight:bold}
<SPAN CLASS=mdt>〜</SPAN>と記述しした部分が、濃い青色で太字になります。
<SPAN CLASS=chu>〜</SPAN>と記述しした部分が、濃い赤色で太字になります。

(c)小さい文字
.s{font-size:80%;line-height:110%}
<DIV CLASS=s>や<SPAN CLASS=s>などと記述すると、大きさ８０％の文字になります。

　スタイルシートを使うと色々な部分を細かく指定できるので、皆さんも独自のタグを工夫してみましょう。スタイルシートのリファレンスについては「リンク集」に記載していますので参考にして下さい。
[ページのトップへ]
　
左の目次の各欄をクリックすれば別のページが表示されます。
フレーム表示されていない場合はここをクリックして下さい。