| では、実際にCSSを使ったページはどうやって作るのかを見てみよう。
サイトは通常複数のページにて構成される。
そして、ＣＳＳを使用して、そららページの見た目を統一することとなる。
たとえば、以下の要素の見た目は全ページで共通させる場合が多く、よくＣＳＳで定義するだろう。
body , h1 , h2 , h3 , a , tbody
他の要素でも、クラスと組み合わせて様々な共通レイアウトを指定することになる。
では、実際にＣＳＳを使用する場合のやり方を説明しよう。
まず、index.html(もしくはshtml, php)を作成する。他のページも同じように作成することとなる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
<link href="/def.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
上記は、必ず書く最低限の内容だ。
次に、CSSファイルを作成する。これは一つだけ作成すればよい。全ページがこのファイルを参照する。
上記 <link href="/def.css" rel="stylesheet" type="text/css"> の href="" で指定したファイル名、ここでは def.css を作成する。
そう、CSSを使用する場合は、その一行を追加するだけである。
▼def.css の中身の例
body {
font-family: "Verdana", "Arial", sans-serif;
font-size: 12px;
color: #333333;
background-color: #FFFFFF;
}
a {
color: #6666CC;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 24px;
}
上記内容は、あくまで一例である。
body要素とa要素とh1要素のスタイルを指定したわけだ。
body要素では背景色、フォントの種類と大きさと色。
a要素では色と下線。
h1要素では文字の大きさ。
これらがここで指定されている。
あとはページを普通に作成するだけである。
以上がもっとも一般的なやり方であり、他の方法は覚えなくても問題は無い。
なれてきたら、他の方法（htmlファイルに直接埋め込む。タグに直接埋め込む）を覚えればいいだろう。
この方法は滅多に使うことはないので、ここでは省く。
|
