しかし, 多くの場合 Web にアクセスするのはグラフィカルな browser で, 文書の多彩な表現が可能です. このような環境に対して内容の色や配置を 指定するには, スタイルシートを利用します. この講義では, 最も標準的に用いられている カスケイディングスタイルシート (Cascading style sheet, CSS)を利用します. スタイルシートには,CSS の他にも XSL(Extensible Stylesheet Language) などいくつかの種類があります.
emacs を起動して, 下の 4行の内容を index.css と言う名前のファイルで 保存して下さい.
body {background-color: rgb(224,255,224)}
h1 {color: maroon; text-align: center}
h2 {color: #00FF00}
p {text-indent: 1ex}
保存が終ったら, Firefox で再読み込みボタン(青色の円形の矢印のついたもの)を 押して, 表示がどのように変化するかを見て下さい.
もし何も変化しなければ, ファイル名がindex.css となっているか,
index.html の 上から 7行目付近の
<link rel="stylesheet" type="text/css" href="index.css">
の部分が間違っていないかを確かめて下さい.
CSS は, 次のような形で記述されます.
| セレクタ | {種類 : | 指定値 ; | 種類: 指定値: ... |
| 何の | どの部分を | どの値に | ... |
h1 {color: maroon; text-align: center}
としてありますが, 第1レベルの見出しの色は maroon にし,
そのテキストは画面の中央に配置すると言う意味です.
また, 色指定は3通りを例示してあります.
rgb(224,255,224)と #E0FFE0 は同じ意味になります.
どちらも光の3原色赤(red), 緑(green), 青(blue)の輝度を,
数値で指定しており, 始めの方は10進で分離して書いてあり,
後の方は16進でまとめて書いてあります.
輝度の値の範囲は 0〜255(
)です.
代表的な色は, 色の名前(例えば maroon=栗色)で指定する事も出来ます.
html で定義されている色の名前はそう多くなく 16色で,
参考書のp79 にあります. これ以外の色の名前の定義されており,
グラフィカルなブラウザでは, その名前を使ってもほとんどの場合は,
大丈夫です. ただし, 色の名前については自分で調べて下さい.
最後のセレクタ p の指示での text-indent は, 段落の最初の字下げの指定です. 1ex は1文字と言う単位の指定です. 単位の指定方に関する 詳しい事は, 参考書を見て下さい.
スタイルシートを書いた後のペイジも, w3m を使って見て下さい. 文字の色を変えるとか, 文字を中央に置くとかの指示は, w3m では無視されます. ウェブペイジを書き換えた時には, 必ず w3m でどう見えるかも チェックするようにして下さい.
HTML のタグやスタイルシートの指定などは英語がもとになっていますが, この程度の英単語の意味は, 各自調べておくとともに, この際覚えてください. (会話よりもむしるこういうものの方が, 使える英語だと私は考えます.)