スタイルシートの注意点

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function setCSS()
{
var colorCode = "#eecb8b";
$("titleContent").style.backgroundColor = colorCode;
$("newsBar").style.backgroundColor = colorCode;
$("mainContent").style.backgroundColor = colorCode;
$("footer").style.backgroundColor = colorCode;
}
// --></script>
</head>
<body>
<h1>スタイルシート</h1>
<form>
<input type="button" value="背景色を変更" onClick="setCSS()">
</form>
<div id="titleContent">内容(1)</div>
<div id="newsBar">内容(2)</div>
<div id="mainContent">内容(3)</div>
<div id="footer">内容(4)</div>
</body>
</html>


#titleContent, #newsBar, #mainContent, #footer {
position:absolute;
width:320px;
height:50px;
border:1px solid black;
background-color:#ddd;
}
#titleContent {
top:100px;
left:10px;
}
#newsBar {
top:150px;
left:20px;
}
#mainContent {
top:200px;
left:30px;
}
#footer {
top:250px;
left:40px;
}

・サンプルを実行する
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function setCSS()
{
var colorCode = "#eecb8b";
for (var i=1; i<=4; i++) $("subContent"+i).style.backgroundColor = colorCode;
}
// --></script>
</head>
<body>
<h1>スタイルシート</h1>
<form>
<input type="button" value="背景色を変更" onClick="setCSS()">
</form>
<div id="subContent1">内容(1)</div>
<div id="subContent2">内容(2)</div>
<div id="subContent3">内容(3)</div>
<div id="subContent4">内容(4)</div>
</body>
</html>


#subContent1, #subContent2, #subContent3, #subContent4 {
position:absolute;
width:320px;
height:50px;
border:1px solid black;
background-color:#ddd;
}
#subContent1 {
top:100px;
left:10px;
}
#subContent2 {
top:150px;
left:20px;
}
#subContent3 {
top:200px;
left:30px;
}
#subContent4 {
top:250px;
left:40px;
}

・サンプルを実行する
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function setCSS()
{
var colorCode = "#eecb8b";
for (var i=1; i<=3; i++) $("subContent"+i).style.backgroundColor = colorCode;
}
// --></script>
</head>
<body>
<h1>スタイルシート (1)</h1>
<form>
<input type="button" value="背景色を変更" onClick="setCSS()">
</form>
<div id="subContent1">内容(1)</div>
<div id="subContent2">内容(2)</div>
<div id="subContent3">内容(3)</div>
</body>
</html>


#subContent1, #subContent2, #subContent3 {
position:absolute;
width:320px;
height:50px;
border:1px solid black;
background-color:#ddd;
}
#subContent1 {
top:100px;
left:10px;
}
#subContent2 {
top:150px;
left:20px;
}
#subContent3 {
top:200px;
left:30px;
}

・サンプルを実行する
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function setCSS()
{
var cName = "hightlightColor";
for (var i=1; i<=3; i++) $("subContent"+i).className = cName;
}
// --></script>
</head>
<body>
<h1>スタイルシート (2)</h1>
<form>
<input type="button" value="背景色を変更" onClick="setCSS()">
</form>
<div id="subContent1" class="normalColor">内容(1)</div>
<div id="subContent2" class="normalColor">内容(2)</div>
<div id="subContent3" class="normalColor">内容(3)</div>
</body>
</html>


#subContent1, #subContent2, #subContent3 {
position:absolute;
width:320px;
height:50px;
border:1px solid black;
}
#subContent1 {
top:100px;
left:10px;
}
#subContent2 {
top:150px;
left:20px;
}
#subContent3 {
top:200px;
left:30px;
}
.normalColor {
background-color:#ddd;
}
.hightlightColor {
background-color:#eecb8b;
}
・サンプルを実行する
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function setCSS()
{
var cName = "hightlightColor lightTextColor";
for (var i=1; i<=3; i++) $("subContent"+i).className = cName;
}
function setTextCSS()
{
var cName = "hightlightColor darkTextColor";
for (var i=1; i<=3; i++) $("subContent"+i).className = cName;
}
function initCSS()
{
var cName = "normalColor";
for (var i=1; i<=3; i++) $("subContent"+i).className = cName;
}
// --></script>
</head>
<body>
<h1>スタイルシート (2)</h1>
<form>
<input type="button" value="背景色を変更" onClick="setCSS()">
<input type="button" value="文字色を変更" onClick="setTextCSS()">
<input type="button" value="初期状態に戻す" onClick="initCSS()">
</form>
<div id="subContent1" class="normalColor">内容(1)</div>
<div id="subContent2" class="normalColor">内容(2)</div>
<div id="subContent3" class="normalColor">内容(3)</div>
</body>
</html>


#subContent1, #subContent2, #subContent3 {
position:absolute;
width:320px;
height:50px;
border:1px solid black;
}
#subContent1 {
top:100px;
left:10px;
}
#subContent2 {
top:150px;
left:20px;
}
#subContent3 {
top:200px;
left:30px;
}
.normalColor {
background-color:#ddd;
}
.hightlightColor {
background-color:#eecb8b;
}
.darkTextColor {
color:#f22;
}
.lightTextColor {
color:#44f;
}
・サンプルを実行する
Ajax逆引きクイックリファレンス　説明などは本書を参考にしてください。