さきほど作ったサンプルをもう一度よく見てみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>私のホームページ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>私のホームページ</h1> <p>工事中</p> </body> </html>
7行目の style.css は，このページのスタイルを指定するスタイルシートのファイル名ですが，まだこのファイルを作っていませんでした。
これから style.css を作りましょう。メモ帳を開いて，次のように打ち込みます。これは本文（body）の余白（margin）を画面の幅の 5% に設定するというスタイル指定です。
body {
margin: 5%;
}
これを style.css という名前で，さきほどの index.html
と同じ場所に保存します。このファイルには（今のところ）日本語は使われていないので，保存するときの文字コードはUTF-8でもANSI（シフトJIS）でもかまいません。
この style.css もサーバに送って，どうなるか見てください。余白ができればOKです。
CSS（Cascading Style Sheets，カスケーディング・スタイルシート）は，Webページのスタイルを指定するための仕組みです。
最初のCSSレベル1はWorld Wide Web Consortium（W3C）が1996年に定めました。現在広く使われているのは1998年のCSSレベル2です。
CSSは style.css のような別ファイルに書くことをお勧めします。こうすることによって，デザインと内容を切り分けることができますし，複数のページを同じデザインにできるので統一感が得られます。
CSSをその場だけで使うことも可能です。例えば特定のページの本文だけ余白を 5% に設定したいなら，その(X)HTMLファイルの <body> タグを次のようにします：
<body style="margin:5%">
このように最後のセミコロン ; は省略してもかまいません。
Last modified: 2011-08-10 14:17:11