8.5 スタイルシート
HTML は学術的な情報交換のために開発されました．したがって，読む人がどんなコンピュータを使っていようと内容を正しく伝えることが重要であり，文書の見栄えはあまり気にしていませんでした．しかし，世の中の多くの人がウェブを使うようになると，文章だけではつまらないので，文書のデザインを気にする人たちも現れました．そこで，HTML の限られた機能を使って美しくページをデザインするために次のような工夫が行われるようになりました．
- レイアウトのために表(<table>)を使う．
- テキストの代わりに文字を画像にした文字イメージを使う
- HTML を勝手に拡張する
ところが，このような工夫はページを複雑にして処理を遅くするだけでなく，ブラウザの種類や設定によって意味不明の表示になったり，テキスト読み上げソフトを使っている視覚障害者を困らせたりすることになります．
スタイルシート(style sheet)は上のような問題を解決するための，ページのデザインを指定する仕組みです．HTML は文章の論理的な構造を表すマークアップを担当し，色や文字の大きさといったデザインに関するマークアップはスタイルシート言語で書きます．スタイルシート言語にはいくつかありますが，普通は CSS(Cascading Style Sheets)を使います．
注意スタイルシートの解釈はブラウザによってまちまちであったり，ブラウザによっては対応していなかったりで，スタイルシートによる指定が，必ずその通りに表示されるという保証はありません．
CSS によるマークアップの基本的な書き方は「属性名 : 値」です．複数ある時は「;」で区切ります．例えば，12ピクセルサイズの青い文字を使いたい場合は
色の指定
ページの背景や文字の色を指定するためには，16進数で表現される，RGB カラーモデルを使います．色を赤(R)，緑(G)，青(B)の三原色に分解し，それぞれの明るさを数値化する方式です．書き方はいくつかありますが，前に「#」を付け，2桁の16進数(00〜FF)に数値化して並べる書き方がよく使われます．例えば，赤色は #FF0000 と表わされます．またよく使う色などは予め名前が与えられており，その名前で指定することもできます．例えば先程の赤色は" red "となっていてこれはRGBの #FF0000と同じです．赤色のように色を名前で指定できるのは以下の16色です．
| 色の名前 | 対応するRGB表記 | 色の名前 | 対応するRGB表記 | ||||||
|---|---|---|---|---|---|---|---|---|---|
| 赤(R) | 緑(G) | 青(B) | 赤(R) | 緑(G) | 青(B) | ||||
| black | # | 00 | 00 | 00 | white | # | FF | FF | FF |
| red | # | FF | 00 | 00 | blue | # | 00 | 00 | FF |
| yellow | # | FF | FF | 00 | green | # | 00 | 80 | 00 |
| purple | # | 80 | 00 | 80 | aqua | # | 00 | FF | FF |
| gray | # | 80 | 80 | 80 | silver | # | C0 | C0 | C0 |
| maroon | # | 80 | 00 | 00 | lime | # | 00 | FF | 00 |
| olive | # | 80 | 80 | 00 | navy | # | 00 | 00 | 80 |
| fuchsia | # | FF | 00 | FF | teal | # | 00 | 80 | 80 |
これら以外の色を使いたいときはRGBで自分で指定します．
色を指定できる対象には以下のような属性があります．
- color属性：前景色（文字の色）
(例) color: #FF0000 - background属性：背景色（文字の背景や画面の背景の色）
(例) background: white
文字に関する指定
文字に関して指定できる属性には以下のようなものがあります．
- font-size属性：文字の大きさを指定．指定方法はpt(ポイント),px(ピクセル)のように数値を指定する場合と，直前までの文字に対して相対的な大きさを指定する，emなどがあります．
(例)- font-size: 12pt
- font-size: 2em
- font-weight属性：文字の太さを指定します．値にはbold,normalなどがあります．
(例)- font-weight: bold
- font-style属性：文字の傾きを指定します．値にはitalic, oblique, normalなどがあります．
(例)- font-style: italic
- text-decoration属性：下線などの文字装飾を指定します．値にはunderline(下線),overline(上線),line-through(打ち消し線)などがあります．
(例)- text-decoration: underline
- text-align属性：文字の水平位置を指定します．左に寄せたいならleft,中央に寄せたいならcenter, 右に寄せたいならrightと指定します．
(例)- text-align: center
これら以外にもfont-familyやfont-variantなどがあります．
HTMLでのCSSの使い方はインライン指定，style 要素，外部スタイルシートの3通りがあります．
(1) インライン指定
HTML 文書の中のある特定の要素について，スタイルシート言語で書いたマークアップ（以後，「スタイル指定」と呼ぶことにします）を行いたい場合は，その要素の style 属性の値としてスタイル指定を書きます．例えば，ある段落を12ポイントの青い文字で書きたい場合は以下のようにします．
また，head 要素の中に，どのスタイルシート言語を使うか書いておく必要があります．例えば，CSS の場合は
と書いておきます．
(2) style 要素
HTML 文書の中のある種類の要素全部についてスタイル指定を行いたい場合は，style 要素を使います．
- style 要素は必ず head要素の中に書きます．
- type 属性で使用するスタイルシート言語を指定します．CSS の場合は "text/css" です．
- style 要素の中には「要素名 { スタイル指定 }」の形で，それぞれの要素に対するスタイルを指定していきます．
例えば，h1 要素の文字を赤色にし，下線を付け，中央揃えにするためには以下のように記述します．
<head>
<style type="text/css">
h1 {color: red; text-decoration: underline; text-align: center}
</style>
</head>
|
こうしておいた上で，本文で h1 要素を使うと下のようになります．
見出しのテスト |
class 属性
上の例では，文書中のすべての h1 要素に対して同じスタイルを指定します．しかし，同じ種類の要素でも何種類かのスタイルを指定したいことがあります．そのような場合は，必要に応じて要素に class 属性を付けておき，特定の class 属性の値を持った要素に対して「要素名.クラス属性の値 { スタイル指定 }」でスタイルを指定することができます．
例えば，h1 要素で class 属性の値が test-ni-deru のものだけ上と同じスタイルを指定するには
<head>
<style type="text/css">
h1.test-ni-deru {color: red; text-decoration: underline; text-align: center}
</style>
</head>
<body>
<h1 class="test-ni-deru">重要そうな章</h1>
<h1>あんまり重要でなさそうな章</h1>
</body>
|
とします．
span と div 要素
span 要素と div 要素は，文書の中のある部分をひとまとめにして扱うためのものです．
- span 要素：前後の文章とつながって同じ行に表示されます．
- div 要素：前後の文章とは独立した行に表示されます．
クラス属性を付けることで，文書の中の任意の部分にスタイルを指定するのに使えます．以下の例では，段落と表組がまとめて中央に寄せられ，その次の段落では文章の一部分の色が変わっています．
<head>
<style type="text/css">
span.blue {color: blue}
div.center {text-align: center}
</style>
</head>
<body>
<div class="center">
<p>この段落は中央に寄っている．</p>
<table border="1">
<tr><td>この表も中央に寄っている．</td></tr>
</table>
</div>
<p>ここは普通の文章<span class="blue">ここだけ青い文字</span>そしてもとに戻る．</p>
</body>
|
(3) 外部スタイルシート
今までのスタイルの指定のし方は各HTMLファイル固有のものでした．しかし例えばこの情報処理のテキスト(演習編)のように，共通のスタイルを複数の HTML ファイルで指定する場合，HTMLファイル毎にいちいち同じstyle指定をするのは大変です．そこでスタイル指定をHTMLファイルとは独立した別のファイルに書き，各 HTML ファイルの中の link 要素で外部スタイルシートの指定をします．こうすることで，複数のHTMLファイルで共通のスタイル指定が使えるようになります．
ひとつの HTML ファイルに複数の外部スタイルシートを指定することができますが，ここではひとつのスタイルシートファイルだけを使うことにします．
まず，HTMLファイルとは別に共通で指定したいスタイルだけをまとめて書いた，CSSファイルを作り保存しておきます．
pagestyle.css ファイル
span.blue {color: blue}
div.center {text-align: center}
|
続いてHTMLファイルの head 要素内に新たにlink 要素を作り，以下の属性を設定します．
- rel 属性は "stylesheet" という値にします．
- href 属性で外部スタイルシートの URI を指定します．
- type 属性でスタイルシート言語の種類を指定します．CSS の場合は "text/css" です．
<head> <link rel="stylesheet" href="./pagestyle.css" type="text/css"> </head> <body> <div class="center"> <p>この段落は中央に寄っている．</p> <table border="1"> <tr><td>この表も中央に寄っている．</td></tr> </table> </div> <p>ここは普通の文章<span class="blue">ここだけ青い文字</span>そしてもとに戻る．</p> </body> |
これで，いちいちHTMLファイルでスタイルを指定しなくても pagestyle.cssで指定したスタイルが適用されます．他のHTMLファイルで同じスタイルを適用したい時は，同様に link 要素を指定します．
● 練習問題
スタイルシートを使って，自分が作ったウェブページの見栄えを良くしてみましょう．
● 宿題
public_htmlディレクトリの下に，新しくreport.htmlというファイルを作り，以下の内容を記したウェブページを作りなさい．
- 自分がSFCで学びたいことを簡潔に書く．
- ウェブ上で他の人が作ったページのソースを参照し，その中から自分が知らないタグを見つけ，そのタグがどういう働きをしているのか考えて書く．
- 今日作った自分のトップページ(index.html)にリンクを張っておく．
評価は内容に対してだけでなく，いかにウェブページが見やすく，そして内容が相手に伝わりやすいように作られているかも見ます．
スタイルシートによるページのデザイン P.260参照