step05 スタイルシート(CSS)の使い方
前stepの課題レポート：自己紹介サイトはうまくできたであろうか。実はすこし危ぶんでいる。というのも、スタイルシート(CSS)について、まだ何も教えていないのに、課題でそれを使うように指示しているからだ※1。
そこでこのstepでは、主として前stepのHTMLソースとCSSを題材にして、スタイルシートの書き方と、HTMLとの対応について解説する。
1 いわゆる無茶ぶりだが、ソフトの世界ではよくあることである。
HTMLとCSSの役割
CSSは表示属性を定義する
HTMLとCSSは、前stepの課題では、1つのファイルに混在しているが、見て分かるように、別の言語である。
Webが登場した当初、WebページはHTMLだけで記述されており、CSSというものはなかった。当時のHMTLは、つぎの3つの役割を担っていた。
- ハイパーリンクの定義
- <a href=[URI]>タグによって、アンカーをクリックしたときの移動先を定義する。
- マルチメディア要素の埋め込み
- Webページ本体(HTMLファイル)は定型テキストファイルだが、別ファイルの画像や音声ファイルを関連付け、ブラウザの画面ではマルチメディアのコンテンツとして表示できる。
- 要素の表示属性の定義
- テキストに対する文字書式や段落書式の定義、マルチメディア要素（画像枠など）の配置やサイズの定義など、ワープロと同様の役割を果たしていた。
スタイルシートの解説
たとえば、以下のスタイルシート
body{
background-image:url("./img/check.png");
}
h1{
color:#FFFFFF;
background-color:#FF3333;
border-radius:5px;
border-left:solid 10px #000000;
border-right:solid 10px #000000;
padding:5px 7px;
}
- 文字色は白
- 背景色は赤系統(R=0xFF, G=0x33, B=0x33)
- 領域の4隅を半径5ピクセルの角丸にする
- 領域の左右に太さ10ピクセルの黒線を引く
- 領域の内部余白(padding)は上下5ピクセル、左右7ピクセル
h2タグや、thタグ（テーブルの見出しセル）に対する指定も、これと同様である。
dtタグ（説明文付きリストの見出し語）にある、font-weight:bold;は、太字の指定であり、CSSが登場する以前は、HTMLのタグを使って、<b>～</b>と書かれていた。このような、表示属性だけを指定するタグは、CSSを使う場合は基本的に排除するのが、新しいスタイルとされる。
それとは逆に、CSSの登場以後に必要となったタグもある。代表的なものが、<div>と<span>である。この課題のソースにも、<div>タグが使われており、CSS側の指定もやや複雑である。順に説明していこう。
<div>タグは、単一のタグで囲まれていない文書の一部を指定して、名前をつけるためのタグである。この課題の文書では、中見出し(<h2>～</h2>)と説明文付きリスト(<dl>～</dl>)が、2重線の枠で囲まれている。しかし、この部分には元々名前がないため、CSS側で表示プロパティを指定できない。そこで<div>タグを使って、
<div class="box1">
<h2>近くにはこんなところが</h2>
<dl>
:
</dl>
</div>
これに対応するスタイルシートは、
div.box1{
text-align:center;
width:500px;
border:double 3px #99CCCC;
padding:10px;
margin:5px;
}
<span>タグの役割も、<div>タグと似ている。ただしこちらは、一続きの文章（テキスト）の一部を囲って、クラス名をつけるためのタグである。たとえばこの講座資料では、各所に赤字や青字の強調部分が見られるが、強調される部分は元々タグが存在するわけではないから、名前がない。そこで、
<span class="keyword">赤字</span>
span.keyword{ /* 赤字（キーワードなど） */
color:#FF0000;
font-weight:bold;
}
<div>タグも<span>タグも、HTML文書の特定部分に名前をつける以外の役割がないので、CSSで文書をデザインするのでなければ無用の長物である。
文書範囲に名前をつけるための仕組みには、もう1つ、idというものがある。HTML側では、たとえば
<p id="author-name">
#author-name{
padding-top:20px;
padding-left:20px;
color:#00FFFF;
font-size:24pt;
font-style:italic;
font-weight:bold;
}
この単元でCSSのすべての機能と表示プロパティを解説することはできないので、詳しくは上記リファレンスにあたってほしい。続くstep06とstep07の講座資料にも、HTMLとCSSソースの例を載せているから、ここで解説した基本を思い出しながら読んでいけば、すぐに自分で書けるようになるはずだ。
スタイルシート(CSS)を書ける場所
自宅付近の紹介ページの課題では、スタイルシートを、HMTLファイルのヘッダ部に記述している。この方式も含めて、CSSを書ける場所は3種類あり、それぞれ表示プロパティの有効範囲だけが異なる。
- HTMLタグのstyle属性として
-
- 例：<ul style="list-style-type:square;">
- 有効範囲は、そのタグ限り
- ヘッダの間
- 例：前stepの課題 自宅付近の紹介ページ、次stepの課題 リンク集ページ
- 有効範囲は、そのHTML文書
- その文書内ならば、何度同じタグが使われてもくり返し適用される
- 独立したcssファイルとして
- 例：step07の課題 自己紹介サイト
- 有効範囲は、そのcssを参照した全html文書
- サイト内の全ページのデザインを統一する場合などに、非常に便利である
- この講座資料も、すべての科目のすべての単元に、1つのcssファイルを適用している