HTML文書の見映えを変えるときにはスタイルシートを利用する。 スタイルシートはHTMLの各要素(エレメント)に対する、文字色、背景色、 枠付け、などの見映えを統一的に指定する。
これまでは文字の色を変えたりするときは font エレメントを使用して、
<font color="red">...</font>
のように書いた。これはHTML文書と見映えの分離ができないため
現在では推奨されない書き方である。
スタイルシートは、HTMLの本文と、各エレメントの見映え(スタイル)を定義 する部分を分けて記述する。具体的には、HTML文書の先頭でスタイルシートの 宣言を読みこむ部分を追加する。
<html>
<head>
<title>
KOEKI Taro's Home Page!!
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>
公益太郎の部屋へようこそ
</h1>
<p>
寄ってらっしゃい見てらっしゃい。
</p>
</body>
</html>
元の文書に、
<link rel="stylesheet" type="text/css" href="style.css">
を追加する。追加する位置に注意。この行は、スタイルを定義するファイル
として style.css というファイルを読みこむことを宣言している。
正しく書けたら C-x C-s をタイプしてディスクに保存する。
続いて、スタイル定義ファイルを作成しよう。Emacsで
C-x C-f(find-file)をタイプして style.css
ファイルを開こう。
~/public_html/style.css
style.css ファイルは、以下の内容にする。
body {background: ivory;}
h1 {text-align: center; color: blue;}
コロン(:)とセミコロン(;)が混在しているので注意。
text-align color の後にあるのはコロン(:)
center blue gree の後にあるのはセミコロン(;)である。
ファイルが正しく書けたら C-x C-s をタイプして ファイルを保存しよう。
この意味は、
body {background: ivory;}
body要素(つまり文書の本文全体)の
background(背景)を ivory 色にする。
h1 {text-align: center; color: blue;}
H1要素(レベル1見出し)の
text-align(テキストの割り付け)を center(中央)に、
color(文字色)を blue(青) にする。
という意味を持っている。
index.html, style.css 両ファイルともに修正が完了したら
NetscapeなどのWebブラウザを利用して、先ほどの index.html
を見てみよう。H1とH2の見映えが変わっていることが確認できれ
ば良い。
二つのHTML文書ファイルから同一のスタイルシートファイルを参照して、ス タイルが統一できることを確認しよう。
まず、元のHTML文書(index.html)に、別の文書への
リンクを作成する。
index.html
<html>
<head>
<title>
KOEKI Taro's Home Page!!
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>
公益太郎の部屋へようこそ
</h1>
<p>
寄ってらっしゃい見てらっしゃい。
まずは<a href="intro.html">自己紹介</a>なぞ。
</p>
</body>
</html>
書き終わったら C-x C-s をタイプして文書を保存し、
新しいHTML文書ファイル intro.html を開く。
C-x C-f → ~/public_html/intro.html
とタイプし、intro.html を開き、その内容を、
以下のようにする。
intro.html<html> <head> <title> Introduction </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1> 自己紹介 </h1> <p>申年です。以上。</p> </body> </html>
書き終わったら C-x C-s をタイプして文書を保存する。 NetscapeなどのWebブラウザで確認しよう。