はじめてのCSS

スタイルを変えてみよう

さきほど作ったサンプルをもう一度よく見てみましょう。

<!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とは

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