スタイルシートを書く

HTML は, 文章の内容を論理構造を表すタグとともに記述するように 考えられており, その見栄えや表現方法はブラウザに任せるようにしています. これは, Web をアクセスする人が, さまざまな環境である得る事を想定した 仕様で, 当然の事です.

しかし, 多くの場合 Web にアクセスするのはグラフィカルな browser で, 文書の多彩な表現が可能です. このような環境に対して内容の色や配置を 指定するには, スタイルシートを利用します. この講義では, 最も標準的に用いられている カスケイディングスタイルシート (Cascading style sheet, CSS)を利用します. スタイルシートには,CSS の他にも XSL(Extensible Stylesheet Language) などいくつかの種類があります.

テキストエディタを起動して, 下の 4行の内容を index.css と言う名前のファイルで, index.html がある場所と同じフォルダに保存して下さい.

body {background-color: rgb(224,255,224)}
h1 {color: maroon; text-align: center}
h2 {color: #000088}
p {text-indent: 1em}

保存が終ったら, ブラウザの再読み込みボタンを押して, 表示がどのように変化するかを見て下さい. (再読み込みボタンが分からなければ, 一旦ブラウザを終了して, index.html をもう一度ダブルクリックで開く.)

もし何も変化しなければ, ファイル名がindex.css となっているか, index.html の 上から 7行目付近の

<link rel="stylesheet" type="text/css" href="index.css">

の部分が間違っていないかを確かめて下さい. iPad + Koder の場合は, 残念ならがら, そのままではスタイルシートの内容は 反映されないようです.

CSS は, 次のような形で記述されます.

セレクタ	{種類 :	指定値 ;	種類: 指定値; …}
何の	どの部分を	どの値に	…

複数の部分を指定する場合には, ; で区切って書きます. 例えば上で,

h1 {color: maroon; text-align: center}

としてありますが, 第1レベルの見出しの色は maroon にし, そのテキストは画面の中央に配置すると言う意味です.

また, 色指定は3通りを例示してあります. rgb(224,255,224)と #E0FFE0 は同じ意味になります. どちらも光の3原色赤(red), 緑(green), 青(blue)の輝度を, 数値で指定しており, 始めの方は10進で分離して書いてあり, 後の方は16進でまとめて書いてあります. 輝度の値の範囲は 0〜255(2の8乗 - 1)です. 代表的な色は, 色の名前(例えば maroon=栗色)で指定する事も出来ます. html で定義されている色の名前はそう多くありません.

最後のセレクタ p の指示での text-indent は, 段落の最初の字下げの指定です. 1em は1文字と言う単位の指定です. 単位の指定方に関する 詳しい事は, 参考書を見て下さい.

HTML のタグやスタイルシートの指定などは英語がもとになっていますが, この程度の英単語の意味は, 各自調べておくとともに, この際覚えてください. (会話よりもむしろこういうものの方が, 使える英語だと私は考えます.)