しかし, 多くの場合 Web にアクセスするのはグラフィカルな browser で, 文書の多彩な表現が可能です. このような環境に対して内容の色や配置を 指定するには, スタイルシートを利用します. この講義では, 最も標準的に用いられている カスケイディングスタイルシート (Cascading style sheet, CSS)を利用します. スタイルシートには,CSS の他にも XSL(Extensible Stylesheet Language) などいくつかの種類があります.
geditを起動します. メニューを 「表示→強調モード→その他→CSS」とたどって スタイルシートの入力モードにします. 下の 4行の内容を index.css と言う名前のファイルで 保存して下さい.
body {background-color: rgb(224,255,224)}
h1 {color: maroon; text-align: center}
h2 {color: #000088}
p {text-indent: 1em}
保存が終ったら, 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 は, 段落の最初の字下げの指定です. 1em は1文字と言う単位の指定です. 単位の指定方に関する 詳しい事は, 参考書を見て下さい.
スタイルシートを書いた後のペイジも, w3m を使って見て下さい. 文字の色を変えるとか, 文字を中央に置くとかの指示は, w3m では無視されます. ウェブペイジを書き換えた時には, 必ず w3m でどう見えるかも チェックするようにして下さい.
HTML のタグやスタイルシートの指定などは英語がもとになっていますが, この程度の英単語の意味は, 各自調べておくとともに, この際覚えてください. (会話よりもむしるこういうものの方が, 使える英語だと私は考えます.)
次に行く前に, 一旦 gedit は終了して下さい.